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

二、弹出输入内容框

1、template页面代码

<uni-popup ref="textBox" type="bottom">

			<view class="popupTitle">
				请输入内容
			</view>
			<view class="select_box">
				<view class="textBox_1">
					<textarea class="textareaBox" v-model="checkDesc.remark" />
				</view>
				<view class="selectButton" @click="submitClick">
					保存提交
				</view>
			</view>
		</uni-popup>

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;

	}

	.selectButton {
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		width: 100%;
		margin: 0 auto;
		background-color: rgb(42, 121, 255);
		// border-radius: 5px;
		color: white;
		text-align: center;
		// margin-bottom: 5px;
		margin-top: 20px;
	}

	.popupTitle {
		height: 50px;
		line-height: 50px;
		width: 100%;
		background-color: #eaf0f6;
		text-align: center;
		font-size: 18px;
		color: rgb(130, 130, 130);
	}

	.textBox_1 {
		height: 150px;
		width: 100%;
	}

	.textareaBox {
		background-color: #f9f9f9;
		width: 100%;
		height: 100%;
		font-size: 20px;
		padding: 10px 10px 10px 10px;
	}

3、js页面代码

return {
				verBj: "", // 选择弹出框中的变量标记
				textBox: "", // 选择文本框内容
				status: [{
						id: "1",
						name: "是"
					},
					{
						id: "0",
						name: "否"
					},
				],

// ============  【文本框弹窗】
			openText(bj) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.verBj = bj; // 一个弹出框，确定执行哪个程序
				this.$refs.textBox.open('bottom')
			},
			submitClick() {
				this.$refs.textBox.close() // 关闭弹窗
			}