本文實例為大家分享了微信小程序下拉框組件的使用方法，供大家參考，具體內容如下

適用場景

1、省市三級聯動

2、出生日期選擇

3、性別選擇

4、一般性的下拉選擇等

一、省市三級聯動使用

注意mode = region，以及value = “一維數組”

//.wxml

data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">

當前選擇：{{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;

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的微信小程序下拉框插件_微信小程序下拉框组件使用方法详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。