1、创建一个空白工程
2、index.wxml中写上picker布局:
<!--index.wxml-->
<view class="container"><picker mode="selector" range="{{array}}" bindchange="bindPickerChange"><view class="picker">当前选择:{{array[index]}}</view></picker>
</view>
3、index.wxss中添加wxml中引入的样式:
/**index.wxss**/
.container {display:flex;flex-direction: column;align-items: center;justify-content: center;height: 100rpx;
}
.picker {padding: 20rpx;border: 1rpx solid #ccc;border-radius: 5rpx;margin-top: 20rpx;
}
4、index.js中添加数据(数组array),和列表选择切换的响应函数:
// index.js
Page({data: {array: ['选项1','选项2','选项3','选项4'],index:0},bindPickerChange(e){console.log(e);this.setData({index:e.detail.value});}
})
5、编译,看效果,o了。
picker绑定对象数组遇到问题:
https://mp.csdn.net/mp_blog/creation/editor/145183341