微信小程序在同一页面出现多个普通选择器怎么区分,有demo代码

24 篇文章 0 订阅
21 篇文章 0 订阅

看到很多人在问这个问题,我来写一下吧

wxml:

<view class="container log-list">
<!--身份选择1  -->
    <view class="section identity-select">
      <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        <view class="picker">
          {{array[index]}}日报
        </view>
      </picker>
    </view>
<!--身份选择2  -->
<view class="section identity-select">
        <picker bindchange="bindPickerChangef" value="{{index1}}" range="{{array}}">
          <view class="picker">
            {{array[index1]}}
          </view>
        </picker>
      </view>
</view>


js:

const util = require('../../utils/util.js')

Page({
  data: {
    primarySize: 'default',
    array: ['夏彤','陈学华','甘广','黄龙流','李昌略','董俊辉','罗景盛','钟敏君','林锐','麦健发','曹兵'],
    objectArray: [
      {
        id: 0,
        name: '夏彤'
      },
      {
        id: 1,
        name: '陈学华'
      },
      {
        id: 2,
        name: '甘广'
      },
      {
        id: 3,
        name: '黄龙流'
      },
      {
        id: 4,
        name: '李昌略'
      },
      {
        id: 5,
        name: '董俊辉 '
      },
      {
        id: 6,
        name: '罗景盛'
      }
      ,
      {
        id: 7,
        name: '钟敏君'
      }
      ,
      {
        id: 8,
        name: '林锐'
      }
      ,
      {
        id: 9,
        name: '麦健发'
      }
      ,
      {
        id: 10,
        name: '曹兵'
      }
    ],
    index: 0,
    index1: 0,
},
//身份选择1
bindPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', this.data.array[e.detail.value])
    this.setData({
      index: e.detail.value
    })
  },
bindPickerChangef: function (e) {
    console.log('picker发送选择改变,携带值为', this.data.array[e.detail.value])
    this.setData({
      index1: e.detail.value
    })
  }
}

上面要改的地方,也就是多个普通选择器之间的差异就是黑色背景白色的那几个参数,即事件名字,下标:效果如下图


喜欢这个回答可以关注微信公众号,前端周末,分享更多前端,慕课资料。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值