sulee
sulee
  • 发布:2019-08-20 09:42
  • 更新:2019-11-16 14:32
  • 阅读:2786

picker-view 作为子组件放在 uni-popup中 关闭pop 也会触发 picker-view的 change事件

分类:uni-app

picker-view 包裹在 uni-popup中 关闭pop 也会触发 picker-view的 change事件

代码如下
pick-view 定义:

<template name="WeightPicker">  
<view class="weight">  
<view class="weight-title">  
<text @tap="closePop()">取消</text>  
<text @tap="ensureSelected()">确定</text>  
</view>  
<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">  
<picker-view-column>  
<view class="weight-item" v-for="(item,index) in weights" :key="index">{{item}} kg</view>  
</picker-view-column>  
</picker-view>  
</view>  
</template>  
  
<script>  
export default {  
name: 'WeightPicker',  
data() {  
return {  
weightStart: 30,  
weightEnd: 150,  
weights: [],  
weight: 0,  
value: [30],  
visible: true,  
indicatorStyle: 'height: ${Math.round(uni.getSystemInfoSync().screenWidth/(950/100))}px;'  
}  
},  
methods: {  
// 绑定滑动  
bindChange(e) {  
let val = e.detail.value  
this.weight = this.weights[val[0]];  
},  
//数据初始化  
initData() {  
for (let i = this.weightStart; i <= this.weightEnd; i++) {  
this.weights.push(i);  
}  
},  
// 关闭弹窗  
closePop() {  
this.$emit("close");  
},  
// 确定选择  
ensureSelected() {  
this.$emit("weight", this.weight == 0 ? 60 : this.weight);  
}  
},  
created() {  
this.initData();  
}  
}  
</script>

uni-popup 使用:

<uni-popup ref="weight_popup" type="bottom">  
<weight-picker v-on:weight="weightSelected()" v-on:close="closeWeightPopup()"></weight-picker>  
</uni-popup>

关闭pop

this.$refs.weight_popup.close();

关闭时如果 绑定的change事件函数中 val数组中某一项不为0 会多次触发该函数 次数与val中不为0的项数一致 这是为什么?

2019-08-20 09:42 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com

pick-view中change绑定的方法 可以加个判断,判断unipop的type值不为空的时候才执行,就不会重复触发了

Smart900zhang

Smart900zhang - 一名前端

同楼主遇到的问题,H5页面正常。真机运行就出错了。

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