还是之前提的组件库 控件不好看？试试TDesign 今天开发的时候用到了Switch 样式好看 效果也不错 记录下 直接上代码

<z-switch defaultValue="{{pointsFlag}}" disabled slot="note" icon="{{['check', '']}}" size="small" bindchange="switchChange" />

defaultValue是初始值 在.js的文件 data数组里给个初始值就可以disabled是开关禁用初始值 和defaultValue一样 页面渲染好了附个初始值就ok

icon="{{['check', '']}}"

这个 是显示在开关上的图标
去TDesign的图标库里找需要的图标 图标名称填过来就可以了 效果是下面这样

size="small"

size值有3个 small medium large 对应大中小

还有个背景色 背景色这个得特别记录下 每次都不记得怎么写 需要在组件的外部套一个view

<view class="switch-box"> <z-switch defaultValue="{{pointsFlag}}" disabled slot="note" icon="{{['check', '']}}" size="small" bindchange="switchChange" /></view>

然后在样式里修改外部这个view

.switch-box { --td-switch-checked-color: #00a870;/*开关状态为开时的背景色*/ --td-switch-checked-disabled-color:#DCDCDC;/*开关状态为禁用时的背景色*/}

组件选择为关闭时是这样的

因为icon里 数组第二个元素留了空

icon="{{['check', '']}}"

禁用时是这样

差不多就是这样 还增加了时间控制 自定义时间内不允许客户频繁开关向服务器请求数据 这一期 就这样啦

保持好奇 不断进步 下期见~