微客导航 » 文章资讯 » 微信小程序下拉框组件使用方法详解

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

2023-09-02 04:06:05 292

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

适用场景

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
varapp=getApp();

data:{

region:['河北','沧州','河间'],
date:'2010-10-10',
gender:['男','女'],
index:0
},

bindViewEvent:function(e){

app.process(this,e);
}

相关js类

//component.js
constselect=require('../component/select.js');
constupload=require('../component/upload.js');

classcomponent{

constructor(com,that){

this.com=com;
this.that=that;
}

//绑定下拉框选择事件
bindSelect(data){

letself=this;

letmode=data.currentTarget.dataset.mode;

letname=data.currentTarget.dataset.name;

letpicker=newselect({
that:self.that,
mode:mode,
name:name
});

picker.change(data.detail.value);
}

//点击事件，传递参数为e.currentTarget.dataset
bindImageChoose(data){

//图片上传
this.uploader=newupload({
that:that,
name:data.name,
mode:data.mode,
count:data.count||9
});

this.uploader.choose();
}

bindImageDel(data){

//图片上传
this.uploader=newupload({
that:that,
name:data.name,
mode:data.mode,
count:data.count||9
});

this.uploader.del(data.index);
}

}
module.exports=component;


//select.js
/*
*下拉框对象
*/
classpicker{

constructor(data){

this.that=data.that;
this.name=data.name||'date';
this.mode=data.mode||'selector';
}

show(name,data){

letview={};
view[name]=data;

this.that.setData(view);
}

change(data){

letself=this;

self.show(self.name,data);
}
}
module.exports=picker;

//upload.js
classpicUploader{

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(){

constself=this;

wx.chooseImage({
count:(self.count-self.that.data[self.name].length),
sizeType:['original','compressed'],
sourceType:['album','camera'],
success:function(res){
vartempFilePaths=res.tempFilePaths;

self.append(tempFilePaths);
}
})
}

/*
*显示图片
*/

show(){

letself=this;
letview={};
view[self.name]=self.that.data[self.name];

self.that.setData(view);

}

/*
*追加图片
*/
append(data){

constself=this;
for(leti=0;i
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