So verwenden Sie die Dropdown-Box-Komponente des WeChat-Miniprogramms

云罗郡主
Freigeben: 2019-01-21 14:02:57
Original
4920 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Verwendung der Dropdown-Box-Komponente des WeChat-Applets ausführlich vor. Er ist sehr umfassend und detailliert geschrieben und hat einen gewissen Referenzwert dazu und lerne daraus. Bei Mängeln sind Kritik und Korrekturen willkommen. [Empfohlene Tutorials: Miniprogramm-Entwicklungs-Tutorial]

Anwendbare Szenarien

Drei-Ebenen-Verknüpfung zwischen Provinzen und Städten
2 >3. Geschlecht auswählen
4. Allgemeine Dropdown-Auswahl usw.

1. Verwendung der dreistufigen Verknüpfung auf Provinz- und Gemeindeebene

Notizmodus = Region , und value = "Eindimensionales Array ”

//.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>
Nach dem Login kopieren

2. Auswahl des Geburtsdatums

Notizmodus = Datum, und Wert = „Datumszeichenfolge“

<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>
Nach dem Login kopieren

3. Geschlechtsauswahl

<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>
Nach dem Login kopieren

Für alle oben genannten müssen relevante Anfangsvariablen in .js festgelegt werden!

var app = getApp();
 data: {
  region:[&#39;湖南&#39;,&#39;长沙&#39;,&#39;岳麓&#39;],
  date:&#39;2010-10-10&#39;,
  gender:[&#39;男&#39;,&#39;女&#39;],
  index:0
 }
 bindViewEvent:function(e){
  app.process(this,e);  
 }
Nach dem Login kopieren

Verwandte js-Klassen

//component.js
const select = require(&#39;../component/select.js&#39;);
const upload = require(&#39;../component/upload.js&#39;);
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 || &#39;date&#39;;
  this.mode = data.mode || &#39;selector&#39;;
 }
 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: [&#39;original&#39;, &#39;compressed&#39;],
   sourceType: [&#39;album&#39;, &#39;camera&#39;],
   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;
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Dropdown-Box-Komponente des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:qdfuns.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage