您现在的位置是:首页 > Javascript
当前栏目
【微信小程序】选择器组件picker
2023-03-31 10:39:35 时间
【微信小程序】选择器组件picker
picker组件的定义
picker组件是一种从底部向上弹起的滚动选择器。
picker组件的类型
在官方文档中,有提供五种类型的picker组件,如普通选择器,多列选择器,时间选择器,日期选择器和省市区选择器。
(猜测是,这些选择器时不同的且常用的某种类型,于是就产生固定的模版)。
而在写法上是这么写滴, <picker mode="multiSelector" 其他属性>
picker属性
picker组件需要记录当前选择,选择的可允许范围等等,而这些都是picker的一些相关的属性。
共同的属性
- picker为用户提供了多个选择,但用户要从中选中其中一个,value就这样记载了用户当前选到的值。(它会初始化选择器的值)
- picker为用户提供了多个选择,但有时为了构造选择器内容的方便,picker可能会提供超出服务方所能服务到的实际范围,于是在一些选择器中,可以用一些属性来限制用户的选择,使其锁定到实际范围内。
- 比如在时间选择器time中start表示一天内有效范围的开始,而end属性表示一天内有效时间范围内的结束。举个例子,拔牙建议是在早上来拔,如果写一个拔牙的预约系统,则可以用
end="12:00"
来限定结束时间。
- 比如在时间选择器time中start表示一天内有效范围的开始,而end属性表示一天内有效时间范围内的结束。举个例子,拔牙建议是在早上来拔,如果写一个拔牙的预约系统,则可以用
- picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么。于是就有了bindchange,代表说当用户选择了原选择不同的选择时,会触发的相应的函数。
- 因为微信小程序使用了数据绑定的技术,所以一般bindchange会修改在js文件里面对应的值。
- 数据绑定技术可以简单理解成一种从wxml文件获取到js文件中数据域中的某个数据的技术,如
{{data}}
时间选择器time
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;
}
参考
相关文章
- html简单示例
- 《Vue.js 设计与实现》读书笔记 - 第14章、内建组件和模块
- 《Vue.js 设计与实现》读书笔记 - 第13章、异步组件与函数式组件
- 《Vue.js 设计与实现》读书笔记 - 第12章、组件的实现原理
- 《Vue.js 设计与实现》读书笔记(1-3章)
- JavaScript 中如何拦截全局 Fetch API 的请求和响应?
- 解决 Vue 项目打包上线后客户端缓存的问题
- 用 JavaScript 刷 LeetCode 的正确姿势【进阶】
- Vue 可拖拽组件 Vue Smooth DnD 详解和应用演示
- 原生CSS、HTML 和 JavaScript 实现酷炫表单
- 在 Node.js 中使用 ES6 模块 import 和 export
- 一文了解服务端推送(含JS代码示例)
- 在 Vue 中使用 装饰器 Decorator
- App.vue 不触发 beforeRouteEnter
- 用JavaScript刷LeetCode的正确姿势
- 高兼容低成本,开箱即用的首页性能优化方式被我们找到了
- iOS前端编译器扩展——Clang
- iOS 16.2 Beta 2 更新,有几个变化!
- H5移动端调试攻略
- UI设计中九个常用的控件规范,这篇都梳理好了!