8***@163.com
8***@163.com
  • 发布:2020-11-27 17:24
  • 更新:2021-02-03 16:58
  • 阅读:1308

【报Bug】运行到手机或模拟器,页面引入多个同一组件,组件之间会出现相互干扰问题。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: WIN7

HBuilderX类型: 正式

HBuilderX版本号: 2.9.3

手机系统: Android

手机系统版本号: Android 7.0

手机厂商: SHARP

手机机型: mini s3

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<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>  

操作步骤:

运行到手机或模拟器后,按顺序点击0和1,然后取消0,再重新选择0.
然后点击上面组件中的+或-,下面组件中的数字会变化。

预期结果:

运行到手机或模拟器,组件间不相互干扰。

实际结果:

运行到手机或模拟器,组件间相互干扰。

bug描述:

页面引入多个同一组件,组件之间会出现相互干扰问题。
运行到浏览器不会出现上述问题,运行到手机或模拟器会出现上述问题。

2020-11-27 17:24 负责人:DCloud_UNI_GSQ 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

HBuilderX 3.1.0 alpha 已修复

DCloud_UNI_Anne

DCloud_UNI_Anne

问题确认,会继续优化,已加分,感谢您的反馈!

8***@163.com

8***@163.com (作者)

感谢。期待优化!

DCloud_UNI_GSQ

DCloud_UNI_GSQ

预计下个 alpha 版本修复
临时解决方案:

        <view v-for="(item1, index1) in xuanzhong" :key="item1.b">    
            <view>{{item1.a}}</view>    
            <uni-number-box :key="item1.b"></uni-number-box>    
        </view>  

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