小程序公共组件之地址选择五级联动

 1 <!--components/area-select.wxmlby:张涛20180308-->
 2 <view class="area-select-bg" wx:if="{{isShow}}">
 3     <view class="area-select-box">
 4         <view class="area-select-title">
 5             <view catchtap=‘_cancelEvent‘ class="select-off">取消</view>
 6             地址选择
 7             <view catchtap=‘_confirmEvent‘ class="select-on">确认</view>
 8         </view>
 9         <view class="area-select-btn">
10             <view class="area-select-btn-item" wx:if="{{selectNum>0}}" id="1" bindtap="tabBtn">{{provinceName}}</view>
11             <view class="area-select-btn-item" wx:if="{{selectNum>1}}" id="2" bindtap="tabBtn">{{cityName}}</view>
12             <view class="area-select-btn-item" wx:if="{{selectNum>2}}" id="3" bindtap="tabBtn">{{areaName}}</view>
13             <view class="area-select-btn-item" wx:if="{{selectNum>3}}" id="4" bindtap="tabBtn">{{addressName}}</view>
14             <view class="area-select-btn-item" wx:if="{{selectNum>=4}}" id="5" bindtap="tabBtn">{{communityName}}</view>
15             <view class="area-select-btn-active area-select-btn-item" wx:if="{{isHaveSubset}}">请选择</view>
16         </view>
17         <view class="area-select-show">
18             <scroll-view scroll-y style="height:660rpx;">
19                 <block wx:for="{{list}}" wx:key="">
20                     <view class="area-select-show-item" data-item="{{item}}" bindtap="selectBtn">
21                         <view class="area-select-show-item-name" style="color:{{item.checked?‘#ea8842‘:‘‘}}">{{item.name}}</view>
22                         <image class="area-select-show-item-checked" wx:if="{{item.checked}}" src="/img/select-on.png"></image>
23                     </view>
24                 </block>
25             </scroll-view>
26         </view>
27     </view>
28 </view>
  1 // components/area-select.js   by:张涛20180308
  2 const util = require(‘../../utils/request.js‘);
  3 Component({
  4   /**
  5    * 组件的属性列表
  6    */
  7   properties: {
  8
  9   },
 10
 11   /**
 12    * 组件的初始数据
 13    */
 14   data: {
 15     isShow:false,
 16     // 公用列表数据
 17     list:[],
 18     // 获取的列表数组
 19     area:{
 20       province:[],
 21       city:[],
 22       area:[],
 23       address:[],
 24       community:[]
 25     },
 26     // 地址code
 27     provinceCode:‘‘,
 28     cityCode:‘‘,
 29     areaCode:‘‘,
 30     addressCode:‘‘,
 31     // 选择按钮
 32     selectNum:0,
 33     // 地址名称
 34     provinceName:‘‘,
 35     cityName:‘‘,
 36     areaName:‘‘,
 37     addressName:‘‘,
 38     communityName:‘‘,
 39     // 判断是否还有下一级
 40     isHaveSubset:true,
 41     // 外部使用的数据包，如需使用地址数据请，在外部定义后直接调用this.data.addressObj即可
 42     addressObj:{
 43       province:‘‘,
 44       city:‘‘,
 45       area:‘‘,
 46       address:‘‘,
 47       community:‘‘
 48     }
 49   },
 50   /*
 51   *组件生命周期函数，在组件实例进入页面节点树时执行
 52   */
 53   attached:function(){
 54     this.getProvince();
 55   },
 56   /**
 57    * 组件的方法列表
 58    */
 59   methods: {
 60     //隐藏弹框
 61     hideDialog(){
 62       this.setData({
 63         isShow: !this.data.isShow
 64       })
 65     },
 66     //展示弹框
 67     showDialog(){
 68       this.setData({
 69         isShow: !this.data.isShow
 70       })
 71     },
 72     /*
 73      * 内部私有方法建议以下划线开头
 74      * triggerEvent 用于触发事件
 75      */
 76     _cancelEvent(){
 77       //触发取消回调
 78       this.triggerEvent("cancelEvent");
 79     },
 80     _confirmEvent(){
 81       // 判断地址是否选择完毕
 82       if (this.data.isHaveSubset) {
 83         return false;
 84       }
 85       //触发成功回调
 86       this.triggerEvent("confirmEvent");
 87     },
 88     /*
 89      * 公有方法
 90      */
 91      // 地址三级请求函数
 92      // 省
 93      getProvince(){
 94       var _this=this;
 95       util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.provinceCode},function(res){
 96         // 为所有的省添加checked
 97         res.data.result.forEach(function(item){
 98           item.checked=false;
 99         })
100         _this.data.area.province=res.data.result;
101         _this.setData({
102           area:_this.data.area,
103           list:res.data.result
104         })
105       })
106      },
107     // 市
108      getCity(){
109       var _this=this;
110       util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.provinceCode},function(res){
111         // 为所有的省添加checked
112           res.data.result.forEach(function(item){
113             item.checked=false;
114           })
115           _this.data.area.city=res.data.result;
116           _this.setData({
117             area:_this.data.area,
118             list:res.data.result
119           })
120       })
121      },
122      // 区
123      getArea(){
124       var _this=this;
125       util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.cityCode},function(res){
126         // 为所有的省添加checked
127           res.data.result.forEach(function(item){
128             item.checked=false;
129           })
130         _this.data.area.area=res.data.result;
131         _this.setData({
132             area:_this.data.area,
133             list:res.data.result
134         })
135       })
136      },
137      // 街道
138      getAddress(){
139       var _this=this;
140       util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.areaCode},function(res){
141         // 为所有的省添加checked
142           res.data.result.forEach(function(item){
143             item.checked=false;
144           })
145         _this.data.area.address=res.data.result;
146         _this.setData({
147             area:_this.data.area,
148             list:res.data.result
149         })
150       })
151      },
152      // 小区
153      getCommunity(){
154       var _this=this;
155       util.POST(‘/mobile/common/getArea‘,‘‘,{‘parentCode‘:this.data.addressCode},function(res){
156         // 为所有的省添加checked
157           res.data.result.forEach(function(item){
158             item.checked=false;
159           })
160         _this.data.area.community=res.data.result;
161         _this.setData({
162             area:_this.data.area,
163             list:res.data.result
164         })
165       })
166      },
167      // 点击tab进行切换
168      tabBtn(event){
169       // 判断点击的级别
170       if (event.currentTarget.id==1) {
171         // 更新列表
172         this.data.list=this.data.area.province;
173         // 更新点击框
174         this.data.selectNum=0;
175       }else if (event.currentTarget.id==2) {
176         this.data.list=this.data.area.city;
177         this.data.selectNum=1;
178       }else if (event.currentTarget.id==3) {
179         this.data.list=this.data.area.area;
180         this.data.selectNum=2;
181       }else if (event.currentTarget.id==4) {
182         this.data.list=this.data.area.address;
183         this.data.selectNum=3;
184       }else if (event.currentTarget.id==5) {
185         this.data.list=this.data.area.community;
186         this.data.selectNum=4;
187       }
188       this.setData({
189         list:this.data.list,
190         selectNum:this.data.selectNum,
191         isHaveSubset:this.data.list[0]?true:false
192       })
193      },
194      // 点击地址进行选择处理
195      selectBtn(event){
196       // 判断当前的点击区域selectNum值 0：省。1：市。2：区。3：街道。
197       if (this.data.selectNum==0) {
198         // 保存信息
199         this.data.area.province.forEach(function(item){
200           if (item.code==event.currentTarget.dataset.item.code) {
201             item.checked=true;
202           }else{
203             item.checked=false;
204           }
205         })
206         this.data.selectNum=1;
207         this.setData({
208           provinceCode:event.currentTarget.dataset.item.code,
209           area:this.data.area,
210           selectNum:this.data.selectNum,
211           provinceName:event.currentTarget.dataset.item.name,
212           list:this.data.area.province,
213           isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false
214         })
215         this.getCity();
216       }
217       // 市
218       else if (this.data.selectNum==1) {
219         // 保存信息
220         this.data.area.city.forEach(function(item){
221           if (item.code==event.currentTarget.dataset.item.code) {
222             item.checked=true;
223           }else{
224             item.checked=false;
225           }
226         })
227         this.data.selectNum=2;
228         this.setData({
229           cityCode:event.currentTarget.dataset.item.code,
230           area:this.data.area,
231           selectNum:this.data.selectNum,
232           cityName:event.currentTarget.dataset.item.name,
233           list:this.data.area.city,
234           isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false
235         })
236         this.getArea();
237       }else if(this.data.selectNum==2){
238         // 保存信息
239         this.data.area.area.forEach(function(item){
240           if (item.code==event.currentTarget.dataset.item.code) {
241             item.checked=true;
242           }else{
243             item.checked=false;
244           }
245         })
246         this.data.selectNum=3;
247         this.setData({
248           areaCode:event.currentTarget.dataset.item.code,
249           area:this.data.area,
250           selectNum:this.data.selectNum,
251           areaName:event.currentTarget.dataset.item.name,
252           list:this.data.area.area,
253           isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false
254         })
255         this.getAddress();
256
257       }else if (this.data.selectNum==3) {
258          // 保存信息
259         this.data.area.address.forEach(function(item){
260           if (item.code==event.currentTarget.dataset.item.code) {
261             item.checked=true;
262           }else{
263             item.checked=false;
264           }
265         })
266         this.data.selectNum=4;
267         this.setData({
268           addressCode:event.currentTarget.dataset.item.code,
269           area:this.data.area,
270           selectNum:this.data.selectNum,
271           addressName:event.currentTarget.dataset.item.name,
272           list:this.data.area.address,
273           isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false
274         })
275         this.getCommunity();
276       }else if(this.data.selectNum==4){
277          // 保存信息
278         this.data.area.community.forEach(function(item){
279           if (item.code==event.currentTarget.dataset.item.code) {
280             item.checked=true;
281           }else{
282             item.checked=false;
283           }
284         })
285         this.data.selectNum=4;
286         this.setData({
287           communityCode:event.currentTarget.dataset.item.code,
288           selectNum:this.data.selectNum,
289           area:this.data.area,
290           communityName:event.currentTarget.dataset.item.name,
291           list:this.data.area.community,
292           isHaveSubset:event.currentTarget.dataset.item.isHaveSubset?true:false
293         })
294       }
295
296           this.setData({
297             addressObj:{
298               province:{
299                 ‘provinceName‘:this.data.provinceName,
300                 ‘provinceCode‘:this.data.provinceCode
301               },
302               city:{
303                 ‘cityName‘:this.data.cityName,
304                 ‘cityCode‘:this.data.cityCode
305               },
306               area:{
307                 ‘areaName‘:this.data.areaName,
308                 ‘areaCode‘:this.data.areaCode
309               },
310               address:{
311                 ‘addressName‘:this.data.addressName,
312                 ‘addressCode‘:this.data.addressCode
313               },
314               community:{
315                 ‘communityName‘:this.data.communityName,
316                 ‘communityCode‘:this.data.communityCode
317               }
318             }
319           })
320      }
321   }
322 })
323 // 使用方式参照三级联动
 1 /* components/area-select.wxssby:张涛20180308 */
 2 .area-select-bg{width:750rpx;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.5);z-index:11;}
 3 .area-select-box{width:750rpx;height:800rpx;background:white;position:absolute;bottom:0;left:0;}
 4 .area-select-box .area-select-title{width:100%;line-height:80rpx;font-size:30rpx;color:#999999;text-align:center;display:flex;justify-content:space-between;align-items:center;}
 5 .area-select-box .area-select-title .select-off{width:100rpx;line-height:80rpx;}
 6 .area-select-box .area-select-title .select-on{width:100rpx;line-height:80rpx;color:#ea8842;}
 7 .area-select-box .area-select-btn{height:60rpx;display:flex;justify-content:flex-start;align-items:center;position:relative;top:0;left:0;}
 8 .area-select-box .area-select-btn .area-select-btn-item{height:56rpx;border-bottom:4rpx solid white;font-size:28rpx;line-height:56rpx;color:#666666;margin:0 10rpx;}
 9 .area-select-box .area-select-btn .area-select-btn-active{border-bottom:4rpx solid #ea8842;color:#ea8842;}
10 .area-select-box .area-select-btn:after{content:‘‘;width:100%;height:1rpx;background:#e5e5e5;position:absolute;bottom:0;left:0;}
11 .area-select-box .area-select-show{width:750rpx;height:660rpx;}
12 .area-select-box .area-select-show .area-select-show-item{width:auto;padding:0 26rpx;font-size:28rpx;color:#666666;line-height:76rpx;display:flex;justify-content:flex-start;align-items:center;}
13 .area-select-box .area-select-show .area-select-show-item image{width:28rpx;height:20rpx;margin-left:20rpx;}

自定义组件地址组件，使用第三方地址包，可以任意更改样式，生成符合自己喜好的样式，更加符合项目的需要

使用方式如下

首先需要在wxll中引入 （其中的事件绑定名称可以在组件js中进行修改）

<area id="areaSelect" bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"></area>

其次需要在引入组件的js中定义该组件

this.areaSelect=this.selectComponent("#areaSelect");

最后一点一定要在json文件中添加插件的地址

"usingComponents":{"area": "/components/area-select/area-select"}

做完这些后就是在js中绑定好事件

取消事件：_canceEvent

确认事件：_cnnfirmEvent

地址组件的最重要的参数即是 this.areaSelect.data.addressObj

比较重要的一点就是显示地址选择框

this.areaSelect.showDialog();

this.areaSelect.hideDialog();

创作于20180308-by-张涛

原文地址：https://www.cnblogs.com/bluesky1024/p/8528886.html

时间： 2024-09-29 20:01:58

小程序公共组件之地址选择五级联动的相关文章

微信小程序公共组件的引用与控制

思路: 1.在组件wxml文件里实现布局.数据绑定.事件绑定: 2.组件js文件里定义事件,并将文件所有内容作为一个对象export出去:3.在引用的文件引入组件(方式有两种,一个是用include引入,一个是import引入,详情:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html); 4.数据传递.在引用文件对应的js里定义要传递的数据,数据名称与组件wxml文件里的一致: 5.函数映射.在引用文

微信小程序picker组件 - 省市二级联动

微信小程序picker组件自带省市区选择器,但是业务需求需要省市选择器,参考官方demo自己写了一个省市选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange&quo

微信小程序image组件binderror使用例子(对应html、js中的onerror)

官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.gif" onerror="this.src='https:w.chesu

微信小程序image组件开发程序以及相关图片问题参考资料汇总

微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对微信小程序新手还是正在开发中的朋友都是很好的小程序学习资料. 微信小程序image组件必备基础知识: image组件默认宽度300px.高度225px image的属性mode有13种模式,其中4种是缩放模式,9种是裁剪模式 image组件开发教程汇总: 微信小程序自定义组件实现图片单指拖动.双指缩

微信小程序倒计时组件开发

今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) {  var second = that.data.seco

小程序 map组件问题 cover-view问题

使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canvas.camera等组件都是原生组件,层级是最高的,并不能像原生开发那样使用z-index来控制层级. 从1.4.0基础库中增加了一个组件cover-view,用于在map.video.canvas.camera等原生组件上显示基础原生视图. 但是用了cover-view这个组件之后 我又发现了一个问

「小程序JAVA实战」小程序的组件（23）

转自:https://idig8.com/2018/08/11/xiaochengxu-chuji-23/ 开始了解下小程序的组件.源码:https://github.com/limingios/wxProgram.git 中的No.10 组件 多个组件构成一张视图页面>经过样式和布局,页面其实理解成html 组件包含<开始标签></结束标签> 每个组件都包含一些公用属性 官方的阐述 https://developers.weixin.qq.com/miniprogram/d

微信小程序图表组件 wx-f2

摘自 杀个程序猿祭天  https://www.jianshu.com/p/6b9fe45f799f Github地址:https://github.com/antvis/wx-f2 AntV F2地址: AntV F2 微信小程序图表组件 wx-f2,源于 F2,专为移动而生 F2,专为移动而生的可视化解决方案,特为大家提供了微信小程序端版本,体积小巧,性能卓越,底层基于图形语法,可以提供非常丰富的图表类型. 可以使用微信扫描以下二维码先体验一番: image wx-f2 F2 的微信小程序版

iView Weapp微信小程序UI组件库中i-input的使用

iView Weapp微信小程序UI组件库为小程序的开发提供了良好的交互界面,组件库自定义了一系列组件,具有较强的开发友好性,但一些组件与微信小程序原生组件的使用方式有差异. i-input组件是该框架自定义的输入框组件,与微信中input具有相同功能. 在使用i-input输入值时,可以增加其bind:change="myInput" 属性,如: wxml: <i-input type="number" right  maxlength="2&qu