小程序普通选择器的创建详解（我的成长之路

在如何创建小程序令自己满意的选择器上让自己从0开始学了很多知识；

根据官方文档的解析：

1.需要先创建一个数组用来承载你的选择器中option的内容（当然小程序中是没有select和option标签的，而是用picker标签进行代替【当然常规来讲选择器接收的值需要用text标签进行接收，如：<text>{{obj}}</text>】）

-------------------------------以下为后端代码------------------------------------------
selectArry：[{value:'1'name:'张三'},{value:'2'name:'张四'},{value:'3'name:'张五'},
]
selectArryIndex:0,//初始值下标 非常重要 下标从0开始 与设定的value无关-------------------------------以下为前端代码------------------------------------------<picker bindchange="bindPickerChange" name="transaction"  value="{{selectArryIndex}}" range="{{selectArry}}" range-key="name"><view class="picker"><text>{{selectArry[selectArryIndex].name}}</text></view></picker>//如果需要获取选择器当前选择的值进行判断的话 需要将name写在 picker标签中

2.创建选择器对应事件，才能进行相关的赋值工作

 //选择器修改bindPickerChange:function (e) {var that = this;that.setData({selectArryIndex:e.detail.value,})},

3.特别需要注意的一点mode为选择器类型（小程序中有很多种选择器哦）{

selector	普通选择器//默认选择器类型
multiSelector	多列选择器
time	时间选择器
date	日期选择器
region	省市区选择器

}

range	array/object array	[]	mode 为 selector 或 multiSelector 时，range 有效
range-key	string		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	number	0	表示选择了 range 中的第几个（下标从 0 开始）
bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

坑：当range为对象数组存在时，必须range-key指定当前页面显示规则，否则显示的内容均为objsele例如以上代码。

4.选择器判断

var PayMentType = e.detail.value.PayMentType;//获取选择器下标if (PayMentType == '0') {//判断wx.showToast({title: '请选择类型',icon:'none',duration:2000})return}

小程序普通选择器的创建详解（我的成长之路_No.2）相关推荐

微信小程token_微信小程序url与token设置详解
微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 isValid(); class wechatAPI { public function ...
小程序setdata优化_微信小程序 setData的使用方法详解
微信小程序 setData的使用方法详解微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元 ...
微信小程序一键置顶操作详解：
微信小程序一键置顶操作详解: 第一种方式:采用scroll-view滚动视图实现第二种方式,直接用view实现第一种方式:采用scroll-view滚动视图实现下面是代码简介: wxml文件代码 ...
【联机对战】微信小程序联机游戏开发流程详解
现有一个微信小程序叫中国象棋项目,棋盘类的单机游戏看着有缺少了什么,现在给补上了,加个联机对战的功能,增加了可玩性,对新手来说,实现联机游戏还是有难度的,那要怎么实现的呢,接下来给大家讲一下. 考虑到 ...
微信小程序01【目录结构详解、视图与渲染、事件、input、scroll-view】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
学习（微信小程序开发入门及案例详解 --李骏，边思编著）
第一章初识小程序 1.小程序不仅在商业上具备很大潜力,同时在技术上解决了一套代码多端运行和动态发版的两大痛点,用户在微信中扫一扫或搜一下即可打开具备原生体验的应用,这给开发者带来了很大的想象空间 2 ...
微信小程序实战须知2：详解数据API所需网络配置域名、Https、备案、SSL
网络通信小程序请求数据API时比较头疼,不能用想当然方式进行学习. 服务器域名.IP.HTTPS 域名1 域名(Domain Name):又称网域,是由一串用点分隔的名字组成的Internet上某一 ...
微信小程序数组网页调用实例详解：李贺作品集
额,我觉得这个东西应该叫做数组,有没有更专业的说法,我实在不知道. 惯例,先看效果,只实现数组存储,点击跳转网页,其他的都省略了. 如图可见,这个小程序有两个页面,1是首页index,2是跳转页det ...
《微信小程序》数据访问实例详解
如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚 ...

小程序普通选择器的创建详解（我的成长之路_No.2）

小程序普通选择器的创建详解（我的成长之路_No.2）相关推荐

最新文章

热门文章