微信小程序实现城市选择效果(超详细)

今天药忘吃喽~ 2023-02-13 08:46 23阅读 0赞

直接进入正题

首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为

region-picker.js

region-picker.json

region-picker.wxml

region-picker.wxss

下面我们来写我们的组件

# region-picker.wxml #

<view class="mask-layer" hidden="{
       {isShowToast}}"></view>
    <view class="goodsdetail" hidden="{
       {isShowToast}}">
      <view class="seclection-title">请选择所在地区</view>
      <image class="close" src="../../img/icon/icon-cancel.png" bindtap="hideGoodsDetail"></image>
      <view class="state">
        <view>中国大陆</view>
        <view class="state-active"></view>
      </view>
      <view class="hot-city" hidden="{
       {!isClick}}">
        <view class="hot-title">热门城市</view>
        <view class="hot-city-list">
          <view wx:for="{
       {hotcityList}}" wx:key='item' data-item='{
       {item.city}}' data-index='{
       {item.id}}' bindtap='provinceChange'>{
       {item.city}}</view>
        </view>
      </view>
      
      <view class='goodsdetail-top' hidden="{
       {isClick}}">
        <view wx:for='{
       {nameArr}}' wx:key="index" class='{
       {currentTab == index ? "goodsdetail-top-l-o":"goodsdetail-top-l"}}' style='{
       {item == "" ? "display: none;":""}}' bindtap="navbarTap" data-index='{
       {index}}'>
          <view>{
       {item}}</view>
        </view>
      </view>
      <swiper class="swiper-box">
        <swiper-item wx:if='{
       {currentTab == 0}}' catchtouchmove='catchTouchMove'>
          <scroll-view scroll-y class="swiper-box-scr">
            <view class='swiper-box-item {
       {nameArr[0] == item ? "active":""}}' wx:for='{
       {provinceArr}}' wx:key='item' data-item='{
       {item}}' data-index='{
       {index}}' bindtap='provinceChange'>
              <block wx:if="{
       {nameArr[0] == item}}">
                <image class="select" src="{
       {nameArr[0] == item? '../../img/icon/icon-select.png': ''}}"></image>
              </block>
              <view>{
       {item}}</view>
            </view>
          </scroll-view>
        </swiper-item>
    
        <swiper-item wx:if='{
       {currentTab == 1}}' catchtouchmove='catchTouchMove'>
          <scroll-view scroll-y class="swiper-box-scr">
            <view class='swiper-box-item {
       {nameArr[1] == item ? "active":""}}' wx:for='{
       {cityArr}}' wx:key='item' data-item='{
       {item}}' data-index='{
       {index}}' bindtap='cityChange'>
              <block wx:if="{
       {nameArr[1] == item}}">
                <image class="select" src="{
       {nameArr[1] == item? '../../img/icon/icon-select.png': ''}}"></image>
              </block>
              <view>{
       {item}}</view>
            </view>
          </scroll-view>
        </swiper-item>
    
        <swiper-item wx:if='{
       {currentTab == 2}}' catchtouchmove='catchTouchMove'>
          <scroll-view scroll-y class="swiper-box-scr">
            <view class='swiper-box-item {
       {nameArr[2] == item ? "active":""}}' wx:for='{
       {countryArr}}' wx:key='item' data-item='{
       {item}}' data-index='{
       {index}}' bindtap='districtChange'>
              <block wx:if="{
       {nameArr[2] == item}}">
                <image class="select" src="{
       {nameArr[2] == item? '../../img/icon/icon-select.png': ''}}"></image>
              </block>
              <view>{
       {item}}</view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

region-picker.wxss

