本篇內(nèi)容介紹了“微信小程序中怎么實(shí)現(xiàn)ecshop地址三級聯(lián)動(dòng)”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、會(huì)同網(wǎng)絡(luò)推廣、微信小程序開發(fā)、會(huì)同網(wǎng)絡(luò)營銷、會(huì)同企業(yè)策劃、會(huì)同品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供會(huì)同建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.chinadenli.net

微信小程序如何實(shí)現(xiàn)ecshop地址3級聯(lián)動(dòng)

picker標(biāo)簽，官方給出的實(shí)例：

<view class="section">
 <view class="section__title">地區(qū)選擇器</view>
 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <view class="picker">
   當(dāng)前選擇：{{array[index]}}
  </view>
 </picker>
</view>

 Page({
 data: {
  array: ['美國', '中國', '巴西', '日本'],
  index: 0,
 },
 bindPickerChange: function(e) {
  console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
  this.setData({
   index: e.detail.value
  })
 },
})

wxml頁面：

<view class="add-list under-line" >

    <view class="add-lab">收貨地址</view>
    <view class="add-text">
      <picker class="w-3" bindchange="bindPickerProvince" value="{{provinceIndex}}" range="{{province}}" >
        <view class="picker">{{province[provinceIndex]}}</view>
      </picker> 
      <picker class="w-3" bindchange="bindPickerCity" value="{{cityIndex}}" range="{{city}}" >
        <view class="picker">{{city[cityIndex]}}</view>
      </picker>
      <picker class="w-3" bindchange="bindPickerDistrict" value="{{districtIndex}}" range="{{district}}" >
        <view class="picker">{{district[districtIndex]}}</view>
      </picker>        
    </view>
  </view>

js頁面：

