微信小程序中如何实现ecshop地址三级联动-创新互联

这篇文章给大家分享的是有关微信小程序中如何实现ecshop地址三级联动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了舒城免费建站欢迎大家使用！

微信小程序如何实现ecshop地址3级联动

picker标签，官方给出的实例：

 地区选择器
 
  
   当前选择：{{array[index]}}
  
 


 Page({
 data: {
  array: ['美国', '中国', '巴西', '日本'],
  index: 0,
 },
 bindPickerChange: function(e) {
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({
   index: e.detail.value
  })
 },
})

wxml页面：

    收货地址
    
      
        {{province[provinceIndex]}}
       
      
        {{city[cityIndex]}}
      
      
        {{district[districtIndex]}}
              
    
  

js页面：

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

  province:[],

  province_id: [], //后台返回的数据对应 region_id city,district 与此相同
  province_name: [], //后台返回的数据对应 region_name
  provinceIndex: 0, //wxml页面选择的选项，从0开始
  provinceId: 0, //根据wxml页面选择的选项获取到province_id: []对应的region_id

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

  district:[],
  district_id: [],  
  district_name: [],
  districtIndex: 0,
  districtId: 0,
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  var that = this
  var get_data
  wx.checkSession({
   success: function(){
    //登录态未过期
    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
感谢各位的阅读！关于“微信小程序中如何实现ecshop地址三级联动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
            

            分享名称：微信小程序中如何实现ecshop地址三级联动-创新互联            

            转载来源：http://6mz.cn/article/dehjpp.html