wxhuanart/miniprogram/pages/mine/components/areapicker/areapicker.wxml

<t-popup visible="{{ show }}" z-index="{{ 12000 }}" placement="bottom" bind:visible-change="onClose">
  <view class="area-picker wr-class" slot="content">
    <t-icon t-class="area-picker__close" name="close" prefix="wr" size="40rpx" bindtap="onClose" />
    <view class="area-picker__header" wx:if="{{title}}">
      <view class="area-picker__header__title">{{title}}</view>
    </view>
    <view class="area-picker__selected-result">
      <view class="area-picker__selected-result__item" wx:for="{{pickerValue}}" wx:for-item="pickedArea" wx:key="index" bindtap="onPickerClick" data-index="{{index}}">
        <view class="area-picker__selected-result__item__name">{{pickedArea.name}}</view>
        <view class="area-picker__selected-result__item__circle" />
        <view class="area-picker__selected-result__item__line" />
      </view>
      <view class="area-picker__selected-result__item active">
        <view class="area-picker__selected-result__item__name">请选择{{columsName[pickerValue.length]}}</view>
        <view class="area-picker__selected-result__item__circle" />
      </view>
    </view>
    <view class="area-picker__split-line" />
    <view class="area-picker__area-list">
      <block wx:if="{{loading}}">
        <block wx:if="{{useLoadingSlot}}">
          <slot name="loading" />
        </block>
        <block wx:else>
          <t-loading-content class="area-picker__area-list__loading">正在加载</t-loading-content>
        </block>
      </block>
      <block wx:else>
        <view class="area-picker__area-list__title">选择{{columsName[pickerValue.length]}}</view>
        <view class="area-picker__area-list__content">
          <scroll-view class="area-picker__area-list__content__inner" scroll-y scroll-top="{{scrollTop}}">
            <view class="area-picker__area-list__content__group" wx:for="{{pickerColumnData}}" wx:for-item="group" wx:for-index="gi" wx:key="gi">
              <view class="area-picker__area-list__content__group__title">{{group.name}}</view>
              <view class="area-picker__area-list__content__group__content">
                <view class="area-picker__area-list__content__group__content__item {{gi === hightLightIndex[0] && index === hightLightIndex[1] ? 'active' : ''}}" hover-class="area-picker__area-list__content__group__content__item__active" id="area-item-{{gi}}-{{index}}" wx:for="{{group.children}}" wx:key="index" bindtap="onChange" data-gi="{{gi}}" data-ai="{{index}}">{{item.name}}
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </block>
    </view>
  </view>
</t-popup>