一、需求背景

在電商系統中地區選擇是比較常見、公用的一個功能,地區資料，多級聯動(省、市、區、鎮)：

本文分享了Javashop電商系統的小程式端地區選擇元件的實現。

二、程式碼封裝

首先在components檔案下新建一個regionpicke資料夾, 再在該資料夾下新建Component(一個自定義元件由json,wxml,wxss,js四個檔案組成)

json檔案中設定component欄位為true (宣告該檔案為自定義元件)

{

"component": true

}

元件內的wxml：

<viewclass='area-nav'>
<viewclass
 
='choosed-area'>
<viewwx:for="{{choosedAreas}}"wx:key="index"wx:if="{{choosedAreas.length}}"class="nav-li{{item&&item.region_grade===areas[0].region_grade?'selected':''}}"bindtap="onchangeChoosedItem"data-item="{{item}}">{{item.local_name||'請選擇'}}</view>
<viewwx:if="{{!choosedAreas.length||!finished}}"
 
>請選擇</view>
</view>
</view>
<viewclass='main'>
<scroll-viewscroll-y="true"class='main-ul'>
<viewclass="main-li{{item.selected?'selected':''}}"wx:for="{{areas}}"wx:key="index"bindtap='onchangeItem'data-item="{{item}}">
<textclass='item'>{{item.local_name}}</
 
text>
<textwx:if="{{item.selected}}"class='iconfonticon-duigouicon'></text>
</view>
</scroll-view>
</view>

元件內的js:

/**
     * 地區選擇元件
     * ===== 使用場景 ======
     * 所有選擇地區的地方
     * ===== 引數 =====
     * show         地區元件是否顯示
     * ===== 事件 =====
     * areasChanged 選擇地區時觸發，把選擇的新地區傳給父元件
     * closeRegionpicke  監聽地區是否選擇完畢，選擇完畢後關閉地區元件
                * 觸發areasChanged事件，即在外部，在元件上繫結areasChanged事件即可，                 即bind:areasChanged,像繫結tap一樣
 */
import*asAPI_Addressfrom'../../api/address'
Component({
         //接收父元件傳遞過來的引數
         properties:{
show:{
type:Boolean,
value:false
}
},
data:{
id:0,
areas:[],//當前級別顯示的地區
selectedAreas:[],//儲存當前選中項所屬的地區列表
choosedAreas:[],//選中的地區
finished:false,//是否選擇完畢
},
observers:{
//監聽地區元件是否顯示
show(val) {
if(val) {
this.getAreasItems()
}
},
//監聽地區是否選擇完畢，選擇完畢後通知父元件關閉地區元件
finished(){
if(this.data.finished){
this.triggerEvent('closeRegionpicke')
}
},
//把選擇的新地區傳給父元件
choosedAreas(newVal){
this.triggerEvent('areasChanged',newVal)
}
},
methods:{
//已選擇的地區變化時觸發
onchangeChoosedItem(e){
letitem=e.currentTarget.dataset.item
if(item.region_grade){
this.setData({
areas:this.data.selectedAreas[item.region_grade-1]
})
}
},
//選擇列表地區項變化時
onchangeItem(e){
letitem=e.currentTarget.dataset.item
if(this.data.choosedAreas[item.region_grade-1]&&this.data.areas[0].region_grade===item.region_grade&&item.id===this.data.choosedAreas[item.region_grade-1].id){
return
}else{
this.data.choosedAreas.length=item.region_grade-1
if(this.data.choosedAreas[item.region_grade-1]){
this.data.choosedAreas[item.region_grade-1]=item
}else{
this.data.choosedAreas.push(item)
}
//設定選擇後的地區為選中狀態
this.data.areas.forEach(key=>{
if(item.id===key.id){
key.selected=true
}else{
key.selected=false
}
})
item.selected=true
this.setData({
finished:item.region_grade===4,
id:item.id,
areas:this.data.areas,
choosedAreas:this.data.choosedAreas,
})

if(item.region_grade===4){
return
}
this.getAreasItems()
}
},
//獲取地區列表
getAreasItems(){
letthat=this
              //呼叫後臺介面獲取地區列表
API_Address.getAreas(this.data.id).then(response=>{
if(response&&Array.isArray(response)&&response.length){
response.forEach(key=>{
key.selected=false
})
that.setData({areas:response})
if(that.data.selectedAreas[response[0].region_grade-1]){
if(response[0].region_grade===that.data.selectedAreas[response[0].region_grade-1][0].region_grade){
that.data.selectedAreas[response[0].region_grade-1]=response
}
}else{
that.data.selectedAreas.push(response)
that.setData({selectedAreas:this.data.selectedAreas})
}
}else{
that.setData({finished:true})
}
})
}
}
})

三、元件呼叫

在需要的檔案中引入元件

json檔案

說明："元件名稱(隨便定義)":"元件頁面的路徑

{
"usingComponents": {
"RegionPicker": "/components/regionpicke/regionpicke"
}
}

wxml檔案

<RegionPicker 
bind:areaschanged="addressSelectorChanged"
bind:cloneRegionPicke="cloneRegionPicke"
show="{{ showAddressSelector }}"
></RegionPicker>

js檔案

 //地址發生改變
addressSelectorChanged(e){
constitem=e.detail //接收元件傳遞過來的引數
constobj={
last_id:item[item.length-1].id,
addrs:item.map(key=>{returnkey.local_name}).join('')
}
this.setData({
'addressForm.region':obj.last_id,
'addressForm.addrs':obj.addrs
})
},
      //關閉地區元件
                  cloneRegionPicke() {
this.setData({
showAddressSelector: false
})
    }

易族智匯（javashop）原創文章