在网页端执行正常,如下图,点击左边三列相应的图片一次后,图片变灰,并且不能再点击,在右边显示三列图片,如下图:
但是在用手机模拟器模拟的时候,点击左边三列相应的图片,只能点击一次图片,其他再点击就无效了,如下图:
网络回传数据和其他均正常,相关代码如下
<view class="content">
<view class="selectP">
<view class="selectItem" v-for="(item,index) in selectPArr" :id="index" :key="index" >
<image :src="'http://172.16.3.37/test' + item.imageurl" style="width:80upx;height:80upx" :id="index" :class="[isClick[index]==1 ? 'clickImg':'selectItem']" @click.once="selectPClick"></image>
<text style="display: block; font-size: 10upx;">{{item.nickname}}</text>
</view>
</view>
<view class="selectedP1">
<view class="selectItem" v-for="(item,index) in selectedP1" :id="index" :key="index" >
<image :src="'http://172.16.3.37/test' + item.imageurl" style="width:80upx;height:80upx" ></image>
<text style="display: block; font-size: 10upx;">{{item.nickname}}</text>
</view>
</view>
<view class="selectedP2">
<view class="selectItem" v-for="(item,index) in selectedP2" :id="index" :key="index" >
<image :src="'http://172.16.3.37/test' + item.imageurl" style="width:80upx;height:80upx" ></image>
<text style="display: block; font-size: 10upx;">{{item.nickname}}</text>
</view>
</view>
<view class="selectedP3">
<view class="selectItem" v-for="(item,index) in selectedP3" :id="index" :key="index" >
<image :src="'http://172.16.3.37/test' + item.imageurl" style="width:80upx;height:80upx" ></image>
<text style="display: block; font-size: 10upx;">{{item.nickname}}</text>
</view>
</view>
</view>
methods: {
selectPClick : function(e) {
console.log(e);
_self.isClick[e.currentTarget.id]=1;
console.log(e.currentTarget.id);
console.log(_self.isClick[e.currentTarget.id]);
_self.selectedP1.push(_self.selectPArr[e.currentTarget.id]);
_self.selectedP2.push(_self.selectPArr[e.currentTarget.id]);
_self.selectedP3.push(_self.selectPArr[e.currentTarget.id]);
console.log(_self.selectedP1);
_self.$forceUpdate();
}
}