欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動

 更新時(shí)間:2020年06月21日 09:33:22   作者:上木—下水  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)選擇地址省市區(qū)三級聯(lián)動的具體代碼,供大家參考,具體內(nèi)容如下

微信原生地址API,缺少省市區(qū)code,因此自己寫了一個(gè)收貨地址

思路:在onload預(yù)先加載全部省和第一個(gè)省的全部市和區(qū),加載全部會導(dǎo)致幾秒的事件阻塞。點(diǎn)擊選擇地址彈窗后,按需加載操作,滑動省加載對應(yīng)的市和第一個(gè)市對應(yīng)的區(qū),滑動市加載區(qū),滑動區(qū)只更改區(qū)的值

onLoad: function(options) {
 var that = this;
 // 此文件為全部省以及第一個(gè)省的市和區(qū)
 var cityData = districtLoad.districtLoad;
 // 存放省 
 const provinces = [];
 // 存放市
 const citys = [];
 // 存放區(qū)
 const countys = [];
 for (let i = 0; i < cityData.length; i++) {
  provinces.push(cityData[i]);
 }
 for (let i = 0; i < cityData[0].sub.length; i++) {
  citys.push(cityData[0].sub[i])
 }
 for (let i = 0; i < cityData[0].sub[0].sub.length; i++) {
  countys.push(cityData[0].sub[0].sub[i])
 }
 that.setData({
  provinces,
  citys,
  countys
 })
 }

滑動省市區(qū)事件

bindChange: function(e) {
 var that = this;
 var val = e.detail.value
 var t = this.data.values;
 // 滑動省
 if (val[0] != t[0]) {
  const citys = [];
  const countys = [];
  // 保存市
  for (let i = 0; i < cityData[val[0]].sub.length; i++) {
  citys.push(cityData[val[0]].sub[i])
  }
  // 保存第一個(gè)市的全部區(qū)
  for (let i = 0; i < cityData[val[0]].sub[0].sub.length; i++) {
  countys.push(cityData[val[0]].sub[0].sub[i])
  }
  // 保存
  this.setData({
  province: cityData[val[0]].name,
  city: cityData[val[0]].sub[0].name,
  citys: citys,
  countys: countys,
  values: val,
  value: [val[0], 0, 0],
  fdeliveryProvince: this.data.provinces[val[0]].code,
  fdeliveryCity: cityData[val[0]].sub[0].code,
  })
  // 防止只有省市的情況
  if (cityData[val[0]].sub[0].sub.length!=0){
  that.setData({
   county: cityData[val[0]].sub[0].sub[0].name,
   fdeliveryArea: cityData[val[0]].sub[0].sub[0].code
  })
  }else {
  that.setData({
   county: '',
   fdeliveryArea:''
  })
  }
  return;
 }
 // 滑動市
 if (val[1] != t[1]) {
  const countys = [];
  // 保存市
  for (let i = 0; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
  countys.push(cityData[val[0]].sub[val[1]].sub[i])
  }
  // 保存
  this.setData({
  city: this.data.citys[val[1]].name,
  countys: countys,
  values: val,
  value: [val[0], val[1], 0],
  fdeliveryCity: this.data.citys[val[1]].code,
  })
  // 防止只有省市的情況
  if (countys.length != 0) {
  that.setData({
   county: cityData[val[0]].sub[val[1]].sub[0].name,
   fdeliveryArea: cityData[val[0]].sub[val[1]].sub[0].code
  })
  } else {
  that.setData({
   county: '',
   fdeliveryArea: ''
  })
  }
  return;
 }
 // 滑動區(qū)
 if (val[2] != t[2]) {
  this.setData({
  county: this.data.countys[val[2]].name,
  values: val,
  fdeliveryArea: this.data.countys[val[2]].code
  })
  return;
 }
 }

html

