小程序一个页面多次调用省市联动
预览图片：
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>
源码下载：http://pan.baidu.com/s/1bpmWy55
本站地址：http://www.wxapp-union.com/portal.php?mod=attachment&id=6039
