【底部弹出-选择器】uniapp Picker组件——底部弹起的滚动选择器

一、要实现的效果，如下图所示：

二、代码：

<template>
	<view>
		//mode ： selector是最普通的选择器，[具体可参考文档。](https://uniapp.dcloud.io/component/picker.html)
		//range  ：想绑定的数组。
		//range-key  ：想在弹出框中显示数组的哪个key值。比如我想显示数组中color title的值，就不能写成id。
		//@change ：点击选择时会触发这个回调函数。
		
		<picker @change="colorChange" :value="colorIndex" :range="colorList" range-key="title">
			<view class="uni-input">{
   {colorList[colorIndex].title}}</view>
		 </picker>
	</view>
</template>

<script> export default {
       data() {
       return {
       //选中的颜色下标 colorIndex:0, //在picker列表所选中项的颜色id color_id: '', //颜色列表数据（假数据，可以在接口函数里面发请求获取真实的后台数据） colorList:[ {
      id: 1, title: '红色'}, {
      id: 2, title: '绿色'}, {
      id: 3, title: '蓝色'} ], } }, onLoad() {
       this.getCaseList() }, methods: {
       // 颜色筛选 colorChange(e){
       this.colorIndex = e.detail.value this.getCaseList() }, //案例列表-接口 getCaseList() {
       var that = this; that.page = 1; var params = {
       //颜色id color_id: that.colorList.length>0? that.colorList[that.colorIndex].id:'', page: that.page, limit: that.limit } this.$api.appPlateForm('POST', 'example/index', params, function(res) {
       if (res.code == 200) {
       that.colorList = res.data.color //颜色 that.colorList.unshift({
      id:'',title:'颜色'}); if(res.data.data.length>0){
       that.caselist = res.data.data; that.page++ }else{
       that.caselist =[]; } that.$forceUpdate(); } }, function(err) {
       uni.showToast({
       icon: 'none', title: err.msg }) }); }, }, } </script>

ending~