阁楼庭院
- 发布：2019-07-29 11:17
- 更新：2021-04-26 10:36
- 阅读：9764
在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("取消修改！")
}
}
})
},
更新方法有问题
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
<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
-
阁楼庭院 (作者) - 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> 阁楼庭院 (作者) - 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(()=>{})
感谢大佬指导
-
你现在是一个switch控件可以这样写，如果是循环出来的多个一样的该怎么处理？！就是业务处理失败的，点击的那个switch不要改状态？！怎么只回退点击的那个呢？！
2020-04-03 20:32
阁楼庭院 (作者) - 80后IT
有人回复么?别沉
-
不是bug，原因是这样子写，你的初始值一开始为false, 后面的处理还是false，导致视图没更新，建议change的第一步就先对绑定的变量赋值 this.$set(this.lockwornChangeInfor, 'isOpen', e.detail.value)
2020-04-07 11:46
-
阁楼庭院 (作者)
你这个是对的，覆盖住，点击假的，调接口，成功了才改变下面的。
2021-05-14 16:22