<template>
<view class="content">
<view v-for="(item, index) in list" :key="item.name" :class="item.checked ? 'xuan_changeon' : 'xuan'" @click="click(index)">{{item.name}}</view>
<view>操作顺序:按顺序选择0和1,然后取消0,再重新选择0.</view>
<view v-for="(item1, index1) in xuanzhong" :key="item1.b">
<view>{{item1.a}}</view>
<uni-number-box></uni-number-box>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
list: [
{name: '0',checked:false},
{name: '1',checked:false}
],
xuanzhong:[]
}
},
onLoad() {
},
methods: {
click(e){
console.log(e)
var date = new Date()
var gettime = date.getTime()
if(this.xuanzhong.length==0){
this.list[e].checked=true
this.xuanzhong.push({a:e,b:gettime})
}else{
for(var i = 0; i < this.xuanzhong.length; i++){
if(this.xuanzhong[i].a==e){
this.list[e].checked=false
this.xuanzhong.splice(i,1)
console.log(i)
break;
}else if(i == this.xuanzhong.length - 1){
this.list[e].checked=true
this.xuanzhong.push({a:e,b:gettime})
break;
}else{}
}
}
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.xuan {
width: 100rpx;height: 100rpx;background-color: #C0C0C0;margin-bottom: 20rpx;
}
.xuan_changeon {
width: 100rpx;height: 100rpx;background-color: #C0C0C0;margin-bottom: 20rpx;border: #ff9b9b 1rpx solid;
}
</style>
![8***@163.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/e364968b25984feb79fde26d83601800.png)
- 发布:2020-11-27 17:24
- 更新:2021-02-03 16:58
- 阅读:1532
【报Bug】运行到手机或模拟器,页面引入多个同一组件,组件之间会出现相互干扰问题。
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: WIN7
HBuilderX类型: 正式
HBuilderX版本号: 2.9.3
手机系统: Android
手机系统版本号: Android 7.0
手机厂商: SHARP
手机机型: mini s3
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
运行到手机或模拟器后,按顺序点击0和1,然后取消0,再重新选择0.
然后点击上面组件中的+或-,下面组件中的数字会变化。
运行到手机或模拟器后,按顺序点击0和1,然后取消0,再重新选择0.
然后点击上面组件中的+或-,下面组件中的数字会变化。
预期结果:
运行到手机或模拟器,组件间不相互干扰。
运行到手机或模拟器,组件间不相互干扰。
实际结果:
运行到手机或模拟器,组件间相互干扰。
运行到手机或模拟器,组件间相互干扰。
bug描述:
页面引入多个同一组件,组件之间会出现相互干扰问题。
运行到浏览器不会出现上述问题,运行到手机或模拟器会出现上述问题。
![](http://img-cdn-tc.dcloud.net.cn/uploads/questions/20201127/70f77c36f021b4875623269e7ece1901.png)