【RuoYi移动端】HbuilderX实现底部弹窗示例

一、单选样式弹窗选择

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() // 关闭弹窗
			}