微信小程序选择器组件picker简单入门

更新时间：2023年03月02日 09:37:37 作者：BeautifulWater

微信小程序picker表单选择器的使用,根据官方介绍的有点不清楚,下面这篇文章主要给大家介绍了关于微信小程序选择器组件picker的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

picker组件的定义

picker组件是一种从底部向上弹起的滚动选择器。

picker组件的类型

在官方文档中，有提供五种类型的picker组件，如普通选择器，多列选择器，时间选择器，日期选择器和省市区选择器。

（猜测是，这些选择器时不同的且常用的某种类型，于是就产生固定的模版）。

而在写法上是这么写滴， <picker mode="multiSelector" 其他属性>

picker属性

picker组件需要记录当前选择，选择的可允许范围等等，而这些都是picker的一些相关的属性。

共同的属性

picker为用户提供了多个选择，但用户要从中选中其中一个，value就这样记载了用户当前选到的值。（它会初始化选择器的值）
picker为用户提供了多个选择，但有时为了构造选择器内容的方便，picker可能会提供超出服务方所能服务到的实际范围，于是在一些选择器中，可以用一些属性来限制用户的选择，使其锁定到实际范围内。
- 比如在时间选择器time中start表示一天内有效范围的开始，而end属性表示一天内有效时间范围内的结束。举个例子，拔牙建议是在早上来拔，如果写一个拔牙的预约系统，则可以用end="12:00"来限定结束时间。
picker为用户提供了多个选择，用户选了其中一种，但仍是需要有东西去告诉后台用户选了什么。于是就有了bindchange，代表说当用户选择了原选择不同的选择时，会触发的相应的函数。
- 因为微信小程序使用了数据绑定的技术，所以一般bindchange会修改在js文件里面对应的值。
- 数据绑定技术可以简单理解成一种从wxml文件获取到js文件中数据域中的某个数据的技术，如{{data}}

时间选择器time

wxml

<view class="section">
    <h2>时间选择器</h2>
    <picker mode="time" value = "{{Time}}" start="9:00" end="12:00" bindchange="bind_ChangeTime">
         {{Time}}
    </picker>
</view>

js文件

Page({
  data:{
    Time:"9:00"
  },
  bind_ChangeTime:function(e){
      console.log(e.detail.value)
      this.setData({
        Time:e.detail.value
      })
  }
})

wxss

page{
  background-color: navy;
}
.section{
  text-align: center;
}
.section_title{
  display:flexbox;
  font-family:'Times New Roman', Times, serif;
  color: aliceblue;
}
.section_picker{
background-color: white;
}

参考

微信小程序官方文档

补充：遇到的问题

问题说在前面，同一个页面使用多个普通选择器遇到了问题，选择一个选项，其他选项也跟随着改变了。

代码如下：

//picker.wxml：   
<view class="column_list" >
        <text class="font15">选项一</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option1}}">
            <view class="select_picker">
                {{option1[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">选项二</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option2}}">
            <view class="select_picker">
                {{option2[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">选项三</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option3}}">
            <view class="select_picker">
                {{option3[index]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

//picker.js
    Page({
    data: {
        index:0,//设置索引值默认为0
        option1: ['1', '2', '3','4','5'],
        option2: ['一', '二', '三','四','五'],
        option3: ['①', '②', '③','④','⑤'],
    },
    bindchange1:function (e) {
       // console.log('picker发送选择改变，携带值为', e.detail.value)
       // 设置这个携带值赋值给索引值index
       // 所以option1 ,option2 ,option3的索引值都是一样的
        this.setData({
            index: e.detail.value
        })
    }
})

因为默认索引值（也叫“下标”）都是index，绑定事件也只是改变了index。所以改变一个选项，其他选项都跟着改变了。

如何解决

首先想到的解决办法就是自定义不同的索引值index1、index2,、index3，分别绑定不同的时间bindchange1、bindchange2、bindchange3改变

其对应的索引值。

代码如下：

//picker.wxml： 
 <view class="column_list" >
        <text class="font15">选项一</text>
        <picker class="inputText" bindchange="bindchange1" value="{{index1}}" range="{{option1}}">
            <view class="select_picker">
                {{option1[index1]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">选项二</text>
        <picker class="inputText" bindchange="bindchange2" value="{{index2}}" range="{{option2}}">
            <view class="select_picker">
                {{option2[index2]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>
    <view class="column_list" >
        <text class="font15">选项三</text>
        <picker class="inputText" bindchange="bindchange3" value="{{index3}}" range="{{option3}}">
            <view class="select_picker">
                {{option3[index3]}}
                <image  mode="aspectFit"  class="select_arrow" src="../../images/select_arrow.png"></image>
            </view>
        </picker>
    </view>

    // picker.js
    Page({
    data: {
        index1:0,
        index2:0,
        index3:0,
        option1: ['1', '2', '3','4','5'],
        option2: ['一', '二', '三','四','五'],
        option3: ['①', '②', '③','④','⑤'],
    },
    bindchange1:function (e) {
        this.setData({
            index1: e.detail.value
        })
    },
    bindchange2:function (e) {
        this.setData({
            index2: e.detail.value
        })
    },
    bindchange3:function (e) {
        this.setData({
            index3: e.detail.value
        })
    }
})

这样一个页面多个picker的问题就解决了，但是现在又发现了一个新的问题：

为什么多个picker会出现相互影响的问题？比如在第一个选择器选择了3，剩下的选择器点进去默认都是从第3个开始？” 小程序开发工具中的确存在，看了社区的帖子，才知道这个是官方的bug，目前还没有修复。

总结

到此这篇关于微信小程序选择器组件picker的文章就介绍到这了,更多相关小程序选择器picker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

自适应方案postcss-pxtorem使用步骤
这篇文章主要介绍了如何使用postcss-pxtorem插件将px单位转换为rem单位,包括安装插件、创建配置文件和引入脚本的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-11-11
深入浅析es6-module的语法
ES6引入了模块化概念,提供命名导出、默认导出、导出重命名和导出合并功能,支持动态导入,模块默认严格模式,避免全局污染,支持循环依赖,代码更可维护,本文介绍es6-module的语法知识,感兴趣的朋友一起看看吧
2025-02-02
浅谈JavaScript工具链不完全指南
经过这么多年的发展，JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限，在 Web 前端、移动端、服务端甚至物联网设备上都大展身手，到处都有它的身影。
2021-05-05
JavaScript代码复用模式实例分析
任何编程都提出代码复用，否则话每次开发一个新程序或者写一个新功能都要全新编写的话,效率太差了,接下来我们将针对代码复用来进行讨论，需要的朋友可以参考下
2012-12-12
JS三级可折叠菜单实现方法
这篇文章主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下
2016-02-02
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
这篇文章主要介绍了BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
javascript学习基础笔记之DOM对象操作
javascript是一种基于对象和世界驱动，并且安全性较强的脚本语言。一个完整的javascript实现包括核心（ECMAScript），文档对象模型（DOM）和浏览器对象模型（BOM）
2011-11-11
移动端手指放大缩小插件与js源码
这篇文章主要介绍了移动端手指放大缩小插件与js源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript语言精粹经典实例(整理篇)
本文是小编日常读书笔记整理有关javascript知识，都是js精粹非常不错，具有参考借鉴价值，特此分享到脚本之家平台供大家参考
2016-06-06
手机端页面rem宽度自适应脚本
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文章讲述模糊的地方。重点给大家介绍下rem.有需要的小伙伴可以参考下。
2015-05-05