ToB企服应用市场:ToB评测及商务社交产业平台

标题: 学习微信小步伐的下拉列表控件-picker [打印本页]

---

作者: tsx81428    时间: 2025-1-17 09:18
标题: 学习微信小步伐的下拉列表控件-picker
1、创建一个空白工程
2、index.wxml中写上picker布局：

1. <!--index.wxml-->
2. <view class="container">
3.   <picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
4.     <view class="picker">
5.       当前选择：{{array[index]}}
6.     </view>
7.   </picker>
8. </view>

复制代码

3、index.wxss中添加wxml中引入的样式：

1. /**index.wxss**/
2. .container {
3.   display:flex;
4.   flex-direction: column;
5.   align-items: center;
6.   justify-content: center;
7.   height: 100rpx;
8. }
9. .picker {
10.   padding: 20rpx;
11.   border: 1rpx solid #ccc;
12.   border-radius: 5rpx;
13.   margin-top: 20rpx;
14. }

复制代码

4、index.js中添加数据（数组array），和列表选择切换的响应函数：

1. // index.js
2. Page({
3.   data: {
4.     array: ['选项1','选项2','选项3','选项4'],
5.     index:0
6.   },
7.   bindPickerChange(e){
8.     console.log(e);
9.     this.setData({
10.       index:e.detail.value
11.     });
12.   }
13. })

复制代码

5、编译，看效果，o了。

picker绑定对象数组遇到标题：
https://mp.csdn.net/mp_blog/creation/editor/145183341

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4