小程序下拉选择

效果:

注: 代码看不懂 请console.log(); 控制打印 自行理解 发布的代码只是一种思路

1、在该文件中的js文件 onLoad: function 生命周期函数--监听页面加载 中获取数据库数据

 data: {  
      array:[],
      index:'',  //下标
      state:'',
    },
   onLoad: function (options) {
        let onself=this;
        //获取下拉数据
        wx.request({
         //调用后端接口
          url: 'http://www.wty.com/api/classify',
          dataType:'json',
          success(res){
              if(res.data.code==200){
                  //获取后端值
                  onself.setData({
                      res:res.data.data
                  })
                  //因为获取到的值是二维数组的形式所以要通过foreach 追加获取对应字段
                  onself.data.res.forEach(res => {
                      onself.data.array.push(res['state_name'])
                  });
                  //将追加的字段赋值给空数组
                  onself.setData({
                      array:onself.data.array
                  })
              }
          }
        })
    },

2、书写前端样式picker

<view style="margin: 30rpx 0;">
    <picker bindchange="change" value="{{index}}" range="{{array}}">
        <view style="border: 1px solid black;">
            类型:{{array[index]}}
        </view>
    </picker>
</view>

3、 picker 自带触发属性 picker | 微信开放文档 bindchange

 //下拉
    change(e){
        this.setData({
            index:e.detail.value,  //下标
            state:this.data.array[e.detail.value] //入库传值
        })
    },