撸个微信小程序的省市区选择器
微信小程序虽然已经有现成的封装好的省市区选择器给开发者使用,然鹅不幸的是,微信地址库的数据和公司用的地址库数据很难一一对上,那就只能撸起袖子自己写个组件了。
最终效果
(此图片来源于网络,如有侵权,请联系删除! )
思维导图
(此图片来源于网络,如有侵权,请联系删除! )
主要代码
组件 region-picker.js
/* region-picker.js */ import area from '本地 json 数据'; Component({ properties: { showRegion: { type: Boolean, observer: function(newVal, oldVal) { this.setData({ dialog: newVal, }); }, }, regionValue: { type: Array, value: [], observer: function(newVal, oldVal) { if (newVal.length > 0) { let select = -1; for (let i = newVal.length - 1; i >= 0; i--) { if (newVal[i].id !== '') { select = i; break; } } // 除最低级别区(select = 2)以外,需要获取当前级别下一级的数据 this.setData({ ['region.tabs']: newVal, ['region.select']: select < 2 ? select+1 : select, }, () => { this.setData({ area: this.getChildArea(select < 2 ? select+1 : select), }); }); } }, }, }, data: { dialog: false, area: area, region: { tabs: [ { name: '请选择', id: '', }, { name: '请选择', id: '', }, { name: '请选择', id: '', }, ], select: 0, }, }, methods: { // 关闭 picker 触发的方法 emitHideRegion: function() { if (this.data.region.tabs[2].id === '') { wx.showToast({ title: '请选择所在地', icon: 'none', duration: 2000, }); return false; } let myEventDetail = {}; // detail对象,提供给事件监听函数 let myEventOption = {}; // 触发事件的选项 this.setData({ dialog: !this.data.dialog, }); myEventDetail = { showRegion: this.data.dialog, regionValue: this.data.region.tabs, }; this.triggerEvent('myevent', myEventDetail, myEventOption); }, bindRegionChange: function(e) { // 获取当前选中项的name和id并赋值给data中的数据 let id ='region.tabs[' + this.data.region.select + '].id'; let name ='region.tabs[' + this.data.region.select + '].name'; this.setData({ [id]: e.target.dataset.id, [name]: e.target.dataset.name, }); // 除了三级以外的需要获取对应子选项 if (this.data.region.select < 2) { this.setData({ ['region.select']: ++this.data.region.select, }, () => { // 获取子选项 this.setData({ area: this.getChildArea(this.data.region.select), }); }); } else { // 三级选项选择完毕关闭省市区选择器 this.emitHideRegion(); } }, getChildArea: function(level) { let _id = ''; // 默认取完整的数据 let _area = area; // 根据层级取当前层级下的数据 for (let i = 0; i < level; i++) { _id = this.data.region.tabs[i].id; for (let j = 0; j < _area.length; j++) { if (_area[j].id === _id) { _area = _area[j]._child; break; } } } return _area; }, // 省市区tab切换 changeRegionLevel: function(e) { let level = e.target.dataset.level; // 三级选项的tab点击无效果 if (level === 2) return false; // 当前选中tab和级别小于当前选中tab的状态都置为初始化状态 for (let i = level; i < 3; i++) { let string = 'region.tabs['+ i +']'; this.setData({ [string]: { name: '请选择', id: '', }, }); } this.setData({ ['region.select']: level, }); this.setData({ area: this.getChildArea(level), }); }, }, }); 复制代码
组件 region-picker.wxml
/* region-picker.wxml */ <view class="free-dialog {{dialog ? 'free-dialog--show' : ''}}"> <view class="free-dialog__mask" bindtap="emitHideRegion"></view> <view class="free-dialog__container"> <view class="free-dialog__container__header"> <view>选择所在地区</view> <image src="自行替换36rpx*36rpx的x图标" class="close" bindtap="emitHideRegion"> </image> </view> <view class="free-dialog__container__content"> <view class="free-content {{isIphoneX ? 'ipx' : ''}}"> <view class="free-content__tabs"> <view class="free-content__tabs__tab {{region.select === index ? 'select' : ''}}" wx:for="{{region.tabs}}" wx:key="{{index}}" wx:if="{{index <= region.select}}" data-level="{{index}}" bindtap="changeRegionLevel"> {{item.name}} </view> </view> <scroll-view scroll-y class="free-content__scroll"> <view class="free-content__scroll__item" wx:for="{{area}}" wx:key="id" data-id="{{item.id}}" data-name="{{item.name}}" bindtap="bindRegionChange"> {{item.name}} </view> </scroll-view> </view> </view> </view> </view> 复制代码
组件 region-picker.wxss
/* region-picker.wxss */ .free-dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.7); display: none; } .free-dialog__container { position: fixed; left: 0; bottom: 0; width: 100%; background: #F1F1F1; transform: translateY(150%); transition: all 0.4s ease; z-index: 11; } .free-dialog--show .free-dialog__container { transform: translateY(0); } .free-dialog--show .free-dialog__mask { display: block; } .free-dialog__container__header { padding: 24rpx 30rpx; text-align: center; background: white; } .free-dialog__container__header .close { position:absolute; right:30rpx; top:31rpx; width:36rpx; height:36rpx; } .free-content { background: white; border-bottom: 40rpx solid white; } .free-content.ipx { border-bottom: 72rpx solid white; } .free-content__tabs__tab { display: inline-block; padding: 12rpx 46rpx; font-size: 32rpx; color: #333; border-bottom: 4rpx solid white; } .free-content__tabs__tab.select { border-color: #FA263C; } .free-content__scroll { padding: 0 40rpx; height: 480rpx; box-sizing: border-box; } .free-content__scroll__item { margin-top: 40rpx; height: 40rpx; line-height: 40rpx; font-size: 28rpx; color: #333; } 复制代码
页面的 WXML
/* 页面的 WXML */ <view bindtap="chooseRegion">请选择</view> <view> <text wx:if="{{regionValue[0].id}}">{{regionValue[0].name}}</text> <text wx:if="{{regionValue[1].id}}">{{regionValue[1].name}}</text> <text wx:if="{{regionValue[2].id}}">{{regionValue[2].name}}</text> </view> ... <region-picker region-value="{{regionValue}}" show-region="{{showRegion}}" bind:myevent="emitHideRegion"> </region-picker> 复制代码
页面的 js
/* 页面的 js */ Page({ data: { regionValue: [], showRegion: false, }, chooseRegion: function() { this.setData({ showRegion: true, }); }, emitHideRegion: function(e) { this.setData({ showRegion: e.detail.showRegion, regionValue: e.detail.regionValue, }); }, }); 复制代码
总结
需要注意下的是,最低级别区级别是个特殊的临界点,因为区后面没有更低级别,所以不需要获取下一级别的数据,也不能触发 tab 事件。
然后父组件传递子自组件的值,如果后期父组件变更了这个值,子组件可以在响应函数 observer 里监听到值的变化。
我本次使用的本地省市区 JSON 数据格式为:
/* area.js */ module.exports = [{ id: '...', name: '...', _child: [{ id: '...', name: '...', _child: [{ id: '...', name: '...' }, ...] }, ...] }, ...] 复制代码
写的不是特别好,也希望能帮助到有需要的人吧,有疑问戳微信小程序官方文档,没有什么比官方文档更靠谱的了!
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
【小程序源码网资源版权风险说明】:
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 撸个微信小程序的省市区选择器
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 撸个微信小程序的省市区选择器