tsx81428 发表于 2025-1-17 09:18:59

学习微信小步伐的下拉列表控件-picker

1、创建一个空白工程
2、index.wxml中写上picker布局:
<!--index.wxml-->
<view class="container">
<picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
    <view class="picker">
      当前选择:{{array}}
    </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了。
https://i-blog.csdnimg.cn/direct/84655a084fa44d0483675d719576ce4c.png
https://i-blog.csdnimg.cn/direct/bfa2fed3b73c4f2398956df5c0bcc639.png
https://i-blog.csdnimg.cn/direct/658b1726675240eea8a687906d9756b9.png
picker绑定对象数组遇到标题:
https://mp.csdn.net/mp_blog/creation/editor/145183341

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 学习微信小步伐的下拉列表控件-picker