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


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 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
Node学习记录之cluster模块
May 31 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
JavaScript 反射学习技巧
Oct 16 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日历程序
2006/12/06 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php无限极分类实现方法分析
2019/07/04 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
js代码实现轮播图
2020/05/04 Javascript
Python常用模块介绍
2014/11/21 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python数据可视化之画图
2019/01/15 Python
python实现邮件自动发送
2019/08/10 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
小区消防演习方案
2014/02/21 职场文书
演讲主持词
2014/03/18 职场文书
小学教师师德整改措施
2014/09/29 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2019秋季运动会口号
2019/06/25 职场文书
python中取整数的几种方法
2021/11/07 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android