微信小程序下拉框组件使用方法详解


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下

适用场景

1、省市三级联动
2、出生日期选择
3、性别选择
4、一般性的下拉选择等

一、省市三级联动使用

注意mode = region,以及value = “一维数组”

//.wxml
<picker mode="region" bindchange="bindViewEvent" data-model="component" 
data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
   当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
</view>
</picker>

二、出生日期选择

注意mode = date,以及value = “日期字符串”

<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindViewEvent" data-model="component" data-method="bindSelect" date-mode="date" data-name="date">
  <view class="picker">
  {{date}}
  </view>
</picker>

三、性别选择

注意,不填mode默认为selector,range=”一维数组”,value=”当前选中索引”

<picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index" value='{{index}}' range="{{gender}}">
  <view class="label-right">
    {{gender[index]}}
  </view>
</picker>

以上都需要在.js里设置相关初始变量!

//.js
 var app = getApp();

 data: {

  region:['河北','沧州','河间'],
  date:'2010-10-10',
  gender:['男','女'],
  index:0
 },

 bindViewEvent:function(e){

  app.process(this,e);  
 }

相关js类

//component.js
const select = require('../component/select.js');
const upload = require('../component/upload.js');

class component{

 constructor(com, that) {

  this.com = com;
  this.that = that;
 }

 //绑定下拉框选择事件
 bindSelect(data){

  let self = this;

  let mode = data.currentTarget.dataset.mode;

  let name = data.currentTarget.dataset.name;

  let picker = new select({
   that: self.that,
   mode: mode,
   name: name
  });

  picker.change(data.detail.value);
 }

 //点击事件,传递参数为e.currentTarget.dataset
 bindImageChoose(data){

  //图片上传
  this.uploader = new upload({
   that: that,
   name: data.name,
   mode: data.mode,
   count: data.count || 9
  });

  this.uploader.choose();
 }

 bindImageDel(data){

  //图片上传
  this.uploader = new upload({
   that: that,
   name: data.name,
   mode: data.mode,
   count: data.count || 9
  });

  this.uploader.del(data.index);
 }

}
module.exports = component;


//select.js
/*
* 下拉框对象
*/
class picker{

 constructor(data){

  this.that = data.that;
  this.name = data.name || 'date';
  this.mode = data.mode || 'selector';
 }

 show(name,data){

  let view = {};
  view[name] = data;

  this.that.setData(view);
 }

 change(data){

  let self = this;

  self.show(self.name, data);
 }
}
module.exports = picker;

//upload.js
class picUploader {

 constructor(data) {

  this.that = data.that;
  this.name = data.name;
  this.mode = data.mode || 1;
  this.count = this.model == 1 ? 1 : data.count || 9;
 }

 /*
 * 选择图片
 */
 choose() {

  const self = this;

  wx.chooseImage({
   count: (self.count - self.that.data[self.name].length),
   sizeType: ['original', 'compressed'],
   sourceType: ['album', 'camera'],
   success: function (res) {
    var tempFilePaths = res.tempFilePaths;

    self.append(tempFilePaths);
   }
  })
 }

 /*
 * 显示图片
 */

 show() {

  let self = this;
  let view = {};
  view[self.name] = self.that.data[self.name];

  self.that.setData(view);

 }

 /*
 * 追加图片
 */
 append(data) {

  const self = this;
  for (let i = 0; i < data.length; i++) {

   self.that.data[self.name].push(data[i]);
  }

  self.show();
 }

 /*
 * 删除图片
 */
 del(index) {

  let self = this;

  self.that.data[self.name].splice(index, 1);

  self.show();
 }


}
module.exports = picUploader;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
javascript实用方法总结
Feb 06 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
使用jquery如何获取时间
Oct 13 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
微信小程序实现日历效果
Dec 28 #Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 #Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 #Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 #Javascript
微信小程序时间控件picker view使用详解
Dec 28 #Javascript
You might like
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
PHP中的self关键字详解
2019/06/23 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JS小游戏之极速快跑源码详解
2014/09/25 Javascript
javascript手工制作悬浮菜单
2015/02/12 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
python基于socket实现网络广播的方法
2015/04/29 Python
python字典基本操作实例分析
2015/07/11 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python实现证件照换底功能
2019/08/20 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
开朗女孩的自我评价
2014/02/10 职场文书
个人授权委托书
2014/04/03 职场文书
新春寄语大全
2014/04/09 职场文书
酒店厨房管理制度
2015/08/06 职场文书
银行服务理念口号
2015/12/25 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
基于python实现银行管理系统
2021/04/20 Python
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android