微信小程序picker-view设置默认显示某个值

本文介绍了一个使用picker-view实现的小程序重量选择组件。该组件通过picker-view-column定义了多个选项,并展示了如何设置默认选中项的下标。适用于小程序UI设计与开发。
<picker-view bindchange="bindintWeightChange"

indicator-style="height: 50px;"

style="width: 100%; height: 120px;"

value="{{value}}"

class="margin">

<picker-view-column>

<view wx:for="{{weightArray}}"

wx:key="{{index}}"

style="line-height: 50px">{{weightArray[index]}</view>

</picker-view-column>

</picker-view>

默认值设置下标为1

this.setData({
      value:[1]
    })

如果picker-view中有多组picker-view-column则

this.setData({
      value:[1,2,3]
    })

 

### 微信小程序 `picker-view` 组件使用教程 #### 一、基础介绍 `picker-view` 是微信小程序中的一个重要组件,用于创建上下拖动的选择器。该组件能够实现多列数据的选择功能,在用户交互过程中提供良好的体验[^2]。 #### 二、属性设置 为了正常使用 `picker-value` ,开发者需为其指定一系列必要的属性: - **value**: 设置当前选中项的索引数组,默认值为 `[0, 0, ...]` 。每一项代表对应列被选中的项目序号。 - **indicator-style / indicator-class**: 自定义中间选中态样式,通过内联样式或类名的方式应用自定义CSS规则来改变默认外观。 - **mask-style / mask-class**: 同样支持对遮罩层进行个性化设计。 ```xml <picker-view value="{{value}}" bindchange="bindPickerChange"> <!-- 列表内容 --> </picker-view> ``` #### 三、事件处理 当用户完成选择操作时会触发 `bindchange` 事件,此时可以通过监听函数获取最新的选项信息并更新页面状态。注意返回的数据结构是一个由各列表当前位置组成的整型数组。 ```javascript Page({ data: { value: [0, 0], // 初始化两列都指向第零个元素 }, bindPickerChange(e) { console.log('picker发送选择改变,携带为', e.detail.value); this.setData({ value: e.detail.value }); } }) ``` #### 四、日期选择特殊说明 对于涉及时间选取的应用场景而言,特别要注意 JavaScript 中 Date 对象的行为特性。具体来说,调用 `new Date().getMonth()` 方法所获得的结果是从0开始计数直到11月为止;因此实际编码时应当加以调整以匹配常规认知下的月份表示法[^1]。 ```javascript // 获取正确显示格式的时间字符串 function formatDate(date) { const month = date.getMonth() + 1; // 补偿偏移量 const day = date.getDate(); return `${date.getFullYear()}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')}`; } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

0x12

下载和转换脚本可私信我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值