微信小程序 —— picker 组件，下拉列表组件_微信小程序picker下拉选择

作者：2023面试高手 | 2024-04-29 14:25:17

踩

微信小程序picker下拉选择

本文主要内容

picker 组件的使用
自定义组件的创建和使用
微信小程序的语法，官方 wxss 库的使用

picker 组件

从底部弹起的滚动选择器
doc: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

通用属性：

属性	类型	默认值	必填	说明
mode	string	selector	否	选择器类型
disabled	boolean	false	否	是否禁用
bindcancel	eventhandle		否	取消选择时触发

此处省略了 header-text, 仅安卓可用
除了通用属性，对于不同的 mode, picker 拥有不同的属性
此处只列举 mode = selector 时，selector 是默认属性，不需要设置。

属性	类型	默认值	说明
range	array/object array	[]
range-key	string		range 是一个 object array 时，通过 range-key 来指定 object 中 key 的值作为选择器显示内容
value	number	0	表示选择了 range 中的第几个（下标从 0 开始)
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

程序如下
index.js

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为--------', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11

index.wxml

    <view class="section__title">普通选择器</view>
    <!-- value 表示选择了 range 中的第几个（下标从 0 开始）-->
    <!-- mode 默认为 selector， 可以不写 -->
    <picker  mode="selector"   bindchange="bindPickerChange" value="{
  {index}}" range="{
  {array}}">
      <view class="picker">
        当前选择：{
  {array[index]}}
      </view>
    </picker>
1
2
3
4
5
6
7
8
9
10
11

如果用样式
index.wxml

<view class="page">
    <view class="section__title">普通选择器</view>
    <!-- value 表示选择了 range 中的第几个（下标从 0 开始）-->
    <!-- mode 默认为 selector， 可以不写 -->
    <picker  mode="selector"   bindchange="bindPickerChange" value="{
  {index}}" range="{
  {array}}">
      <view class="picker">
        当前选择：{
  {array[index]}}
      </view>
    </picker>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

index.wxss

@import "../../lib/weui.wxss";
.picker{
    padding: 13px;
    background-color: #459aa570;
}
.page {
  /* 顶部留白空余的高度 */
    padding-top: 30px;
}
1
2
3
4
5
6
7
8
9

UI 库

上面的 weui.wxss 是微信官方提供的 UI 库
用这种格式加到项目里
@import “…/…/lib/weui.wxss”;

自制组件

6.2.3 自定义组件
小程序开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
新建 comopents 目录，与 page 同级。
./components
└── select
├── select.js
├── select.json
├── select.wxml
└── select.wxss
在使用这个组件的页面，如 index.js 里加上
{
“usingComponents”: {
“select”:“/components/select/select”
}
}

下拉列表组件程序

refer to:
https://blog.csdn.net/l_yilan/article/details/120019884
https://blog.csdn.net/boveysmith/article/details/109544238
因为下拉列表需要多次使用，为了方便使用，需要定义为组件

实现原理

原理就是通过显示或隐藏列表来实现下拉列表
隐藏用 wx:if "{ {show}}"来判断，或通过设置 height 为 0 来实现或者

问题todo

会有组件覆盖，能看到下面的组件
json

{
   
  "component": true,
  "styleIsolation": "apply-shared",
  "usingComponents": {
   1
2
3
4
5

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

微信小程序 —— picker 组件， 下拉列表组件_微信小程序picker下拉选择