如何在微信小程序中使用下拉框组件

这篇文章将为大家详细讲解有关如何在微信小程序中使用下拉框组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司是一家集网站建设,云霄企业网站建设,云霄品牌网站建设,网站定制,云霄网站建设报价,网络营销,网络优化,云霄网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

适用场景

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

一、省市三级联动使用

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

//.wxml


   当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}

二、出生日期选择

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

  
  {{date}}
  

三、性别选择

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

  
    {{gender[index]}}
  

以上都需要在.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;

关于如何在微信小程序中使用下拉框组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。