/*弹窗*/
    
    .goodsdetail {
      position: fixed;
      left: 5rpx;
      bottom: 10rpx;
      width: 740rpx;
      height: 1000rpx;
      background: #fff;
      z-index: 99;
      overflow: hidden;
      border-radius: 20rpx;
    }
    
    .goodsdetail-top {
      width: 750rpx;
      box-sizing: border-box;
      display: flex;
      position: relative;
      margin: 81rpx 34rpx;
    }
    
    .goodsdetail-top-l {
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: bold;
      font-family: "PingFang-SC-Bold";
      color: #f73c41;
      margin-right: 74rpx;
    }
    
    .goodsdetail-top-l-o {
      box-sizing: border-box;
      font-size: 28rpx;
      font-weight: bold;
      font-family: "PingFang-SC-Bold";
      margin-right: 74rpx;
    }
    
    .goodsdetail-top-c {
      height: 80rpx;
      padding: 0 20rpx 0 20rpx;
      line-height: 80rpx;
      box-sizing: border-box;
      font-size: 26rpx;
    }
    
    .goodsdetail-top-c-o {
      height: 80rpx;
      padding: 0 20rpx 0 20rpx;
      line-height: 80rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      border-bottom: 1rpx solid #e22e1f;
    }
    
    .goodsdetail-top-r {
      height: 80rpx;
      padding: 0 20rpx 0 20rpx;
      line-height: 80rpx;
      box-sizing: border-box;
      font-size: 26rpx;
    }
    
    .goodsdetail-top-r-o {
      height: 80rpx;
      padding: 0 20rpx 0 20rpx;
      line-height: 80rpx;
      box-sizing: border-box;
      font-size: 26rpx;
      border-bottom: 1rpx solid #e22e1f;
    }
    
    .goodsdetail-top-cancel {
      position: absolute;
      right: 0;
      top: 0;
      color: #aaa;
      height: 80rpx;
      padding: 0 40rpx 0 20rpx;
      line-height: 80rpx;
      box-sizing: border-box;
      font-size: 26rpx;
    }
    
    .swiper-box {
      width: 740rpx;
      height: 620rpx;
      box-sizing: border-box;
    }
    
    .swiper-box-scr {
      width: 740rpx;
      height: 620rpx;
      box-sizing: border-box;
    }
    
    .swiper-box-item {
      height: 85rpx;
      line-height: 85rpx;
      font-size: 28rpx;
      font-weight: Medium;
      font-family: "PingFang-SC-Medium";
      border-bottom: 1rpx solid #EEEEEE;
      box-sizing: border-box;
      display: flex;
      position: relative;
      margin: 0 30rpx;
      padding: 0 5rpx;
      align-items: center;
    }
    
    .seclection-title {
      text-align: center;
      margin-top: 40rpx; 
      font-size: 32rpx;
      font-weight: bold;
      font-family: "PingFang-SC-Bold";
      color: #000000;
      margin-bottom: 83rpx;
    }
    .state {
      font-size: 30rpx;
      color: #f73c41;
      font-weight: bold;
      font-family: "PingFang-SC-Bold";
      margin-left: 35rpx;
      margin-right: 35rpx;
    }
    .state view:nth-child(1) {
      margin-bottom: 11rpx;
    }
    .close {
      width: 32rpx;
      height: 31rpx;
      position: absolute;
      right: 39rpx;
      top: 41rpx;
    }
    .state-active {
      height: 6rpx;
      width: 20.4rpx;
      background: #f73c41;
      border-radius: 2.5rpx;
      margin-left: 48rpx;
    }
    .hot-city {
      margin: 68rpx 35rpx 64rpx;
    }
    .hot-city .hot-title {
      font-size: 28rpx;
      color: #999999;
    }
    .hot-city .hot-city-list {
      display: flex;
      font-size: 28rpx;
      color: #000000; 
      justify-content: space-between;
      margin-top: 42rpx;
    }
    .hot-city view:nth-child(2) view:nth-child(1) {
      margin-left: 28rpx;
    }
    .hot-city view:nth-child(2) view:last-child {
      margin-right: 28rpx;
    }
    .active {
      font-size: 28rpx;
      font-weight: bold;
      font-family: "PingFang-SC-Bold";
      color: #f73c41;
    }
    .mask-layer {
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.5;
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .swiper-box-item image {
      width: 35rpx;
      height: 27rpx;
      margin-right: 22rpx;
    }

region-picker.js

region-picker.json

{
      "component": true,
      "usingComponents": {}
    }

以上就完成了组件

下面来看看怎么来调用吧

在需要调用的页面添加

"usingComponents": \{

"region-picker": "../../components/region-picker/region-picker"

顺便补充一点吧,我添加页面调用的效果

这样没什么问题吧,my-add-address就是一个文件夹,index是我的习惯,你也可以直接my-add-address.wxml,最后会给大家看一下我的目录结构

my-add-address/index.wxml

<view class="redact-address">
      <view class="possess-layout">
        <view class="mains">
          <view class="address-msg">
            <view class="item-msg">收货人</view>
            <view class="section">
              <input type="text" placeholder="请填写收货人姓名" value="{
       {consigneeName}}" bindblur="consigneeNameInput" placeholder-class="phcolor"></input>
            </view>
            <view class="address-right">
              <image src="../../../img/icon/icon-add-address-user.png"></image>
            </view>
          </view>
          <view class="address-msg">
            <view class="item-msg">手机号码</view>
            <view class="section">
              <input type="number" placeholder="请填写收货人手机号码" value="{
       {phone}}" maxlength="11" bindblur="phoneInput" placeholder-class="phcolor"></input>
            </view>
          </view>
          <view class="address-msg" bindtap='chooseAddress'>
            <view class="item-msg">所在地区</view>
            <view class="section" bindtap='select'>
              <input disabled="disabled" placeholder="省市区县、乡镇等" value="{
       {locationArr[0] + locationArr[1] + locationArr[2]}}" bindblur="consigneeRegionInput" placeholder-class="phcolor"></input>
            </view>
            <view class="address-rights" bindtap='select'>
              <image src="../../../img/icon/icon-site-location.png"></image>
              <view>定位</view>
            </view>
          </view>
          <view class="address-msg">
            <view class="item-msg">详细地址</view>
            <view class="section">
              <input type="text" placeholder="街道、楼牌号等" value="{
       {detailedAddress}}" bindblur="detailedAddressInput" placeholder-class="phcolor"></input>
            </view>
          </view>
          <view class="label">
            <view class="label-title">标签</view>
            <view class="label-list">
              <block wx:for="{
       {labelList}}" wx:key="index">
                <view class="labels {
       {labelDefault==index? 'labels-active': ''}}" data-index="{
       {index}}" bindtap="chooseLabelSelect">{
       {item}}</view>
              </block>
            </view>
          </view>
          <view class="default-setting">
            <view class="defaul-setting-left">
              <view>设置默认地址</view>
              <view>提醒：每次下单会默认推荐使用该地址</view>
            </view>
            <image class="defaul-setting-right" src="{
       {defaults? '../../../img/icon/icon-off-by-default.png': '../../../img/icon/icon-off-by-default-red.png'}}" bindtap="chooseDefault"></image>
          </view>
        </view>
      </view>
    </view>
    
    <view class="btn" bindtap="submit">保存</view>
    
    
    
    <scroll-view scroll-y style="height: {
       {windowHeight}}px;width: 100%;" class='body'>
      <region-picker id='getAddress' locationArr="{
       {locationArr}}" bind:resultEvent="resultEvent">
      </region-picker>
    </scroll-view>

