微信小程序之滚动选择器（picker）

最新推荐文章于 2025-07-19 18:14:41 发布

原创最新推荐文章于 2025-07-19 18:14:41 发布 · 3.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#picker #微信小程序 #滚动选择

微信小程序专栏收录该内容

23 篇文章

订阅专栏

本文介绍了微信小程序中滚动选择器（picker）的使用，提供了两个实例，包括数据绑定和显示，帮助开发者解决大多数滚动选择场景的问题，强调了具体问题需具体分析。

滚动选择采用的是picker组件，具体使用方法如下：

实例1：

Page({

js:

data:{

pickerList:[

{ id:1 , name: picker01},

{ id:2 ,name: picker02},

{ id:3 ,name: picker03},

{ id:4 ,name: picker04},

pickerListIdx:0,

}

bindPicker: function (e) {

    this.setData({

      pickerListIdx: e.detail.value

    });
  }, 

})

.wxml

       <picker bindchange="bindPickerSale" value="{{pickerListIdx}}" range="{{pickerList}}" >

           <view class="picker">

            picker选择：
 
           </view>

           <view class="picker">{{pickerList[pickerListIdx]}}

           </view>

        </picker>

.wxss

.picker {

  float: right;

  text-align: right;

  width: 35%;

}

实例2：

Page({

js:

data:{

pickerList:[

    pickerList: [

      { name: "1", value: ' picker01' },

      { name: "2", value: ' picker02' },

      { name: "3", value: ' picker03' },

      { name: "4", value: ' picker04' },

    ],

    pickerListIdx: 0,

}

bindPicker: function (e) {

    this.setData({

      pickerListIdx: e.detail.value

    });
  }, 

})

.wxml

<pickerbindchange="bindPickerSale"value="{{pickerListIdx}}"range="{{pickerList}}" range-key="value" >

           <view class="picker">

            picker选择：
 
           </view>

           <view class="picker">{{pickerList[pickerListIdx].value}}

           </view>

        </picker>

.wxss

.picker {

  float: right;

  text-align: right;

  width: 35%;

}

楼上两种方法可解决大多数滚动选择问题，具体问题具体分析