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

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

预览图片：

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

        <view class="section" style='margin-bottom:30rpx;background-color:#fbf9fe;'>
          <view class="selectLocation">
           <view class="locationLi"></view>
            <view  class='qiDian ' >起点</view>
            <view class="locationD">-</view>
            <view  class='qiDian ' >终点</view>
          </view>
          <view class="selectLocation">
            <view class="locationLi">1.</view>
            <input type="text" data-locationq='1'  class='qiDian bc_white' name="locationq" bindtap='bindcityselecttrueQ' value="{{qiDian1}}"/>
            <view class="locationD">-</view>
             <input type="text"  data-locationz='1' class='zhongDian bc_white' name="locationz" bindtap='bindcityselecttrueZ'value="{{zhongDian1}}"/>
          </view>
          <view class="selectLocation">
            <view class="locationLi">2.</view>
             <input type="text"  data-locationq='2' class='qiDian bc_white' name="locationq2" bindtap='bindcityselecttrueQ'value="{{qiDian2}}"/>
            <view class="locationD">-</view>
             <input type="text"  data-locationz='2' class='zhongDian bc_white' name="locationz2" bindtap='bindcityselecttrueZ'value="{{zhongDian2}}"/>
          </view>
          <view class="selectLocation">
            <view class="locationLi ">3.</view>
             <input type="text"  data-locationq='3' class='qiDian bc_white' name="locationq3" bindtap='bindcityselecttrueQ'value="{{qiDian3}}"/>
            <view class="locationD">-</view>
            <input type="text"  data-locationz='3' class='zhongDian bc_white' name="locationz3" bindtap='bindcityselecttrueZ'value="{{zhongDian3}}"/>
          </view>
          <view class="selectLocation">
            <view class="locationLi">4.</view>
            <input type="text"  data-locationq='4' class='qiDian bc_white' name="locationq4" bindtap='bindcityselecttrueQ'value="{{qiDian4}}"/>
            <view class="locationD">-</view>
             <input type="text"  data-locationz='4' class='zhongDian bc_white' name="locationz4" bindtap='bindcityselecttrueZ'value="{{zhongDian4}}"/>
          </view>
          <scroll-view scroll-y="true" animation="{{animationData}}" style="height:0vh;overflow: hidden;" class="indexFlexCenter ">
            <view wx:if='{{city_select}}'>
              <view class='indexFlexBoxTitle' >
                当前所在省：{{sheng}}
                <view class='indexFlexBoxTitleReset lan' wx:if='{{resetButton}}' bindtap="resetBottom">返回上一级</view>
              </view>
              <view class="indexFlexBox" style="line-height:13px;text-align:left;">
                <view wx:for="{{provinces}}" hover='true' hover-class="hoverButton" hover-start-time='25' wx:for-index="i" data-shengname="{{i}}" bindtap="provincesBottom">
                  {{item}}
                </view>
                <view wx:for="{{citys}}" hover='true' hover-class="hoverButton" hover-start-time='25' wx:for-index="i" data-shiname="{{i}}" bindtap="citysBottom">
                  {{item}}
                </view>
                <view wx:for="{{areas}}" hover='true' hover-class="hoverButton" hover-start-time='25' wx:for-index="i" data-xianname="{{i}}" bindtap="areasBottom">
                  {{item}}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>

源码下载：pan.baidu.com/s/1bpmWy55

本站地址：省市级联多次调用.rar