18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

小程序游戏制作流程_微信小程序下拉框组件使用

2021-01-08分享 "> ">
微信小程序下拉框组件使用方法详解       这篇文章主要为大家详细介绍了微信小程序下拉框组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

适用场景

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 
 当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
 /view 
 /picker 

二、出生日期选择

注意mode = date,以及value = “日期字符串”

 picker mode="date" value="{{date}}" start="" end="" bindchange="bindViewEvent" data-model="component" data-method="bindSelect" date-mode="date" data-name="date" 
 view 
 {{date}}
 /view 
 /picker 

三、性别选择

注意,不填mode默认为selector,range=”一维数组”,value=”当前选中索引”

 picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index" value='{{index}}' range="{{gender}}" 
 view 
 {{gender[index]}}
 /view 
 /picker 

以上都需要在.js里设置相关初始变量!

//.js
 var app = getApp();
 data: {
 region:['河北','沧州','河间'],
 date:'',
 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');
ponent{
 , that) {
  = 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;

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

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

"> ">
在线咨询