wepy-小程序 仿京东地址选择器组件

WePY简介

Wepy是支持微信小程序组件化开发的框架，开发风格接近Vue.js，支持使用第三方npm资源。
WePY官网地址
微信小程序文档

效果图

代码

selectaddress.wpy

<style>
    .select-area {
        background: rgba(0,0,0,0.4);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
    }
    .select-area-hide {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 640rpx;
        width: 100%;
    }
    .select-area-head {
        width: 100%;
        height: 140rpx;
        background: white;
        position: absolute;
        bottom: 500rpx;
    }
    .select-area-head-title {
        width: 100%;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        color: black;
        font-size: 34rpx;
    }
    .select-area-head-tab {
        display: flex;
        margin-top: 0;
        width: 100%;
        height: 59rpx;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1rpx solid #EEEEEE;
    }
    .select-area-head-tab-item {
        margin-left: 30rpx;
        height: 60rpx;
        line-height: 60rpx;
        font-size: 30rpx;
    }
    .active {
        color: #FD8069;
        border-bottom: 1rpx solid #FD8069;
    }
    .select-area-body {
        position: absolute;
        bottom: 0;
        height: 500rpx;
        background: white;
        width: 100%;
    }
    .select-area-body-item {
        width: 100%;
        height: 499rpx;
    }
    .address-item {
        width: 400rpx;
        margin-left: 30rpx;
        height: 80rpx;
        font-size: 30rpx;
        color: #999999;
        line-height: 80rpx;
        text-align: left;
    }
</style>
<template>
    <view class="select-area" hidden="{
  {!showcomp}}">
        <view class="select-area-hide" @tap="hideSelectArea"></view>
        <view class="select-area-head">
            <view class="select-area-head-title">请选择</view>
            <view class="select-area-head-tab">
                <view class="select-area-head-tab-item {
  {actives[0]}}" @tap="itemChange(0)">{
  {addressItemArr[0]}}</view>
                <view class="select-area-head-tab-item {
  {actives[1]}}" @tap="itemChange(1)">{
  {addressItemArr[1]}}</view>
                <view class="select-area-head-tab-item {
  {actives[2]}}" @tap="itemChange(2)">{
  {addressItemArr[2]}}</view>
            </view>
        </view>
        <swiper class="select-area-body" current="{
  {currentItem}}" duration="{
  {duration}}" @change="swiperChange">
            <swiper-item>
                <scroll-view scroll-