要做一个好看的开关,可以使用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类的样式来实现。

你可以根据自己的需求来调整样式和功能,使其更好看

uniapp做一个好看的开关

原文地址: http://www.cveoy.top/t/topic/hQVp 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录