在微信小程序中,Picker 组件是用来实现选择器功能的,允许用户在多个选项中进行选择。它可以呈现多种形式,如单列选择、多列联动选择等。以下是一个简单的单列 Picker 组件的基本使用示例:
1、效果图:
点击后出现选择列表:
点击确定,选择成功。
2、源码:
wxml文件:
<view class="form-item">
<text class="form-item-label">选择转手的二手书类型</text>
<picker mode="selector" range="{{bookType}}" value="{{bookTypeIndex}}" bindchange="onPickerChange3">
<view class="picker">当前选择:{{bookType[bookTypeIndex]}}</view>
</picker>
</view>
js文件:
Page({
/**
* 页面的初始数据
*/
data: {
// 这里是picker可选项的内容
bookType: ['公共课教材', '专业课教材', '笔记与讲义', "考研数学", '考研英语', '考研政治', '考研专业课', "英语四六级资料"],
selectedIndex: 0, // 初始选中的索引位置
},
onPickerChange3: function(e) {
const newIndex = e.detail.value;
this.setData({
bookTypeIndex: newIndex,
goods: {
...this.data.goods,
sort: this.data.bookType[newIndex]
}
});
console.log(this.data.goods.sort);
},
})