小程序组件:一个页内多次调用省市三级联动-演道网

                <h2 data-anchor-id="yzmt" id="小程序一个页面多次调用省市联动">小程序一个页面多次调用省市联动</h2><p data-anchor-id="m0o3">预览图片:</p>

JS:

  1. // pages/driver/driver.js
  2. //获取应用实例
  3. var app = getApp()
  4. var shengIndex;
  5. var shiIndex;
  6. var xianIndex;
  7. var location;
  8. var locationQname;
  9. var locationZname;
  10. var qZ;
  11. var height = '100vh';
  12. Page({
  13. data: {
  14. submit: 'false',
  15. chosen: '',
  16. input: [{ inputName: true, inputTel: true, inputCar: true, inputCarLength: true, inputChepai: true, }],
  17. locationQ: '',
  18. locationZ: '',
  19. submitdataenrr: '',
  20. cityDisplay: 'none',
  21. resetButton: false,
  22. },
  23. // 触底事件
  24. // 动画二
  25. donghua2: function () {
  26. height = '0vh';
  27. var animation = wx.createAnimation({
  28. transformOrigin: "50% 50%",
  29. duration: 500,
  30. timingFunction: "ease",
  31. delay: 0
  32. })
  33. animation.rotate(180).scale(0.1, 0.1).height(height).step();
  34. this.setData({
  35. animationData: animation.export(),
  36. })
  37. },
  38. // 动画一
  39. donghua: function () {
  40. var animation = wx.createAnimation({
  41. transformOrigin: "50% 50%",
  42. duration: 500,
  43. timingFunction: "ease",
  44. delay: 0
  45. })
  46. setTimeout(function () {
  47. animation.height(height).step()
  48. this.setData({
  49. animationData: animation.export()
  50. })
  51. }.bind(this), 0);
  52. },
  53. //点击添加地址
  54. bindcityselecttrueQ: function (e) {
  55. console.log(1)
  56. locationQname = e.target.dataset.locationq;
  57. qZ = 'q';
  58. this.location(e)
  59. },
  60. bindcityselecttrueZ: function (e) {
  61. console.log(2)
  62. locationZname = e.target.dataset.locationz;
  63. qZ = 'z';
  64. this.location()
  65. },
  66. location: function () {
  67. console.log(app.data.provinc)
  68. height = "100vh"
  69. this.donghua();
  70. location = '';
  71. this.setData({
  72. city_select: true,
  73. provinces: app.data.province,
  74. citys: '',
  75. areas: '',
  76. carLengthType: false,
  77. height: "100vh",
  78. })
  79. },
  80. // 返回上一级
  81. resetBottom: function () {
  82. if (this.data.citys.length == 0) {
  83. this.setData({
  84. provinces: '',
  85. citys: app.data.city[shengIndex].cities,
  86. areas: '',
  87. })
  88. } else {
  89. this.setData({
  90. provinces: app.data.province,
  91. citys: '',
  92. areas: '',
  93. })
  94. }
  95. },
  96. // 点击省
  97. provincesBottom: function (e) {
  98. shengIndex = e.target.dataset.shengname;
  99. this.setData({
  100. sheng: this.data.provinces[shengIndex],
  101. provinces: '',
  102. citys: app.data.city[shengIndex].cities,
  103. resetButton: true,
  104. })
  105. },
  106. // 市
  107. citysBottom: function (e) {
  108. shiIndex = e.target.dataset.shiname;
  109. this.setData({
  110. provinces: '',
  111. citys: '',
  112. areas: app.data.area[shengIndex][shiIndex].areaes
  113. })
  114. },
  115. // 县
  116. areasBottom: function (e) {
  117. xianIndex = e.target.dataset.xianname;
  118. var sheng = app.data.province[shengIndex];
  119. var shi = app.data.city[shengIndex].cities[shiIndex];
  120. var xian = app.data.area[shengIndex][shiIndex].areaes[xianIndex];
  121. location = shi + xian;
  122. this.donghua2();
  123. console.log(location);
  124. if (qZ == 'q') {
  125. if (locationQname == 1) { this.setData({ qiDian1: location }) }
  126. if (locationQname == 2) { this.setData({ qiDian2: location }) }
  127. if (locationQname == 3) { this.setData({ qiDian3: location }) }
  128. if (locationQname == 4) { this.setData({ qiDian4: location }) }
  129. } else {
  130. if (locationZname == 1) { this.setData({ zhongDian1: location }) }
  131. if (locationZname == 2) { this.setData({ zhongDian2: location }) }
  132. if (locationZname == 3) { this.setData({ zhongDian3: location }) }
  133. if (locationZname == 4) { this.setData({ zhongDian4: location }) }
  134. }
  135. this.setData({
  136. back: shi + xian,
  137. city_select: false,
  138. height: 0,
  139. item:location
  140. })
  141. },
  142. })