my-add-address/index.wxss

.redact-address {
      background: white;
      margin-bottom: 20rpx;
    }
    
    .address-msg {
      height: 128rpx;
      display: flex;
      align-items: center;
      background: #fff;
      border-top: 2rpx solid #efefef;
      font-size: 28.68rpx;
      color: #333;
      padding: 0 20rpx;
    }
    
    .address-right image {
      width: 32rpx;
      height: 32rpx;
    }
    
    .address-rights {
      display: flex;
      align-items: center;
    }
    
    .address-rights image {
      width: 26rpx;
      height: 32rpx;
      margin-right: 13rpx;
    }
    
    .address-rights view {
      font-size: 28.68rpx;
    }
    
    .address-msg:last-child {
      border-bottom: none;
    }
    
    .section {
      width: 58%;
    }
    
    .phcolor {
      color: #999;
    }
    
    .item-msg {
      width: 25%;
      margin-right: 25rpx;
    }
    
    .img {
      width: 35rpx;
      height: 35rpx;
      align-self: center;
    }
    
    .address-right {
      width: 100rpx;
      display: flex;
      flex-direction: row-reverse;
    }
    
    /* 标签 */
    
    .label {
      display: flex;
      height: 128rpx;
      align-items: center;
      margin-top: 73rpx;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      padding: 0 20rpx;
    }
    
    .label-title {
      font-size: 28.68rpx;
      color: #333;
      margin-right: 83rpx;
    }
    
    .label .label-list {
      display: flex;
    }
    
    .label .label-list .labels {
      height: 40rpx;
      width: 96rpx;
      border: 1px solid #eee;
      margin-right: 37rpx;
      text-align: center;
      line-height: 40rpx;
      font-size: 24rpx;
      color: #000;
      border-radius: 20rpx;
    }
    
    .labels-active {
      background: #f73c41 !important;
      color: #fff !important;
    }
    
    /* 默认设置 */
    
    .default-setting {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 160rpx;
      padding: 0 20rpx;
    }
    
    .defaul-setting-left view:nth-child(1) {
      font-size: 28.68rpx;
      color: #333;
      margin-bottom: 25rpx;
    }
    
    .defaul-setting-left view:nth-child(2) {
      font-size: 20rpx;
      color: #333;
    }
    
    .defaul-setting-right {
      height: 64rpx;
      width: 105rpx;
    }
    
    .btn {
      width: 680rpx;
      height: 88rpx;
      background: #f73c41;
      color: #fff;
      position: fixed;
      bottom: 55rpx;
      left: 35rpx;
      border-radius: 41.5rpx;
      font-size: 36rpx;
      text-align: center;
      line-height: 88rpx;
    }
    
    /* 城市选择 */
    .body {
      display: block;
      /* border: 1rpx solid #000; */
      box-sizing: border-box;
    }
     
    .choose_address{
      height: 90rpx;
      width: 750rpx;
      box-sizing: border-box;
      padding: 0 40rpx 0 40rpx;
      font-size: 32rpx;
      line-height: 90rpx;
      border-bottom: 1rpx solid #aaa;
    }

my-add-address/index.js

my-add-address/index.json

{
      "navigationBarTitleText": "添加收货地址",
      "usingComponents": {
        "region-picker": "../../components/region-picker/region-picker"
      }
    }

以上就是所有代码

上图

目录结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

最后来张效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 5][]

city.js文件可自行下载：[https://download.csdn.net/download/qq\_42543264/13107592?spm=1001.2014.3001.5503][https_download.csdn.net_download_qq_42543264_13107592_spm_1001.2014.3001.5503]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200528091929211.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200528091934571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200528103620428.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200528092117672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200528092123611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200528092126998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_qq_42543264_13107592_spm_1001.2014.3001.5503]: https://download.csdn.net/download/qq_42543264/13107592?spm=1001.2014.3001.5503