uniapp做一个好看的开关
要做一个好看的开关,可以使用uniapp的组件库来实现。以下是一个示例代码:
<template>
<view class="switch-container">
<view class="switch" :class="{ active: switchOn }" @click="toggleSwitch"></view>
</view>
</template>
<script>
export default {
data() {
return {
switchOn: false
}
},
methods: {
toggleSwitch() {
this.switchOn = !this.switchOn
}
}
}
</script>
<style>
.switch-container {
width: 100px;
height: 50px;
background-color: #e6e6e6;
border-radius: 25px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 5px;
box-sizing: border-box;
}
.switch {
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
transition: transform 0.3s;
}
.active {
transform: translateX(50px);
background-color: #00c853;
}
</style>
在上述代码中,使用了一个容器包裹开关,容器的样式可以根据需要进行调整。开关使用一个view组件表示,通过绑定active类来控制开关的状态。点击开关时,通过toggleSwitch方法来改变开关的状态。开关的样式通过修改switch类的样式来实现。
你可以根据自己的需求来调整样式和功能,使其更好看
原文地址: http://www.cveoy.top/t/topic/hQVp 著作权归作者所有。请勿转载和采集!