wxml


  1. class="section" style='margin-bottom:30rpx;background-color:#fbf9fe;'>
  2. class="selectLocation">
  3. class="locationLi">
  4. class='qiDian ' >起点
  5. class="locationD">-
  6. class='qiDian ' >终点
  7. class="selectLocation">
  8. class="locationLi">1.
  9. type="text" data-locationq='1' class='qiDian bc_white' name="locationq" bindtap='bindcityselecttrueQ' value="{{qiDian1}}"/>
  10. class="locationD">-
  11. type="text" data-locationz='1' class='zhongDian bc_white' name="locationz" bindtap='bindcityselecttrueZ'value="{{zhongDian1}}"/>
  12. class="selectLocation">
  13. class="locationLi">2.
  14. type="text" data-locationq='2' class='qiDian bc_white' name="locationq2" bindtap='bindcityselecttrueQ'value="{{qiDian2}}"/>
  15. class="locationD">-
  16. type="text" data-locationz='2' class='zhongDian bc_white' name="locationz2" bindtap='bindcityselecttrueZ'value="{{zhongDian2}}"/>
  17. class="selectLocation">
  18. class="locationLi ">3.
  19. type="text" data-locationq='3' class='qiDian bc_white' name="locationq3" bindtap='bindcityselecttrueQ'value="{{qiDian3}}"/>
  20. class="locationD">-
  21. type="text" data-locationz='3' class='zhongDian bc_white' name="locationz3" bindtap='bindcityselecttrueZ'value="{{zhongDian3}}"/>
  22. class="selectLocation">
  23. class="locationLi">4.
  24. type="text" data-locationq='4' class='qiDian bc_white' name="locationq4" bindtap='bindcityselecttrueQ'value="{{qiDian4}}"/>
  25. class="locationD">-
  26. type="text" data-locationz='4' class='zhongDian bc_white' name="locationz4" bindtap='bindcityselecttrueZ'value="{{zhongDian4}}"/>
  27. scroll-y="true" animation="{{animationData}}" style="height:0vh;overflow: hidden;" class="indexFlexCenter ">
  28. wx:if='{{city_select}}'>
  29. class='indexFlexBoxTitle' >
  30. 当前所在省:{{sheng}}
  31. class='indexFlexBoxTitleReset lan' wx:if='{{resetButton}}' bindtap="resetBottom">返回上一级
  32. class="indexFlexBox" style="line-height:13px;text-align:left;">
  33. wx:for="{{provinces}}" hover='true' hover-class="hoverButton" hover-start-time='25' wx:for-index="i" data-shengname="{{i}}" bindtap="provincesBottom">
  34. {{item}}
  35. wx:for="{{citys}}" hover='true' hover-class="hoverButton" hover-start-time='25' wx:for-index="i" data-shiname="{{i}}" bindtap="citysBottom">
  36. {{item}}
  37. wx:for="{{areas}}" hover='true' hover-class="hoverButton" hover-start-time='25' wx:for-index="i" data-xianname="{{i}}" bindtap="areasBottom">
  38. {{item}}

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

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

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注