微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下
适用场景
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以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。