背景:通过弹出层编写筛选代码
测试案例:
<template>
<view class="">
<u-popup :show="show" @close="close" @open="open" mode="center" class="pop">
<view class="pop-center">
<view class="">
类别
</view>
<view class="">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
<view class="">
</view>
</view>
</u-popup>
<button @click="show = true" class="btn">打开</button>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
array: ['中国', '美国', '巴西', '日本'],
index: 0,
};
},
methods: {
open() {
// console.log('open');
},
close() {
this.show = false
// console.log('close');
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.index = e.detail.value
},
}
// onLoad 和 methods 省略,假设与之前提供的相同
};
</script>
<style lang="scss">
.pop{
width: 600rpx;
height: 600rpx;
.pop-center{
width: 600rpx;
height: 600rpx;
}
}
.btn{
margin: 0 auto;
width: 200rpx;
}
</style>
编译效果: