阁楼庭院
阁楼庭院
  • 发布:2019-07-29 11:17
  • 更新:2021-04-26 10:36
  • 阅读:9979

【报Bug】uni-app switch组件的:checked属性动态设置后不起作用,群友说直接给@click事件,但是也不行

分类:uni-app

2019-07-29 11:17 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

在switch上面覆盖一层,通过点击事件操作覆盖层动态更改switch的绑定值
<switch class="item_right" color="#1890FF" :checked='workOn' />
<text @click="setWStatus" style="position: absolute;display: inline-block;width: 50%;right: 0;height:70upx;"></text>

setWStatus(e){
let that=this
var type;
uni.showModal({
title:"提示",
content:"确认修改维修状态?",
success(con) {
if(con.confirm){
setWorkStatus({RtuAuth:uni.getStorageSync('token'),type:type}).then(res=>{
console.log(res)
if(res.code==2000){
that.workOn=!that.workOn
showToast("已更改")
}else{
showToast("操作失败!")
}
})

                    }else if(con.cancel){  
                        showToast("取消修改!")  
                    }  
                }  
            })  

        },
  • 阁楼庭院 (作者)

    你这个是对的,覆盖住,点击假的,调接口,成功了才改变下面的。

    2021-05-14 16:22

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

更新方法有问题

this.$set(this.lockWarnChangeInfor, "isOpen", false)

<template>  
    <view class="content">  
        <view>  
            <switch :checked="isChecked"></switch>  
        </view>  
        <button @click="buttonClick">set switch</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                isChecked: false  
            }  
        },  
        onLoad() {  
        },  
        methods: {  
            buttonClick(e) {  
                this.isChecked = !this.isChecked;  
            }  
        }  
    }  
</script>
  • 阁楼庭院 (作者)

    大佬,这个this.$set(this.lockWarnChangeInfor, "isOpen", false) 用this.$set不起作用,难道是@change不能用这个事件?另外一个滑块切换效果,我不可能再在下面像你这样加个button按钮来给@click事件来控制上面的滑块的,哪有这种ui页面呀,你看我上面贴的图,怎么可能再去加button按钮来配合使用?

    2019-07-30 14:44

  • 阁楼庭院 (作者)

    大佬应该是@change事件的问题,但是我直接给<switch @click="lockWarnChange($event,1)" :checked="lockWarnChangeInfor.isOpen" /> 也不行,哎,你上面的回复真的没用

    2019-07-30 14:47

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

例子是演示如何绑定属性,@change this.$nextTick(()=>{}) 后处理

  • 阁楼庭院 (作者)

    用@change this.$nextTick(()=>{}) + this.$set试过了,还是不行,

    2019-07-30 15:21

DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

<template>  
    <view class="content">  
        <switch :checked="isChecked" @change="switchchange"></switch>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                isChecked: false  
            }  
        },  
        onLoad() {},  
        methods: {  
            switchchange(e) {  
                // TODO H5端内置组件实现的有问题,使用v-model无效,先这样解决  
                this.isChecked = !this.isChecked;  
                var self = this;  
                setTimeout(function() {  
                    self.isChecked = !self.isChecked;  
                }, 3000)  
            }  
        }  
    }  
</script>
  • 阁楼庭院 (作者)

    大佬,哎,你怎么就不明白我说的意思呢,我的意思不是要this.isChecked = !this.isChecked; 不是这样取反,我的意思是我通过切换来设置滑块切换,但是设置调接口设置失败了,希望他还是false,不要true,

    就是希望点击后,通过判断接口的res.state != 0的时候说明设置失败了,继续让this.isChecked = false ,但是这样赋值设置了不起作用,你这样取反,肯定会由灰色变成高亮呀,我的意思是点击切换,通过赋值,让原来的灰色,继续是灰色,而不是高亮,懂了?

    2019-08-01 09:37

  • DCloud_uni-ad_HDX

    回复 阁楼庭院: 不需要取反,去掉 setTimeout 代码就可以了, 直接赋值,setTimeout是模拟你的业务逻辑

    2019-08-01 10:31

阁楼庭院

阁楼庭院 (作者) - 80后IT

阁楼庭院

阁楼庭院 (作者) - 80后IT

<template>  
    <view class="">  
        设置通知  
        <switch @change="bian" :checked="iserr" />  
    </view>  
</template>  

<script>  
    export default{  
        data(){  
            return {  
                iserr:false,  
                res:{status:422}  
            }  

        },  
        methods:{  
            bian(){  
                //res.status != 0 模拟通过这个滑块,与后台交互,调后台接口,res.status != 0 表示设置失败状态码不为0,表示设置失败,  
                //设置失败的话,肯定希望滑块还是灰色的,不是高亮的,所以this.iserr = false ,设置成功才让this.iserr = true  
                //重点重点,我不是做this.iserr = !this.iserr 这个效果,别写这个效果了  
                if(this.res.status != 0){  
                    this.iserr = false  
                } else {  
                    this.iserr = true  
                }  
                console.log(this.res.status)  
                console.log(this.iserr)  
            }  
        }  
    }  
</script>  

<style>  
</style>  
  • 阁楼庭院 (作者)

    就是做这个测试页面,测试了,不行,还是会高亮,就这个简单的逻辑和场景,真的不复杂,但是switch的状态就是不对

    2019-08-01 11:18

阁楼庭院

阁楼庭院 (作者) - 80后IT

大佬,我上面把最近的测试代码贴出来了,就是不行,直接赋值不起作用,也打印了赋值成false还是高亮了

阁楼庭院

阁楼庭院 (作者) - 80后IT

<template>    
    <view class="content">    
        <switch :checked="isChecked" @change="switchchange"></switch>    
    </view>    
</template>    

<script>    
    export default {    
        data() {    
            return {    
                isChecked: false  ,  
                res:{status:422}  
            }    
        },    
        onLoad() {},    
        methods: {    
            switchchange(e) {    
                // TODO H5端内置组件实现的有问题,使用v-model无效,先这样解决    
                this.isChecked = !this.isChecked;  

                this.$nextTick(()=>{  
                    if(this.res.status == 0){  
                        this.isChecked = true  
                    } else {  
                         this.isChecked = false  
                    }  
                    console.log(this.res.status)  
                    console.log(this.isChecked)  
                })  
            }    
        }    
    }    
</script> 

这样处理加 // TODO H5端内置组件实现的有问题,使用v-model无效,先这样解决
this.isChecked = !this.isChecked; 加this.$nextTick(()=>{})
感谢大佬指导

  • 4***@qq.com

    你现在是一个switch控件可以这样写,如果是循环出来的多个一样的该怎么处理?!就是业务处理失败的,点击的那个switch不要改状态?!怎么只回退点击的那个呢?!

    2020-04-03 20:32

阁楼庭院

阁楼庭院 (作者) - 80后IT

有人回复么?别沉

  • 7***@qq.com

    不是bug,原因是这样子写,你的初始值一开始为false, 后面的处理还是false,导致视图没更新,建议change的第一步就先对绑定的变量赋值 this.$set(this.lockwornChangeInfor, 'isOpen', e.detail.value)

    2020-04-07 11:46

  • 银河系

    回复 7***@qq.com: 正解~

    2022-05-17 13:12

该问题目前已经被锁定, 无法添加新回复