WeChat 미니 프로그램 드롭다운 상자 구성 요소를 사용하는 방법

이 글은 주로 WeChat 애플릿의 드롭다운 상자 구성요소의 사용법을 자세히 소개하고 있으며, 매우 포괄적이고 꼼꼼하게 작성되었으며, 이것이 필요한 친구들에게 확실한 참고 가치가 있습니다. 참고하셔서 공부하시면 됩니다. 부족한 점이 있다면 지적과 수정을 환영합니다. [추천 튜토리얼: 작은프로그램 개발 튜토리얼]

적용 가능한 시나리오

1. 생년월일 선택
3, 성별 선택
4, 일반 드롭다운 선택 등

1. 시·도 3단계 연계 활용 # 🎜🎜## 🎜🎜#모드 = 지역, 값 = “1차원 배열”이라는 점에 유의하세요

//.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>

2. 생년월일 선택

# 🎜🎜#

모드 = 날짜, 값 = "날짜 문자열"

<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>

3 성별 선택

<picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index" value=&#39;{{index}}&#39; 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;

위 내용은 WeChat 미니 프로그램 드롭다운 상자 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!