目录picker组件的定义picker组件的类型picker属性共同的属性时间选择器time参考补充:遇到的问题总结picker组件的定义 picker组件是一种从底部向上弹起的滚动
picker组件是一种从底部向上弹起的滚动选择器。
在官方文档中,有提供五种类型的picker组件,如普通选择器,多列选择器,时间选择器,日期选择器和省市区选择器。
(猜测是,这些选择器时不同的且常用的某种类型,于是就产生固定的模版)。
而在写法上是这么写滴, <picker mode="multiSelector" 其他属性>
picker组件需要记录当前选择,选择的可允许范围等等,而这些都是picker的一些相关的属性。
wxml
<view class="section">
<h2>时间选择器</h2>
<picker mode="time" value = "{{Time}}" start="9:00" end="12:00" bindchange="bind_ChangeTime">
{{Time}}
</picker>
</view>
js文件
Page({
data:{
Time:"9:00"
},
bind_ChangeTime:function(e){
console.log(e.detail.value)
this.setData({
Time:e.detail.value
})
}
})
wxss
page{
background-color: navy;
}
.section{
text-align: center;
}
.section_title{
display:flexbox;
font-family:'Times New Roman', Times, serif;
color: aliceblue;
}
.section_picker{
background-color: white;
}
问题说在前面,同一个页面使用多个普通选择器遇到了问题,选择一个选项,其他选项也跟随着改变了。
代码如下:
//picker.wxml:
<view class="column_list" >
<text class="font15">选项一</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option1}}">
<view class="select_picker">
{{option1[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项二</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option2}}">
<view class="select_picker">
{{option2[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项三</text>
<picker class="inputText" bindchange="bindchange1" value="{{index}}" range="{{option3}}">
<view class="select_picker">
{{option3[index]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
//picker.js
Page({
data: {
index:0,//设置索引值默认为0
option1: ['1', '2', '3','4','5'],
option2: ['一', '二', '三','四','五'],
option3: ['①', '②', '③','④','⑤'],
},
bindchange1:function (e) {
// console.log('picker发送选择改变,携带值为', e.detail.value)
// 设置这个携带值赋值给索引值index
// 所以option1 ,option2 ,option3的索引值都是一样的
this.setData({
index: e.detail.value
})
}
})
因为默认索引值(也叫“下标”)都是index,绑定事件也只是改变了index。所以改变一个选项,其他选项都跟着改变了。
如何解决
首先想到的解决办法就是自定义不同的索引值index1、index2,、index3,分别绑定不同的时间bindchange1、bindchange2、bindchange3改变
其对应的索引值。
代码如下:
//picker.wxml:
<view class="column_list" >
<text class="font15">选项一</text>
<picker class="inputText" bindchange="bindchange1" value="{{index1}}" range="{{option1}}">
<view class="select_picker">
{{option1[index1]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项二</text>
<picker class="inputText" bindchange="bindchange2" value="{{index2}}" range="{{option2}}">
<view class="select_picker">
{{option2[index2]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
<view class="column_list" >
<text class="font15">选项三</text>
<picker class="inputText" bindchange="bindchange3" value="{{index3}}" range="{{option3}}">
<view class="select_picker">
{{option3[index3]}}
<image mode="aspectFit" class="select_arrow" src="../../images/select_arrow.png"></image>
</view>
</picker>
</view>
// picker.js
Page({
data: {
index1:0,
index2:0,
index3:0,
option1: ['1', '2', '3','4','5'],
option2: ['一', '二', '三','四','五'],
option3: ['①', '②', '③','④','⑤'],
},
bindchange1:function (e) {
this.setData({
index1: e.detail.value
})
},
bindchange2:function (e) {
this.setData({
index2: e.detail.value
})
},
bindchange3:function (e) {
this.setData({
index3: e.detail.value
})
}
})
这样一个页面多个picker的问题就解决了,但是现在又发现了一个新的问题:
为什么多个picker会出现相互影响的问题?比如在第一个选择器选择了3,剩下的选择器点进去默认都是从第3个开始?” 小程序开发工具中的确存在,看了社区的帖子,才知道这个是官方的bug,目前还没有修复。
到此这篇关于微信小程序选择器组件picker的文章就介绍到这了,更多相关小程序选择器picker内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 微信小程序选择器组件picker简单入门
本文链接: https://www.lsjlt.com/news/198218.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0