WeChat ミニ プログラム ドロップダウン ボックス コンポーネントの使用方法

云罗郡主
リリース: 2019-01-21 14:02:57
オリジナル
4903 人が閲覧しました

この記事は主に WeChat アプレットのドロップダウン ボックス コンポーネントの使用法を詳細に紹介しており、非常に包括的かつ詳細に書かれており、困っている友人にとっては一定の参考になります。学習の参考にしてください。不備がある場合は、批判や修正を歓迎します。 [推奨チュートリアル: 小さなプログラム開発チュートリアル]

該当するシナリオ

1. 州と都市間の 3 レベルの連携##2. #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:[&#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);  
 }
ログイン後にコピー

関連する js クラス

//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;
ログイン後にコピー


以上がWeChat ミニ プログラム ドロップダウン ボックス コンポーネントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:qdfuns.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!