微信小程式--手寫一個地區選擇器（多級聯動）

real__隔壁老胖兔發表於2018-09-13
微信小程式

前言

通過微信小程式官方文件，我們可以看到表單元件中有picker這類滾動選擇器。 現支援五種選擇器，通過mode來區分，預設是普通選擇器。

  • 普通選擇器
  • 多列選擇器
  • 時間選擇器
  • 日期選擇器
  • 省市區選擇器

需求場景：官方的地區選擇器是三級聯動，包括省市區，那如果業務場景是兩級選擇器，只需要省市呢？或者說，城市所對應的value值需要自定義呢？自己手寫一個地區選擇器會是一個不錯的選擇。廢話不多說，馬上擼程式碼。

開始

1.1 wxml程式碼

	<picker mode="multiSelector" bindchange="bindchange" bindcolumnchange="bindAreaChange" range="{{areaList}}" range-key="name" value="{{address}}">
	    <view class="picker">
			當前選擇：
		</view>
	</picker>
複製程式碼

微信官方文件描述：

微信小程式--手寫一個地區選擇器（多級聯動）

注意：

  1. 此處用到多列選擇器：mode = multiSelector（最低版本：1.4.0）
  2. 由於引入的地區檔案area.js是城市和地區都在一起，用name和value作為屬性，所以選擇range為二維Object這種型別，配合range-key一起使用。

1.2 js程式碼

第一步：引入地區檔案

const area = require('../../common/area.js');
複製程式碼

第二步：初始化省份列表，並預設展示市

this.province = area.filter(v => !v.parent )
this.bindAreaChange({
    detail: {
        column: 0,
        value: 0
    }
})
複製程式碼

第三步：省份觸發change事件

bindAreaChange:function(e){
    if(e.detail.column==0){//判斷當前改變的是第一列，下標從0開始
        const index = e.detail.value;//獲取選中下標
        const current_province = this.province[index];
        const all_city = area.filter(v =>  v.parent == current_province.value )
        this.setData({
            areaList:[this.province,all_city]
        })
    }
}
複製程式碼

1.3 area.js

資料結構長這樣

const address = [{
        "name": "安徽省",
        "value": "1"
    },
    {
        "name": "合肥市",
        "parent": "1",
        "value": "***"//此處省略n個字，/偷笑
    },
    {
        "name": "安慶市",
        "parent": "1",
        "value": "***"
    }]
module.exports = address;
複製程式碼

效果圖

微信小程式--手寫一個地區選擇器（多級聯動）

總結

  1. 目前只是實現了部分程式碼，到生產中還是會加一些功能的。。
  2. 學習小程式的時間有點短暫，如有疏漏，還請多多提出，蟹蟹~

相關文章