首页 > 微信 > 详细

微信小程序:picker组件实现下拉框效果

时间:2020-11-24 20:27:57      阅读:133      评论:0      收藏:0      [点我收藏+]

一、wxml中代码

<view class="in_order_Param">
            <text>状态:</text>
            <picker mode="selector" bindchange="bindPickerChange" value="{{listQuery.status}}range="{{array}}">
                <input placeholder="状态" name="status" value="{{name}}" bindinput="handleinput" data-name="status" style="width: 90%"/>
            </picker>
        </view>

mode值为selector,即普通模式。注意:选择某一项后,提交的是索引,即listQuery.status为索引值,为数值。选择后触发change事件。

二、js中的代码

data: {
        listQuery: {
          page: 1, // 页码
          limit: 5, // 个数
        },
        array: [‘新建‘, ‘已发货‘, ‘已收货‘, ‘退货‘,‘已入库‘,‘已备货‘,‘已确认‘,‘部分退货‘,‘已作废‘], // 0.新建1.已发货2.已收货3.退货4.已入库5.已备货6.已确认7.部分退货9.已作废
        name: ‘‘
      },
      onLoad: function () {
        this.getSupplyNoteList(true);
      },
getSupplyNoteList: function(isRefresh){
        var that = this;
        console.log(that.data.listQuery);
          request.postParam("/api/supply/list",that.data.listQuery,function(res){
              wx.hideLoading();
              console.log(res)
              。。。。。省略。。。。。
        });
    },
bindPickerChange: function(e) {
      // console.log(e);
      this.setData({
        name: this.data.array[e.detail.value],
        ‘listQuery.status‘: e.detail.value == 8 ? (parseInt(e.detail.value) + 1)  : e.detail.value
      })
      console.log(‘picker发送选择改变,显示值为‘, this.data.listQuery.status)
    },
 

触发change事件后调用bindPickerChange方法,方法中将e中传递过来的索引值转换为状态对应的中文,这样页面就显示出了状态的中文。同时修改listQuery.status的值,因为状态“已作废”的索引不是8,而是9,所以需要经过处理,然后再发起请求。

页面效果如下:

技术分享图片

 

微信小程序:picker组件实现下拉框效果

原文:https://www.cnblogs.com/zwh0910/p/14031938.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!