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

迈不过友情╰ 2022-11-15 14:12 277阅读 0赞

## 项目需求 ##

需要调用后台传过来的地址，存储地址时存的是地址的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

### 使用 ###

wxml

// 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
        })
      }
    })

## 效果 ##

![在这里插入图片描述][20210401192017269.gif]

> 参考文档  
> [picker-view | 微信开放文档][picker-view _]  
> [picker-view-column | 微信开放文档][picker-view-column _]

[20210401192017269.gif]: /images/20221022/8d59c9259e634ddcb12c99dbc3e64728.png
[picker-view _]: https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
[picker-view-column _]: https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html