欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

前言

通過微信小程序官方文檔微信小程序地區選擇器，我們可以看到表單組件中有這類滾動選擇器。現支持五種選擇器，通過mode來區分，默認是普通選擇器。

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

開始1.1 wxml代碼

	mode="multiSelector" bindchange="bindchange" bindcolumnchange="bindAreaChange" range="{{areaList}}" range-key="name" value="{{address}}">
	    class="picker">
			當前選擇：
		
	
復制代碼

微信官方文檔描述：

注意：

此處用到多列選擇器：mode = （最低版本：1.4.0）由于引入的地區文件area.js是城市和地區都在一起，用name和value作為屬性，所以選擇range為二維這種類型，配合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
    }
})
復制代碼

第三步：省份觸發事件

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;
復制代碼

效果圖

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