微信小程序自定义地址组件

项目需求

需要调用后台传过来的地址，存储地址时存的是地址的id，所以市面上的地址组件均不符合我的需求，只能自定义一个。

技术选取

picker-view和picker-view-column

核心代码

region.wxml

<!--地址选择器-->
<view wx:if="{{show}}" class="region-picker" catchtap="hidePicker"><view class="picker-handle" catchtap><view class="picker-cancel" catchtap="hidePicker">取消</view><view class="picker-confirm" catchtap="chooseRegion">确定</view></view><picker-view class="picker" value="{{regions}}" bindchange="changePicker" catchtap><picker-view-column><view wx:for="{{provinces}}" wx:key="code" class="region-province">{{item.name}}</view></picker-view-column><picker-view-column><view wx:for="{{citys}}" wx:key="code" class="region-city">{{item.name}}</view></picker-view-column><picker-view-column><view wx:for="{{areas}}" wx:key="code" class="region-area">{{item.name}}</view></picker-view-column></picker-view>
</view>

region.less

.region-picker {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 2;background: rgba(0, 0, 0, 0.6);.picker-handle {width: 100%;height: 72rpx;display: flex;justify-content: space-between;position: absolute;bottom: 500rpx;left: 0;background: #fff;box-sizing: border-box;padding: 0 30rpx;line-height: 72rpx;box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.6);.picker-cancel,.picker-confirm {font-size: 30rpx;}.picker-cancel {color: #9E9E9E;}.picker-confirm {color: #018A56;}}.picker {width: 100%;height: 500rpx;position: absolute;bottom: 0;left: 0;background: #fff;.region-province,.region-city,.region-area {text-align: center;font-size: 24rpx;}}
}

region.js

const app = getApp();
Component({/*** 组件的属性列表*/properties: {// 是否展示选择器showPicker: {type: Boolean,value: false},// 初始省市区数组initRegions: {type: Array,value: []}},/*** 组件的初始数据*/data: {// 当前省市区  0 省  1 市  2 区regions: [0, 0, 0],// 滑动选择器之前的省市区信息oldRegions: [0, 0, 0],// 上一次选中的省市区信息prevRegions: [0, 0, 0],// 省列表provinces: [],// 市列表citys: [],// 区列表areas: [],// 省province: {name: '',code: ''},// 市city: {name: '',code: ''},// 区area: {name: '',code: ''},// 是否展示show: false},lifetimes: {attached: function () {}},observers: {'showPicker': function (value) {if (value) {this.setData({show: true})this.initPage();} else {this.setData({show: false})}}},/*** 组件的方法列表*/methods: {// 初始化页面initPage() {let regions = wx.getStorageSync('initRegions') || '';if (regions) {// 设置省app.api.region.index().then(res1 => {if (res1.code === 2000) {let data1 = res1.data;this.setData({provinces: data1.map(item => {return {name: item.name,code: item.rid}})})this.data.provinces.forEach((item, index) => {if (item.code === regions[0]) {this.setData({['regions[0]']: index,['oldRegions[0]']: index,['prevRegions[0]']: index,province: {name: item.name,code: item.code}})// 设置市app.api.region.index({parent_id: regions[0]}).then(async res2 => {if (res2.code === 2000) {res2.data.forEach((item, index) => {this.setData({[`citys[${this.data.citys.length}]`]: {name: item.name,code: item.rid}})if (item.rid === regions[1]) {this.setData({['regions[1]']: index,['oldRegions[1]']: index,['prevRegions[1]']: index,city: {name: item.name,code: item.rid}})}})// 设置区await app.api.region.index({parent_id: regions[1]}).then(res3 => {if (res3.code === 2000) {res3.data.forEach((item, index) => {this.setData({[`areas[${this.data.areas.length}]`]: {name: item.name,code: item.rid}})if (item.rid === regions[2]) {this.setData({['regions[2]']: index,['oldRegions[2]']: index,['prevRegions[2]']: index,area: {name: item.name,code: item.rid},})}})} else if (res3.code === 2001) {app.deletetoken();} else {app.toast(res3.msg, 'none');}})} else if (res2.code === 2001) {app.deletetoken();} else {app.toast(res2.msg, 'none');}})}})} else if (res.code === 2001) {app.deletetoken();} else {app.toast(res.msg, 'none');}})} else {this.getProvinces();}},/*** 获取省*/async getProvinces() {await app.api.region.index().then(res => {if (res.code === 2000) {let data = res.data;let provinceList = data.map(item => {return {name: item.name,code: item.rid}})this.setData({provinces: provinceList})this.initCitysAreas();} else if (res.code === 2001) {app.deletetoken();} else {app.toast(res.msg, 'none');}})},/*** 省改变* @param {number} code  省id */changeProvince(code) {app.api.region.index({parent_id: code}).then(res1 => {if (res1.code === 2000) {let data1 = res1.data;let cityList = data1.map(item => {return {name: item.name,code: item.rid}})this.setData({citys: cityList})app.api.region.index({parent_id: this.data.citys[0].code}).then(res2 => {if (res2.code === 2000) {let data2 = res2.data;let areaList = data2.map(item => {return {name: item.name,code: item.rid}})this.setData({areas: areaList})} else if (res2.code === 2001) {app.deletetoken();} else {app.toast(res2.msg, 'none');}})} else if (res1.code === 2001) {app.deletetoken();} else {app.toast(res1.msg, 'none');}})},/*** 市改变* @param {number} code 市id*/changeCity(code) {app.api.region.index({parent_id: code}).then(res => {if (res.code === 2000) {let data = res.data;let areaList = data.map(item => {return {name: item.name,code: item.rid}})this.setData({areas: areaList})} else if (res.code === 2001) {app.deletetoken();} else {app.toast(res.msg, 'none');}})},/*** 改变picker*/changePicker(e) {let newRegion = e.detail.value;for (let i = 0; i < newRegion.length; i++) {// 找到改变的那一列if (newRegion[i] !== this.data.oldRegions[i]) {switch (i + 1) {case 1:// 省改变了this.changeProvince(this.data.provinces[newRegion[i]].code)this.setData({regions: [newRegion[i], 0, 0],oldRegions: [newRegion[i], 0, 0]})newRegion = [newRegion[0], 0, 0]break;case 2:// 市改变了this.changeCity(this.data.citys[newRegion[i]].code)this.setData({regions: [this.data.oldRegions[0], newRegion[i], 0],oldRegions: [this.data.oldRegions[0], newRegion[i], 0]})break;case 3:// 区改变this.setData({regions: [this.data.oldRegions[0], this.data.oldRegions[1], newRegion[i]],oldRegions: [this.data.oldRegions[0], this.data.oldRegions[1], newRegion[i]]})break;}}}},/*** 初始化市区列表*/initCitysAreas() {// 获取市app.api.region.index({parent_id: this.data.provinces[this.data.regions[0]].code}).then(res1 => {if (res1.code === 2000) {let data1 = res1.data;let cityList = data1.map(item => {return {name: item.name,code: item.rid}})this.setData({citys: cityList})// 获取区app.api.region.index({parent_id: this.data.citys[this.data.regions[1]].code}).then(res2 => {if (res2.code === 2000) {let data2 = res2.data;let areaList = data2.map(item => {return {name: item.name,code: item.rid}})this.setData({areas: areaList,regions: this.data.regions})} else if (res2.code === 2001) {app.deletetoken();} else {app.toast(res2.msg, 'none');}})} else if (res1.code === 2001) {app.deletetoken();} else {app.toast(res1.msg, 'none');}})},/*** 隐藏选择器*/hidePicker() {this.setData({show: false,regions: this.data.prevRegions,oldRegions: this.data.prevRegions})},/*** 确定选择地址*/chooseRegion() {this.setData({province: {name: this.data.provinces[this.data.regions[0]].name,code: this.data.provinces[this.data.regions[0]].code},city: {name: this.data.citys[this.data.regions[1]].name,code: this.data.citys[this.data.regions[1]].code},area: {name: this.data.areas[this.data.regions[2]].name,code: this.data.areas[this.data.regions[2]].code},prevRegions: this.data.regions,})this.triggerEvent("chooseRegion", {initRegions: [this.data.province.code, this.data.city.code, this.data.area.code],region: this.data.province.name + ' ' + this.data.city.name + ' ' + this.data.area.name})wx.setStorageSync('initRegions', [this.data.province.code, this.data.city.code, this.data.area.code]);this.hidePicker();},}
})

使用

wxml

<region showPicker="{{show.picker}}" initRegions="{{initRegions}}" bind:chooseRegion="chooseRegion"></region>

// pages/settled/settled.js
const app = getApp();
Page({/*** 页面的初始数据*/data: {// 选中的省市区id数组initRegions: [],// 常住地址region: '',// 展示控制show: {picker: false, // 地址选择器}},/*** 监听页面卸载*/onUnload: function() {wx.removeStorageSync('initRegions');},/*** 展示常住地址选择器*/showPicker() {this.setData({['show.picker']: true})},/*** 选择常住地址*/chooseRegion(e) {this.setData({initRegions: e.detail.initRegions,region: e.detail.region})}
})

效果

参考文档
picker-view | 微信开放文档
picker-view-column | 微信开放文档

微信小程序自定义地址组件相关推荐

微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...
微信小程序自定义日历组件
微信小程序自定义日历组件 wxml <view class="maskWrap" bindtap="close"></view>< ...
微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放
小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
微信小程序自定义倒计时组件及注意事项
倒计时功能实现:微信小程序实现倒计时功能(超简单)_洛潆的博客-CSDN博客_微信小程序倒计时功能由于要在多个页面使用倒计时功能,在每个页面都重新写一遍就会很麻烦,所以可以把它封装为自定义组件,最终 ...
微信小程序自定义弹窗组件
看微信小程序的文档觉得说的不是很清楚.于是,找到这篇文章,觉得挺好看.大家可以看看: https://www.cnblogs.com/demod... 补充: 还需要在popup.json文件添加一句 ...
微信小程序自定义波浪组件
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的 ...
微信小程序自定义弹窗组件 action-sheet
最近公司在开发短剧小程序,短剧的剧集展示交互需要用到组件 action-sheet,小程序自带的有这个组件,但是这个组件支持的功能比较单一,相当于是一个选择表一样,不能自定义很多内容,只能自定义一个组 ...
微信小程序-自定义导航组件
一.如何自定义组件从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在 ...
微信小程序自定义map组件标记点markers（兼容苹果和安卓）
先来看实现效果图(uniapp实现,代码在下面) 在图片中我们看到标记点有以下需求: 1.标记点是自定义的,并不是微信默认 2.标记点的自定义icon有四种形式 3.数字是动态的 4.数字颜色有两种形 ...

微信小程序自定义地址组件

项目需求

技术选取

核心代码

使用

效果

微信小程序自定义地址组件相关推荐

最新文章

热门文章