微信小程序自定義地址組件

更新時間：2022年07月01日 14:51:19 作者：是拾玖不是十九

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義地址組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義地址組件的具體代碼，供大家參考，具體內(nèi)容如下

項目需求

需要調(diào)用后臺傳過來的地址，存儲地址時存的是地址的id，所以市面上的地址組件均不符合我的需求，只能自定義一個。

技術(shù)選取

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
? ? },
? ? // 初始省市區(qū)數(shù)組
? ? initRegions: {
? ? ? type: Array,
? ? ? value: []
? ? }
? },

? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 當(dāng)前省市區(qū) ?0 省 ?1 市 ?2 區(qū)
? ? regions: [0, 0, 0],
? ? // 滑動選擇器之前的省市區(qū)信息
? ? oldRegions: [0, 0, 0],
? ? // 上一次選中的省市區(qū)信息
? ? prevRegions: [0, 0, 0],
? ? // 省列表
? ? provinces: [],
? ? // 市列表
? ? citys: [],
? ? // 區(qū)列表
? ? areas: [],
? ? // 省
? ? province: {
? ? ? name: '',
? ? ? code: ''
? ? },
? ? // 市
? ? city: {
? ? ? name: '',
? ? ? code: ''
? ? },
? ? // 區(qū)
? ? 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) {
? ? ? ? // 設(shè)置省
? ? ? ? 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
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? // 設(shè)置市
? ? ? ? ? ? ? ? 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
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? // 設(shè)置區(qū)
? ? ? ? ? ? ? ? ? ? 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:
? ? ? ? ? ? ? // 區(qū)改變
? ? ? ? ? ? ? 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;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? },
? ? /**
? ? ?* 初始化市區(qū)列表
? ? ?*/
? ? 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
? ? ? ? ? })
? ? ? ? ? // 獲取區(qū)
? ? ? ? ? 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>

js

// pages/settled/settled.js
const app = getApp();
Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? // 選中的省市區(qū)id數(shù)組
? ? initRegions: [],
? ? // 常住地址
? ? region: '',
? ? // 展示控制
? ? show: {
? ? ? picker: false, // 地址選擇器
? ? }
? },

? /**
? ?* 監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {
? ? wx.removeStorageSync('initRegions');
? },
? /**
? ?* 展示常住地址選擇器
? ?*/
? showPicker() {
? ? this.setData({
? ? ? ['show.picker']: true
? ? })
? },

? /**
? ?* 選擇常住地址
? ?*/
? chooseRegion(e) {
? ? this.setData({
? ? ? initRegions: e.detail.initRegions,
? ? ? region: e.detail.region
? ? })
? }
})

效果