微信小程序 picker-view组件的默认显示值不改变

注意:这里只讨论只使用一个 picker-column 的情况,多个picker-column的情况并不相同。

情况:

  picker-view嵌套在一个弹层上,每次弹出都会选中默认显示值。赋值给 value 的值是 index 或者 [index],修改index的值(index是索引值),picker-column的默认显示值不会跟着改变。

问题所在:

  赋值给 value 的类型错了。官网的描述如下:

解决办法:

  赋值给 value 的形式改成 arr.index。

 

注意:这里只讨论只使用一个 picker-column 的情况,多个picker-column的情况并不相同。并且这个情况是在使用mpvue时发现的,在原生小程序中使用的情况还有待确认。

 

参考:

官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html

转载于:https://www.cnblogs.com/mengyouyouyou/p/11188876.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写Picker组件主要包括以下几个步骤: 1. 创建一个组件文件夹,命名为picker,并在该文件夹下创建两个文件:picker.wxml 和 picker.js。 2. 在 picker.js 中定义组件的属性和方法,包括: - properties: 定义传入组件的属性,如选项数组、默认选中等。 - data: 定义组件内部的数据,如选中的、是否显示等。 - methods: 定义组件的方法,如打开/关闭选择器、选择某一项等。 3. 在 picker.wxml 中编写组件的结构和样式,包括: - 使用<view>标签包裹整个组件,并设置样式; - 根据传入的选项数组,使用<scroll-view>标签渲染出所有选项,并设置样式; - 根据选中的,使用<view>标签显示当前选中的项,并设置样式; - 可以使用<cover-view>标签覆盖在滚动列表上面,实现点击遮罩关闭选择器的效果。 4. 在外部页面中引用该组件,并传入选项数组等属性。 下面是一个简单的手写Picker组件代码示例: picker.js ``` Component({ // 组件的属性列表 properties: { options: { type: Array, value: [] }, value: { type: String, value: '' } }, // 组件的初始数据 data: { showPicker: false, selectedIndex: 0, selectedValue: '' }, // 组件的方法列表 methods: { // 打开选择器 openPicker: function() { this.setData({ showPicker: true }); }, // 关闭选择器 closePicker: function() { this.setData({ showPicker: false }); }, // 选择某一项 selectItem: function(e) { var index = e.currentTarget.dataset.index; var value = this.data.options[index].value; this.setData({ selectedIndex: index, selectedValue: value }); this.triggerEvent('change', { value: value }); } } }) ``` picker.wxml ``` <view class="picker"> <view class="mask" wx:if="{{showPicker}}" bindtap="closePicker"></view> <view class="picker-container" wx:if="{{showPicker}}"> <scroll-view class="options" scroll-y="true"> <view class="option" wx:for="{{options}}" wx:key="{{index}}" data-index="{{index}}" bindtap="selectItem">{{item.label}}</view> </scroll-view> <view class="selected" bindtap="closePicker">{{selectedValue}}</view> </view> <view class="trigger" bindtap="openPicker">{{selectedValue}}</view> </view> ``` picker.wxss ``` .picker { position: relative; } .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } .picker-container { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; } .options { max-height: 200rpx; overflow-y: scroll; } .option { padding: 10rpx; } .selected { padding: 10rpx; font-size: 16rpx; text-align: center; border-top: 1rpx solid #eee; } .trigger { padding: 10rpx; font-size: 16rpx; text-align: center; border-top: 1rpx solid #eee; } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值