uniapp组件 从下方弹出进行选择

1.首先自定义一个components文件夹存放所有自定义组件，右键文件夹新建组件，使用默认模板就行。

 2.可以根据想要的效果在当前页面写好，例如我写的就是选择部门的一个组件，是一个显示在下方的弹窗组件。

直接放代码，通过props、mode和watch内定义，引用组件时可直接使用v-model绑定。

<template>
	<view>
		<uni-popup ref="selectSuGroup" type="bottom">
			<scroll-view :style="'max-height:' + height + 'px;'" scroll-y="true">
				<view v-if="clear" class="showCheckLine" style="color: #e0e0e0" @click="checkNull">
					取消选择
				</view>
				<view class="showCheckLine" v-for="item in data" :key="item.id" @click="checkThis(item)">
					{{ item.name }}
				</view>
			</scroll-view>
			<view style="margin-top: 10px;">
				<button @click="close">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { SU_GROUP } from '@/public/config.js'
	import { queryView } from '@/api/login.js'
	export default {
		name:"selectSuGroup",
		data() {
			return {
				checkValue: this.value,
				data: [],
				allData: [],
				param: {
					pageIndex: 1,
					pageSize: 1000,
					viewNo: 'VAPPSUGroup',
					param: {}
				},
				height: 0
			};
		},
		props: {
			clear: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: null
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		watch: {
			checkValue: function (newVal, oldVal) {
				if (newVal === oldVal) return
				const find = this.data.find(item => {
					return item.id === newVal
				})
				this.$emit('change', newVal, find)
			}
		},
		created() {
			const me = this
			uni.getSystemInfo({
				success(res) {
					me.height = res.windowHeight / 2
				}
			})
			uni.getStorage({
				key: SU_GROUP,
				success(res) {
					me.data = res.data
				},
				fail() {
					me.queryData()
				}
			})
		},
		methods: {
			open () {
				this.$refs.selectSuGroup.open()
			},
			close () {
				this.$refs.selectSuGroup.close()
			},
			checkNull () {
				this.checkValue = null
				this.$refs.selectSuGroup.close()
			},
			checkThis (item) {
				this.checkValue = item.id
				this.$refs.selectSuGroup.close()
			},
			queryData() {
				const me = this
				queryView(this.param).then(res => {
					uni.setStorage({
						key: SU_GROUP,
						data: res.data.data,
						success: function () {
							console.log('SU_GROUP: ', res.data.data);
						}
					})
					me.data = res.data.data
				})
			}
		}
	}
</script>

<style>

</style>

3.进行全局注册（或局部注册）

import selectSuGroup from '@/components/selectSuGroup/selectSuGroup.vue'
Vue.component('select-su-group', selectSuGroup) // 选择部门组件

4.使用组件，我这里是在循环内使用的组件，不是在循环内的话，打开弹窗时不需要[0]，this.$ref.xxx.open()就行

<uni-row class="uni-row-select" style="border-bottom: 0;">
						<uni-col :span="8" class="rightBorder">责任单位</uni-col>
						<uni-col :span="16">
							<select-su-group :ref="'modal' + index + 'groupId'" v-model="item.groupId" @change="(id, ele) => {changeGroup(item, ele)}" />
							<view @click="openModal(index + 'groupId')" style="width: 100%;height: 30px;">
								<text v-if="item.groupId">
									{{item.groupName}}
								</text>
								<text class="choose_tip" v-else>
									点击进行选择
								</text>
							</view>
						</uni-col>
					</uni-row>

 方法如下

changeGroup (item, ele) {
				if (ele) {
					item.groupName = ele.name
				} else {
					item.groupName = ''
				}
			},
			openModal (index) {
				const ref = 'modal' + index
				this.$refs[ref][0].open()
			},

5.效果如下

1.未选       2.选择       3.已选

其他: 当前也可以使用传进去的值进行选择，组件如下

<template>
	<view>
		<uni-popup ref="selectSuGroup" type="bottom">
			<scroll-view :style="'max-height:' + height + 'px;'" scroll-y="true">
				<view v-if="clear" class="showCheckLine" style="color: #e0e0e0" @click="checkNull">
					取消选择
				</view>
				<view class="showCheckLine" v-for="item in data" :key="item" @click="checkThis(item)">
					{{ item }}
				</view>
			</scroll-view>
			<view style="margin-top: 10px;">
				<button @click="close">取消</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name:"selectAfferent",
		data() {
			return {
				checkValue: this.value
			};
		},
		props: {
			data: {
				type: Array,
				default: () => {
					return [] // 传入字符串数组
				},
				required: true // 控制传参是否必填
			},
			clear: {
				type: Boolean,
				default: false
			},
			value: {
				type: String,
				default: null
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		watch: {
			checkValue: function (newVal, oldVal) {
				if (newVal === oldVal) return
				this.$emit('change', newVal)
			}
		},
		created() {
			const me = this
			uni.getSystemInfo({
				success(res) {
					me.height = res.windowHeight / 2
				}
			})
		},
		methods: {
			open () {
				this.$refs.selectSuGroup.open()
			},
			close () {
				this.$refs.selectSuGroup.close()
			},
			checkNull () {
				this.checkValue = null
				this.$refs.selectSuGroup.close()
			},
			checkThis (item) {
				this.checkValue = item
				this.$refs.selectSuGroup.close()
			}
		}
	}
</script>

<style>
</style>

页面使用，这个就不需要写change方法了，选啥就是啥

传参