微信小程序开发之Picker组件

       在微信小程序中，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);
    },
})