<view class="citypicker" wx:if="{{condition}}">
 <view class="cityheader">
 <view bindtap="open" class="city-cancel">取消</view>
 <view bindtap="open" class="city-true">確定</view>
 </view>
 <picker-view indicator-style="height: 40px;" style="font-size:30rpx; width: 100%; height: 290px;" value="{{value}}" bindchange="bindChange" class="citybody">
 <picker-view-column>
  <view wx:for="{{provinces}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
 </picker-view-column>
 <picker-view-column>
  <view wx:for="{{citys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
 </picker-view-column>
 <picker-view-column>
  <view wx:for="{{countys}}" wx:key="{{item.name}}" wx:code="{{item.code}}" style="line-height: 40px;padding-left:10px;">{{item.name}}</view>
 </picker-view-column>
 </picker-view>
</view>

效果圖

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • layui中的tab控件點(diǎn)擊切換觸發(fā)事件

    layui中的tab控件點(diǎn)擊切換觸發(fā)事件

    這篇文章主要介紹了layui中的tab控件點(diǎn)擊切換觸發(fā)事件,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • Openlayers實(shí)現(xiàn)地圖的基本操作

    Openlayers實(shí)現(xiàn)地圖的基本操作

    這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)地圖的基本操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • JavaScript將Table導(dǎo)出到Excel實(shí)現(xiàn)思路及代碼

    JavaScript將Table導(dǎo)出到Excel實(shí)現(xiàn)思路及代碼

    將Table導(dǎo)出到Excel不是一件困難的事,很多語言都可以實(shí)現(xiàn),本文主要介紹下使用JavaScript實(shí)現(xiàn)將table導(dǎo)出到excel,思路很清晰感興趣的你不妨參考下哈
    2013-03-03
  • 微信小程序?qū)崿F(xiàn)下拉刷新動畫

    微信小程序?qū)崿F(xiàn)下拉刷新動畫

    這篇文章主要為大家詳細(xì)介紹了微信小程序動畫實(shí)現(xiàn)下拉刷新動畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • 詳解webpack+express多頁站點(diǎn)開發(fā)

    詳解webpack+express多頁站點(diǎn)開發(fā)

    這篇文章主要介紹了詳解webpack+express多頁站點(diǎn)開發(fā)
    2017-12-12
  • 分享JS四種好玩的黑客背景效果代碼

    分享JS四種好玩的黑客背景效果代碼

    大家好,本篇文章分享的是四種好玩的黑客背景效果JS代碼,感興趣的同學(xué)趕緊來試試吧,覺得還不錯的話記得收藏一下哦,方便下次瀏覽
    2021-11-11
  • 一步步教你利用Canvas對圖片進(jìn)行處理

    一步步教你利用Canvas對圖片進(jìn)行處理

    這篇文章主要給大家介紹了關(guān)于利用Canvas對圖片進(jìn)行處理的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-09-09
  • uniapp實(shí)現(xiàn)單選框的示例代碼

    uniapp實(shí)現(xiàn)單選框的示例代碼

    本文給大家介紹uniapp實(shí)現(xiàn)單選框的示例代碼,采用uniapp-vue3實(shí)現(xiàn)的一款單選框組件,提供絲滑的動畫選中效果,支持不同主題配置,適配web、H5、微信小程序,感興趣的朋友跟隨小編一起看看吧
    2024-03-03
  • js圖片查看器插件用法示例

    js圖片查看器插件用法示例

    這篇文章主要介紹了js圖片查看器插件用法,結(jié)合實(shí)例形式分析了圖片查看器插件viewer.js簡單使用技巧,需要的朋友可以參考下
    2019-06-06
  • 利用JS將圖標(biāo)字體渲染為圖片的方法詳解

    利用JS將圖標(biāo)字體渲染為圖片的方法詳解

    在軟件開發(fā)中肯定要用到圖標(biāo),比如下圖的?Groove?音樂中就用到了許多圖標(biāo)。一種獲取這些圖標(biāo)的方法是把?Groove?音樂截個(gè)圖,然后熟練地開啟?Photoshop,開始摳圖。這種方式很遜,效率也很低。本文將利用JS將圖標(biāo)字體渲染為圖片,需要的可以參考一下
    2022-05-05

最新評論