微信小程序联盟：小程序组件：一个页内多次调用省市三级联动

来源：微信小程序联盟
作者：zsc

小程序一个页面多次调用省市联动

预览图片：

JS

// pages/driver/driver.js
//获取应用实例
var app = getApp()
var shengIndex;
var shiIndex;
var xianIndex;
var location;
var locationQname;
var locationZname;
var qZ;
var height = '100vh';
Page({
  data: {
    submit: 'false',
    chosen: '',
    input: [{ inputName: true, inputTel: true, inputCar: true, inputCarLength: true, inputChepai: true, }],
    locationQ: '',
    locationZ: '',
    submitdataenrr: '',
    cityDisplay: 'none',
    resetButton: false,
  },
  // 触底事件
  // 动画二
  donghua2: function () {
    height = '0vh';
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    animation.rotate(180).scale(0.1, 0.1).height(height).step();
    this.setData({
      animationData: animation.export(),
    })
  },
  // 动画一
  donghua: function () {
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    setTimeout(function () {
      animation.height(height).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 0);
  },
  //点击添加地址
  bindcityselecttrueQ: function (e) {
    console.log(1)
    locationQname = e.target.dataset.locationq;
    qZ = 'q';
    this.location(e)
  },
  bindcityselecttrueZ: function (e) {
     console.log(2)
    locationZname = e.target.dataset.locationz;
    qZ = 'z';
    this.location()
  },
  location: function () {
     console.log(app.data.provinc)
    height = "100vh"
    this.donghua();
    location = '';
    this.setData({
      city_select: true,
      provinces: app.data.province,
      citys: '',
      areas: '',
      carLengthType: false,
      height: "100vh",
    })
  },
  // 返回上一级
  resetBottom: function () {
    if (this.data.citys.length == 0) {
      this.setData({
        provinces: '',
        citys: app.data.city[shengIndex].cities,
        areas: '',
      })
    } else {
      this.setData({
        provinces: app.data.province,
        citys: '',
        areas: '',
      })
    }
  },
  // 点击省
  provincesBottom: function (e) {
    shengIndex = e.target.dataset.shengname;
    this.setData({
      sheng: this.data.provinces[shengIndex],
      provinces: '',
      citys: app.data.city[shengIndex].cities,
      resetButton: true,
    })
  },
  // 市
  citysBottom: function (e) {
    shiIndex = e.target.dataset.shiname;
    this.setData({
      provinces: '',
      citys: '',
      areas: app.data.area[shengIndex][shiIndex].areaes
    })
  },
  // 县
  areasBottom: function (e) {
    xianIndex = e.target.dataset.xianname;
    var sheng = app.data.province[shengIndex];
    var shi = app.data.city[shengIndex].cities[shiIndex];
    var xian = app.data.area[shengIndex][shiIndex].areaes[xianIndex];
    location = shi + xian;
    this.donghua2();
    console.log(location);
    if (qZ == 'q') {
      if (locationQname == 1) { this.setData({ qiDian1: location }) }
      if (locationQname == 2) { this.setData({ qiDian2: location }) }
      if (locationQname == 3) { this.setData({ qiDian3: location }) }
      if (locationQname == 4) { this.setData({ qiDian4: location }) }
    } else {
      if (locationZname == 1) { this.setData({ zhongDian1: location }) }
      if (locationZname == 2) { this.setData({ zhongDian2: location }) }
      if (locationZname == 3) { this.setData({ zhongDian3: location }) }
      if (locationZname == 4) { this.setData({ zhongDian4: location }) }
    }
    this.setData({
      back: shi + xian,
      city_select: false,
      height: 0,
      item:location
    })
  },
})

wxml

        
          
           
            起点
            -
            终点
          
          
            1.
            
            -
             
          
          
            2.
             
            -
             
          
          
            3.
             
            -
            
          
          
            4.
            
            -
             
          
          
            
              
                当前所在省：{{sheng}}
                返回上一级
              
              
                
                  {{item}}
                
                
                  {{item}}
                
                
                  {{item}}
                
              
            
          
        

源码下载：http://pan.baidu.com/s/1bpmWy55
本站地址：http://www.wxapp-union.com/portal.php?mod=attachment&id=6039