uniapp switch按钮的使用

switch使用官方文档
https://uniapp.dcloud.io/component/switch

想要改变switch按钮的大小

<switch @change="switchChange" color="#3EC3E1" :checked="checkoutInfo.checked" style="zoom:.6" />
<switch @change="switchChange" color="#3EC3E1" :checked="checkoutInfo.checked" />

不同尺寸显示如下：

如果想手动动态改变按钮的开关：

<view v-if="checkoutInfo.isShowEle"><switch @change="switchChange" color="#3EC3E1" :checked="checkoutInfo.checked" />
</view>//data定义
checkoutInfo: {isShowEle: true,checked: false,
},
//change方法
switchChange(e) {// console.log(e)var canHandOver = e.detail.value ? 1 : 0//调用某个requst接口，可能因网络原因不成功，要强制修改开关if (data.data.data.success == false) { //不成功this.showMsg(data.data.data.msg)this.$set(this.checkoutInfo, "isShowEle", false) //先隐藏switch组件this.$set(this.checkoutInfo, "checked", !e.detail.value) //修改checked绑定的变量值this.$nextTick(() => {setTimeout(() => {this.$set(this.checkoutInfo, "isShowEle", true) //显示switch组件this.$forceUpdate() //强制更新}, 0)})return}
},

uniapp switch按钮的使用相关推荐

【iOS遇到的问题】switch控件--在设置switch按钮状态为on或者off，运行app，模拟器黑屏
switch按钮的"connections inspector"中的value changed属性重复连接了同一个按钮两次次,删除多余的关联即可: 更多JAVA.Unity3D的文 ...
uniapp switch开关插件带文字/icon图标功能实现
uniapp switch开关功能最近公司电商app确认订单页面种配送方式由默认的快递改为了快递+自提的可选择配送方式. 这个功能是需要用到switch开关功能. 为了实现能够展示文字的这种方式,通 ...
uniapp倒计时按钮,点击发送短信触发倒计时
uniapp倒计时按钮,点击发送短信和倒计时个人开发时所需用到的,记录下来,便于下次快速使用 <template><view class="box">&l ...
layui数据表格，Switch按钮点击后修改表单数据
layui是一个很好的前端模板,但是个人觉得写的教程不太友好,不适合初学者(像我这样的菜鸟) 最近在写一个数据表格,官方是这样展示的 <script type="text/html&q ...
uniapp js 按钮点击事件防抖节流防抖和节流事件的触发
uniapp中,有时也需要用到防抖与节流这两种事件.方法思路与web端的思路一致. 防抖:在此时间段触发几次事件,就延迟触发几次,并只触发最后一次事件.(一直快速触发几分钟后停止,也只执行最后的那一次 ...
微信Switch组件-switch按钮
今天我们来探讨switch开关选择器是如何实现的,演示效果如下: 未启动状态: 启动后状态: 基本思路: 将表单元素checkbox进行重新定义,-webkit-appearance就是为了重新定义而 ...
switch按钮文字切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
switch按钮的显示隐藏
<el-switchv-model="item.open"class="demoBtn"active-text="显示"inactiv ...
uni-app.05.底部按钮fixed定位后被软键盘推起的解决办法
底部按钮fixed定位后被软键盘推起的解决办法问题引出解决方案解决思路代码实现效果问题引出昨天在测试app的时候,测试提出新增个人信息界面底部的input框在输入的时候会被软键盘遮挡而看 ...

uniapp switch按钮的使用

想要改变switch按钮的大小

如果想手动动态改变按钮的开关：

uniapp switch按钮的使用相关推荐

最新文章

热门文章