微信小程序组件picker使用方法

不凡其他 2020-04-08 1.1K+

关于微信小程序中的下拉框组件，小程序中没有直接的select，只能使用小程序提供的picker组件，小程序官方提供的picker文档 https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

我提供一个例子，大佬们看一下就明白了

小程序wxml页面关键代码

//后台获取areas展示到页面上，具体看下方js

        <view class="weui-cells weui-cells_after-title">
          <view wx:if="{{areas}}" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
            <view class="weui-cell__hd weui-cell__hd_in-select-after">
              <view class="weui-label">区县</view>
            </view>
            <view class="weui-cell__bd">
              <picker bindchange="areasChange" value="{{areas[areasIndex].id}}" range="{{areas}}" range-key="{{'areaName'}}">
                <view class="weui-select weui-select_in-select-after">{{areas[areasIndex].areaName}}</view>
              </picker>
            </view>
          </view>
          </view>
          //简易版，fwLeiBies的数据看下方的JS，这个数据是写死的
             <view  class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
            <view class="weui-cell__hd weui-cell__hd_in-select-after">
              <view class="weui-label">房屋类别：</view>
            </view>
            <view class="weui-cell__bd">
              <picker bindchange="fwLeiBieChange" value="{{fwLeiBies[fwLeiBiesIndex]}}" range="{{fwLeiBies}}" >
                <view class="weui-select weui-select_in-select-after">{{fwLeiBies[fwLeiBiesIndex]}}</view>
              </picker>
            </view>

</view>

注：

value="{{areas[areasIndex].id}}" 是picker的value值，用处不是很大，因为写上value也不获取不到，只能获取到下标

range="{{areas}}" 是小程序的数组，就是要让picker展示的数据

bindchange="areasChange" 相当于select的change事件

range-key="{{'areaName'}}" 是小程序下拉框中显示的值(如果areas是对象的话，areaName就是对象中要在picker中展示的字段)，效果如下图：

微信小程序组件picker使用方法-第1张图片-爱制作博客

<view class="weui-select weui-select_in-select-after">{{areas[areasIndex].areaName}}</view>

中{{areas[areasIndex].areaName}}是界面展示的值，效果如下图，因为areas是一个数组对象，

areasIndex是它的下标，areaName是数组对象中的一个字段（展示那个字段，就点那个字段）

还有一种写死的数组，看上边小程序wxml中的简易版就可直接写{{fwLeiBies[fwLeiBiesIndex]}}

微信小程序组件picker使用方法-第2张图片-爱制作博客

小程序js页面关键代码

        var fwIfno = null;
        Page({
          data: {
              areas: undefined,// 区县数数组
              areasIndex: 0,//选择的区下标
              
              fwLeiBies: ['单元（公寓）楼','筒子楼','别墅','平房','自建楼','四合院','其他'],//房屋用途数组
              fwLeiBiesIndex: 0,// 房屋用途下标
          },
          onLoad: function (options) {
            var that = this;
            wx.request({
              url: getApp().globalData.url + '/wxApi/selectLayerTwo',
              method: "GET",
              data:{str:2},
              success: function (res) {
                if (res.statusCode == 200) {
                  that.setData({
                    areas: res.data.result
                  });
                } else {
                }
              }
            })
          },
          areasChange(e){
            var that = this;
            console.log("区县选择")
            this.setData({
              areasIndex: e.detail.value//选中后回显用
            })
          },
          
          fwLeiBieChange(e){
            var that = this;
            this.setData({
              fwLeiBiesIndex: e.detail.value//选中后回显用
            })
          },
        });

标签：微信小程序微信支付

本文地址： https://izhizuo.cn/post/152.html

文章来源：不凡