微信小程序 picker-view 组件详解及简单实例


Posted in Javascript onJanuary 10, 2017

picker-view

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现效果图:

微信小程序 picker-view 组件详解及简单实例

嵌入页面的滚动选择器

属性名 类型 默认值 说明
value Number Array   数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String   设置选择器中间选中框的样式
bindchange EventHandle   当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

注意:其中只可放置<picker-view-column/>组件,其他节点不会显示。

picker-view-column

仅可放置于<picker-view />中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致

示例代码:

<view>
 <view>{{year}}年{{month}}月{{day}}日</view>
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
 <picker-view-column>
 <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
 </picker-view-column>
 </picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
 years.push(i)
}

for (let i = 1 ; i <= 12; i++) {
 months.push(i)
}

for (let i = 1 ; i <= 31; i++) {
 days.push(i)
}

Page({
 data: {
 years: years,
 year: date.getFullYear(),
 months: months,
 month: 2,
 days: days,
 day: 2,
 year: date.getFullYear(),
 value: [9999, 1, 1],
 },
 bindChange: function(e) {
 const val = e.detail.value
 this.setData({
 year: this.data.years[val[0]],
 month: this.data.months[val[1]],
 day: this.data.days[val[1]]
 })
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
js实现九宫格布局效果
May 28 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 #Javascript
微信小程序 label 组件详解及简单实例
Jan 10 #Javascript
实现一个简单的vue无限加载指令方法
Jan 10 #Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
css3 transform属性详解
2014/09/30 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
入党申请自荐书范文
2014/02/11 职场文书
满月酒主持词
2014/03/27 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
专家推荐信模板
2014/05/09 职场文书
高中课程设置方案
2014/05/28 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书