您的位置：首页 > 移动开发 > 微信开发

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

2019-03-28 10:59 1076 查看

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

适用场景

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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航