var app = getApp()
Page({
 data:{
  motto: 'jxcat',
  serverUrl: app.globalData.ajaxUrl,
  baseUrl: app.globalData.baseUrl,
  title: "收貨地址",
  address_id: "",
  address: "",

  province:[],

  province_id: [], //后臺(tái)返回的數(shù)據(jù)對應(yīng) region_id city,district 與此相同
  province_name: [], //后臺(tái)返回的數(shù)據(jù)對應(yīng) region_name
  provinceIndex: 0, //wxml頁面選擇的選項(xiàng)，從0開始
  provinceId: 0, //根據(jù)wxml頁面選擇的選項(xiàng)獲取到province_id: []對應(yīng)的region_id

  city:[].
  city_id: [],
  city_name: [],
  cityIndex: 0,
  cityId: 0,

  district:[],
  district_id: [],  
  district_name: [],
  districtIndex: 0,
  districtId: 0,
 },
 onLoad:function(options){
  // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  var that = this
  var get_data
  wx.checkSession({
   success: function(){
    //登錄態(tài)未過期
    wx.getStorage({
     key: 'wcx_session',
     success: function(sres) {
       get_data = {
            m: 'api',
            c: 'user' ,
            a: 'edit_address',
            wcx_session: sres.data,
        }
       if(options.act == 'edit'){
         get_data = {
            m: 'api',
            c: 'user' ,
            a: 'edit_address',
            id: options.id,
            wcx_session: sres.data,
        }
       }
       wx.request({
        url: app.globalData.ajaxUrl, 
        data: get_data,
        header: {
          'content-type': 'application/json'
        },
        success: function(res) {
  
          if(options.act == "edit"){
           that.data.provinceId = res.data.consignee.province
           that.data.cityId = res.data.consignee.city
           that.data.districtid = res.data.consignee.district
          }
          for(var i=0; i<res.data.province_list.length; i++){{
           that.data.province_id[i] = res.data.province_list[i].region_id //把region_id存入province_id
           that.data.province_name[i] = res.data.province_list[i].region_name //把region_name存入province_name
           if(res.data.consignee.province == res.data.province_list[i].region_id){
            that.data.provinceIndex = i
           }
          }}
          for(var i=0; i<res.data.city_list.length; i++){{
           that.data.city_id[i] = res.data.city_list[i].region_id
           that.data.city_name[i] = res.data.city_list[i].region_name
           if(res.data.consignee.city == res.data.city_list[i].region_id){
            that.data.cityIndex = i
           }
          }}
          for(var i=0; i<res.data.district_list.length; i++){{
           that.data.district_id[i] = res.data.district_list[i].region_id
           that.data.district_name[i] = res.data.district_list[i].region_name
           if(res.data.consignee.district == res.data.district_list[i].region_id){
            that.data.districtIndex = i
           }
          }}
          that.data.address_id = options.id
          that.setData({
           consignee: res.data.consignee,
           province: that.data.province_name,
           provinceIndex: that.data.provinceIndex,
           city: that.data.city_name,
           cityIndex: that.data.cityIndex,
           district: that.data.district_name,
           districtIndex: that.data.districtIndex
          }) 
        }
       })
       //request
     } 
    })
   },
   fail: function(){
    //登錄態(tài)過期
    wx.login()
   }
  })
  
 },
 bindPickerProvince: function(event){
  var that = this
  var getId = event.detail.value //獲取到wxml選擇的選項(xiàng)對應(yīng)的下標(biāo)，從0開始
  that.data.provinceId = that.data.province_id[getId] //根據(jù)獲取到的下標(biāo)獲取到region_name對應(yīng)的region_id
  wx.request({
   url: app.globalData.ajaxUrl, 
   data: {
    m: 'api',
    c: 'public' ,
    a: 'region',
    rtype: 2,
    rparent: that.data.provinceId,
   },
   header: {
     'content-type': 'application/json'
   },
   success: function(res){
    for(var i=0; i<res.data.regions.length; i++){{
     that.data.city_id[i] = res.data.regions[i].region_id
     that.data.city_name[i] = res.data.regions[i].region_name
    }}
    that.setData({
      city: that.data.city_name,
      provinceIndex: getId,
     }) 
   },
   
  })
 },
 bindPickerCity: function(event){
  var that = this
  var getId = event.detail.value
  that.data.cityId = that.data.city_id[getId]
  wx.request({
   url: app.globalData.ajaxUrl, 
   data: {
    m: 'api',
    c: 'public' ,
    a: 'region',
    rtype: 3,
    rparent: that.data.cityId,
   },
   header: {
     'content-type': 'application/json'
   },
   success: function(res){
    for(var i=0; i<res.data.regions.length; i++){{
     that.data.district_id[i] = res.data.regions[i].region_id
     that.data.district_name[i] = res.data.regions[i].region_name
    }}
    that.setData({
      district: that.data.district_name,
      cityIndex: getId,
     }) 
   },
   
  })
 },
 bindPickerDistrict: function(event){
   var that = this
   var getId = event.detail.value
   that.data.districtId = that.data.district_id[getId]
   that.setData({
      districtIndex: getId,
   }) 
 },
 formSubmit: function(event) {
  var that = this
  wx.checkSession({
   success: function(){
    //登錄態(tài)未過期
    wx.getStorage({
     key: 'wcx_session',
     success: function(sres) {
       wx.request({
        url: app.globalData.ajaxUrl, 
        data: {
         m: 'api',
         c: 'user' ,
         a: 'add_address',
         address_id: that.data.address_id,
         province: that.data.provinceId, // wxml頁面選擇的地址對應(yīng)的 region_id
         city: that.data.cityId,
         district: that.data.districtId,
         address: event.detail.value.address,
         consignee: event.detail.value.consignee,
         mobile: event.detail.value.mobile,
         zipcode: event.detail.value.zipcode,
         wcx_session: sres.data,
        }, 
        header: {
          'content-type': 'application/json'
        },
        
        success: function(res) {
          console.log(res)
          wx.redirectTo({
                url: 'address'
            })
        }
       })
       //request
     } 
    })
   },
   fail: function(){
    //登錄態(tài)過期
    wx.login()
   }
  })
 },


  
})

“微信小程序中怎么實(shí)現(xiàn)ecshop地址三級聯(lián)動(dòng)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享題目：微信小程序中怎么實(shí)現(xiàn)ecshop地址三級聯(lián)動(dòng)-創(chuàng)新互聯(lián)
當(dāng)前地址：http://www.chinadenli.net/article38/deihpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司、營銷型網(wǎng)站建設(shè)、軟件開發(fā)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)