一、单选样式弹窗选择
1、View页面代码
<uni-popup ref="textBox" type="bottom">
<view class="select_box">
<view class="select_row" v-for="(item,index) in status" @click="selectClick(item.id)">
{{item.name}}
</view>
</view>
</uni-popup>
<view @click="open('2')"> 打开弹窗 </view>
2、css页面代码
.select_box {
height: auto;
width: 100%;
background-color: white;
// margin-bottom: 50px;
}
.select_row {
height: 50px;
line-height: 50px;
text-align: center;
border-bottom: 1px solid rgb(235, 235, 235);
// padding-left: 100px;
}
3、js代码
data()
data() {
return {
verBj: "", // 选择弹出框中的变量标记
status: [{
id: "0",
name: "是"
},
{
id: "1",
name: "否"
},
],
}
},
open(bj) {
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
this.verBj = bj; // 一个弹出框,确定执行哪个程序
this.$refs.selectBox.open('bottom')
},
selectClick(id) {
// 通道1
if (this.verBj === "1") {
this.checkDesc.isEmergency = id;
}
// 通道2
if (this.verBj === "2") {
this.checkDesc.isJoint = id;
}
this.$refs.popup.close() // 关闭弹窗
}