微信小程序选择器 picker ;demo大全附效果图

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

正文：

选择器示例demo：

1.普通选择器 2.多列选择器 3.时间选择器 4.日期选择器 5.省市区选择器

源码：

wxml

<view class="container"><!--选择器--><view class="section"><view class="section__title">普通选择器：（普通数组）</view><picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"><view class="picker">当前选择：{{array[index]}}</view></picker></view><!--选择器--><view class="section"><view class="section__title">普通选择器2：（普通json格式数组）</view><picker bindchange="bindPickerChange2" value="{{objectIndex}}" range="{{objectArray}}" range-key="name"><view class="picker">当前选择：{{objectArray[objectIndex].name}}</view></picker></view><!--选择器--><view class="section"><view class="section__title">多列选择器：</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}</view></picker></view><!--选择器--><view class="section"><view class="section__title">时间选择器：</view><picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"><view class="picker">当前选择: {{time}}</view></picker></view><!--选择器--><view class="section"><view class="section__title">日期选择器：</view><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"><view class="picker">当前选择: {{date}}</view></picker></view><!--选择器--><view class="section"><view class="section__title">省市区选择器：</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view></picker></view><!--end-->
</view>

Page({data: {//普通选择器：（普通数组）array: ['选项1', '选项2', '选项3', '选项4'],index: 0,//默认显示位置//普通选择器2：（普通json格式数组）objectArray: [{id: 0,name: '中国'},{id: 1,name: '美国'},{id: 2,name: '德国'},{id: 3,name: '法国'}],objectIndex: 0,//默认显示位置//多列选择器：multiArray: [['音频', '视频'], ['mp3', '评书']],//二维数组，长度是多少是几列multiIndex: [0, 0],//时间选择器：time: '12:01',//日期选择器：date: '2016-09-01',//省市区选择器：region: ['请选择', '请选择', '请选择'],customItem: '请选择'//为每一列的顶部添加一个自定义的项},//普通选择器：bindPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},//普通选择器2：bindPickerChange2: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({objectIndex: e.detail.value})},//多列选择器：bindMultiPickerChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({multiIndex: e.detail.value})},bindMultiPickerColumnChange: function (e) {console.log('修改的列为', e.detail.column, '，值为', e.detail.value);if (e.detail.column==0){//第1列if (e.detail.value == 0) {//音频this.setData({multiArray: [['音频', '视频'], ['mp3', '评书']]})};if (e.detail.value == 1) {//视频this.setData({multiArray: [['音频', '视频'], ['电影', '电视剧']]})};};},//时间选择器：bindTimeChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({time: e.detail.value})},//日期选择器：bindDateChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({date: e.detail.value})},//省市区选择器：bindRegionChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})}
})

css

/*选择器  */
.section__title{margin-bottom: 20rpx;
}
.section{margin: 50rpx 0;font-size: 30rpx;
}

效果图：

获取多项选择器的值：

<!--选择器--><view class="section"><view class="section__title">多列选择器：</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}</view></picker></view>Page({data:{//多列选择器：multiArray: [['音频', '视频'], ['mp3', '评书']],//二维数组，长度是多少是几列multiIndex: [0, 0],},//多列选择器：bindMultiPickerChange: function (e) {this.setData({multiIndex: e.detail.value})console.log('1为：', this.data.multiArray[0][e.detail.value[0]])console.log('2为：', this.data.multiArray[1][e.detail.value[1]])},
})

微信小程序选择器 picker ;demo大全附效果图相关推荐

微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行微信小程序实例源码大全微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
微信小程序源码案例大全
微信小程序demo:足球,赛事分析小程序简易导航小程序demo:办公审批小程序Demo:电魔方小程序demo:借阅伴侣微信小程序demo:投票微信小程序demo:健康生活小程序demo: ...
【干货】微信小程序实例源码大全
微信小程序游戏类demo:识色:从相似颜色中挑选不同的一个源码链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1105 ...
微信小程序github源码大全下载
微信小程序实例源码大全下载微信小应用示例代码(phodal/weapp-quick) 源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo ...
微信小程序、多类型资源大全，DNF,LOL等
以上内容非本人整理,此处仅做收藏 UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 ...
视频教程-微信小程序开发【初级篇 / 附案例】-微信开发
微信小程序开发[初级篇 / 附案例] 北风网讲师!瓢城Web俱乐部创始人,教学总监! 李炎恢 ¥129.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程, ...
(转)微信小程序实例源码大全
https://www.cnblogs.com/tuyile006/p/6268961.html 微信小程序实例源码大全下载微信小应用示例代码(phodal/weapp-quick) 源码链接:ht ...
微信小程序官网DEMO模板
简介: 微信小程序官方原版DEMO模板,小程序开发参考必备人手一份,分享给大家. 网盘下载地址: http://kekewangLuo.cc/xtsm1j0hn5X0 图片:
html如何写微信弹窗,微信小程序自定义弹窗实现过程(附代码)_而已_前端开发者...
这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...

微信小程序选择器 picker ;demo大全附效果图

承接微信小程序开发。扫码加微信。

正文：

微信小程序选择器 picker ;demo大全附效果图相关推荐

最新文章

热门文章

微信小程序 选择器 picker ;demo大全附效果图

承接微信小程序开发。扫码加微信。

正文：

微信小程序 选择器 picker ;demo大全附效果图相关推荐

最新文章

热门文章

微信小程序选择器 picker ;demo大全附效果图

微信小程序选择器 picker ;demo大全附效果图相关推荐