一、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组件实现下拉框效果的更多相关文章

  1. 微信小程序手动实现select下拉框选择

    在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...

  2. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  3. 微信小程序picker组件两列关联使用方式

    在使用微信小程序picker组件时候,可以设置属性   mode = multiSelector   意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只 ...

  4. 微信小程序picker组件关于objectArray数据类型绑定

    一.前言: 我发现很多的同学都在抱怨说微信小程序的picker的mode = selector/mode = multiSelector 无法实现Object Array数据类型的绑定,其实很多人就想 ...

  5. 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况

    项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...

  6. 微信小程序(2)--下拉刷新和上拉加载更多

    下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...

  7. 微信小程序scroll-view不能实现下拉刷新

    一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新. 如需同时使用两种功能,解决步骤如 ...

  8. 微信小程序云开发-列表下拉刷新

    一.json文件开启页面刷新 开启页面刷新.在页面的json文件里配置两处: "enablePullDownRefresh": true, //true代表开启页面下拉刷新 &qu ...

  9. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

随机推荐

  1. XV6学习(10)锁

    在包括XV6的绝大部分操作系统都是多个任务交错执行的.交错的一个原因是多核硬件:多核计算机的多个CPU核心独立执行计算,如XV6的RISC-V处理器.多个CPU核心共享物理内存,XV6利用这种共享来维 ...

  2. PIE模型

    首先,我们需要明确程序的Bug有如下的定义: 1. Fault/Defect 静态的,存在于软件中的缺陷.例如:一段有缺失或者错误的代码. 2. Error 运行时一种不正确的中间状态. 3. Fai ...

  3. Codeforces Round #622 (Div. 2) A. Fast Food Restaurant(全排列,DFS)

    Codeforces Round #622 (Div. 2) A. Fast Food Restaurant 题意: 你是餐馆老板,虽然只会做三道菜,上菜时还有个怪癖:一位客人至少上一道菜,且一种菜最 ...

  4. 【hdu 3579】Hello Kiki(数论--拓展欧几里德 求解同余方程组)

    题意:Kiki 有 X 个硬币,已知 N 组这样的信息:X%x=Ai , X/x=Mi (x未知).问满足这些条件的最小的硬币数,也就是最小的正整数 X. 解法:转化一下题意就是 拓展欧几里德求解同余 ...

  5. Selenium和ChromeDriver下载地址

    Selenium 官方所有版本: https://selenium-release.storage.googleapis.com/index.html 镜像所有版本:https://npm.taoba ...

  6. CentOS7系统时间和硬件时间不同步问题

    CentOS7系统中有两个时间:系统时间 和 硬件时间 我们常用命令 date 会输出系统时间,用 date 命令修改的也是系统时间 硬件时间是写入到 BIOS 中的时间,用 hwclock -r 命 ...

  7. python 表达式

    运算符 参考 https://www.runoob.com/python3/python3-basic-operators.html & https://www.runoob.com/pyth ...

  8. HDU 4628 Pieces(状压DP)题解

    题意:n个字母,每次可以删掉一组非连续回文,问你最少删几次 思路:把所有回文找出来,然后状压DP 代码: #include<set> #include<map> #includ ...

  9. docker部署LNMP架构

    环境要求: IP hostname 192.168.1.1 node1 项目规划: 容器网段:172.16.10.0/24 NGINX:172.16.10.10 MySQL:172.16.10.20 ...

  10. Laravel Homestead 安装 使用教程详解!

    1 Laravel Homestead 1 安装: 1 下载: http://www.vagrantup.com/downloads.html 1 配置: 1 1 测试: 1 1 ********** ...