九、uni-popup用法 下拉框底部弹窗效果

此方法代码中列表可选【名称】由后端接口定义

<view class="uni-form-item">
	<view class="tips">*</view>
	<view class="title">所在医院</view>
	<!-- 这里的图片就是个向右的小箭头 -->
	<view class="input_box" @click="getFactory"><text v-if="factureName==''">请选择</text><view class="input_box_info">{{factureName}}</view><image src="../../static/right.png"></image></view>
</view>

<uni-popup ref='namePopup' type="bottom" mask-background-color='rgba(0,0,0,0.5)'>
	<view class="select_list_box">
		<view class="poputitle">单位名称</view>
		<scroll-view class="popup_list" :scroll-y="true">
			<view v-for="item in factoryList" class="list_li" @click="getItmeName(item)" :key="item.id">{{item.yyname}}</view>
		</scroll-view>
	</view>
</uni-popup>

export default {
	data(){
		return{
			factureName:'',
			factoryList:[],
		}
	},
	methods: {
			  //获取单位名称列表
			  getFactory(){
			  	this.$refs.namePopup.open()
			  	uni.request({
			  	// baseurl为引入的接口地址
			  		url:baseurl+'/wx/user/yyname',
			  		method: 'POST',
			  		data: {dictType:'admp_reagent_manufacturer'},
			  		header: {
			  			'content-type': 'application/json'
			  		},
			  		success: res => {
			  			this.factoryList=res.data.data
			  			console.log(res.data.data);
			  		}
			  	})
			  },
			  getItmeName(item){
			  	this.form.reagentManufacturer=Number(item.id)
			  	this.factureName=item.yyname
			  	this.$refs.namePopup.close()
				this.form.companyName=this.factureName
			  },
	}
}