测试代码如下:
①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的项数一致 这是为什么?
1 个回复
8***@qq.com
可以加个判断在change绑定的方法中 ,判断pop的type不等于空 才会执行该方法中的内容