【微信小程序】picker 滚动选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序】picker 滚动选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

选择性别

参考：picker | 微信开放文档

微信小程序picker,微信小程序,微信小程序,小程序

<view style="display: flex; align-items: center;">
  选择性别：
  <picker header-text="选择性别" bindchange="bindChange" value="{{sex}}" range-key="sex_name" range="{{sex_list}}">
    <view class="picker">
      {{sex}} <van-icon name="arrow-down" />
    </view>
  </picker>
</view>

data:{
    sex:'',
    sex_list:[
      {
        id: 5,
        sex_name: "男"
      },{
        id: 10,
        sex_name: "女"
      }
    ],
}

bindChange(e) {
  const res = this.data.sex_list[e.detail.value]
  this.setData({
    sex: res.sex_name
  })
},

picker修改

刚开始使用的是vantweap的picker，但是居然有蒙版还无法自定义样式。

Picker 选择器 - Vant Weapp

微信小程序picker,微信小程序,微信小程序,小程序

<van-picker 
    show-toolbar
    columns="{{ list }}" 
    bind:cancel="onClose" 
    bind:confirm="onChange"  
    custom-class="picker" 
    active-class="active" 
    column-class="column"
/>

.van-picker__toolbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 9;
  background-color: transparent!important;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.picker {
  height: 55vh;
  width: 100vw;
  background: transparent!important;
  margin-top: 180rpx;
}
.active {
  background: red!important;
}
.column {
  background-color: yellow;
}

list: [
  {
    text: '1-1'
  },
  {
    text: '2-1'
  }
],

onChange(e) {
  this.setData({
      id: e.detail.value.id
  })
},

苦恼ing。最后看到原生组件有自定义蒙版样式，豁然开朗~

微信小程序picker,微信小程序,微信小程序,小程序

<view style="height: 55vh; position: relative;">

  <picker-view 
    indicator-style="height: 50px; background: rgba(255,255,255,0.4);position: relative; " 
    style="width: 100%; height: 270px;background: rgab(255,255,255,0.1);color: #333;" 
    mask-style="background: transparent" 
    value="{{active}}" 
    bindchange="onChange"
>
    <picker-view-column>
      <view wx:for="{{list}}" 
          wx:key="index" 
          style="line-height: 50px; text-align: left; padding: 0 20rpx; white-space:nowrap;text-overflow:ellipsis;overflow:hidden">{{item.text}}</view>
    </picker-view-column>

  </picker-view>

  <view  class="btn">
    <view class="cancel" bind:tap="onClose">取消</view>
    <view class="sure" bind:tap="onConfirm">确定</view>
  </view>

</view>

激活项的蒙版在文字上方

微信小程序picker,微信小程序,微信小程序,小程序

利用relative的层级z-index：-1展示在文字下方。文章来源地址https://www.toymoban.com/news/detail-604062.html

indicator-style="position: relative; z-index: -1;"

onChange(e) {
  let idx = e.detail.value[0] 
  this.setData({
    idx
  })
},
onConfirm() {
  this.setData({
    id: this.data.list[this.data.idx].id,
  })
},

到了这里，关于【微信小程序】picker 滚动选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！