這篇文章主要為大家詳細介紹了微信小程式下拉框組件的使用方法，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。 【推薦教學：小程式開發教學】
適用場景
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 bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index" value='{{index}}' range="{{gender}}">
<view class="label-right">
{{gender[index]}}
</view>
</picker>以上都需要在.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;
以上是微信小程式下拉框組件使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
