[bottom pop-up selector] uniapp picker component - scroll selector popped up at the bottom

One 、 The effect to be achieved , As shown in the figure below ：

Two 、 Code ：

<template>
	<view>
		//mode ： selector Is the most common selector ,[ Specific reference documentation .](https://uniapp.dcloud.io/component/picker.html)
		//range  ： Array to bind .
		//range-key  ： Which of the array do you want to display in the pop-up box key value . For example, I want to display in the array color title Value , It can't be written as id.
		//@change ： This callback function will be triggered when you click Select .
		
		<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 {
       // Selected color subscript  colorIndex:0, // stay picker The color of the selected item in the list id color_id: '', // Color list data （ Fake data , You can send a request to get the real background data in the interface function ） colorList:[ {
      id: 1, title: ' Red '}, {
      id: 2, title: ' green '}, {
      id: 3, title: ' Blue '} ], } }, onLoad() {
       this.getCaseList() }, methods: {
       //  Color screening  colorChange(e){
       this.colorIndex = e.detail.value this.getCaseList() }, // List of cases - Interface  getCaseList() {
       var that = this; that.page = 1; var params = {
       // Color 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 // Color  that.colorList.unshift({
      id:'',title:' Color '}); 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~