支付寶小程序 UI·級聯(lián)選擇（最大三級）

實現(xiàn)級聯(lián)選擇，可自動適配二級或者三級選擇器， 一般用于省、市、區(qū)三級聯(lián)動選擇。

掃碼體驗

前提條件

使用級聯(lián)選擇的前提條件如下：

• 已完成 開發(fā)者入駐 與 小程序創(chuàng)建 。
• 已下載并安裝 小程序開發(fā)者工具。

獲取模板代碼

下載 級聯(lián)選擇 Demo.zip 文件，并解壓至本地。

字段說明

list 示例

[
  {
    "name": "北京市",
    "code": "110000",
    "sub": [
      {
        "name": "北京市",
        "code": "110100",
        "sub": [
          {
            "name": "東城區(qū)",
            "code": "110101"
          },
          {
            "name": "密云區(qū)",
            "code": "110118"
          },


          {
            "name": "延慶區(qū)",
            "code": "110119"
          }
        ]
      },
    ]
  },
  {
    "name": "天津市",
    "code": "120000",
    "sub": [
      {
        "name": "天津市",
        "code": "120100",
        "sub": [
          {
            "name": "河北區(qū)",
            "code": "120105"
          },


          {
            "name": "紅橋區(qū)",
            "code": "120106"
          }
        ]
      }
    ]
  }
]

示例代碼

index.json

// 注意: 使用前請在package.json中引入 mini-ali-ui
{
  "component": true,
  "usingComponents": {
    "popup": "mini-ali-ui/es/popup/index",
    "tabs": "mini-ali-ui/es/tabs/index",
    "tab-content": "mini-ali-ui/es/tabs/tab-content/index"
  }
}

index.axml

<view>
  <popup show="{{selectShow}}" position="bottom" onClose="onPopupClose" className="picker-popup" disableScroll="{{false}}">
    <view class="btn-action">
      <view class="cancel-btn" data-click="{{isConfirm}}" onTap="onCancel">取消                                                            
      </view>
      <view class="confirm-btn {{isConfirm?'active':'disable'}}" data-click="{{isConfirm}}" onTap="onConfirm">確定                                                            
      </view>
    </view>
    <tabs className="pipick-view-tab" tabBarCls="pick-view-tab-header" activeCls="activeTab" tabBarActiveTextColor="#333333" tabBarBackgroundColor="transparent" tabs="{{selectList}}" swipeable="{{false}}" onTabClick="handleTabClick" activeTab="{{activeTab}}">
      <block a:for="{{selectList}}" a:for-index="idx" a:for-item="itemName">
        <tab-content key="{{idx}}">
          <scroll-view class="pick-view-content" scroll-y="{{true}}" trap-scroll="{{true}}">
            <block a:for="{{itemName.sub}}">
              <view data-key="{{idx}}" data-name="{{item.name}}" data-code="{{item.code}}" data-sub="{{item.sub?item.sub:''}}" class="pick-view-content-item {{selectList[idx].title===item.name?'curret':''}}" onTap="itemSelect">{{item.name}}                                                        
              </view>
            </block>
          </scroll-view>
        </tab-content>
      </block>
    </tabs>
  </popup>
</view>

index.acss

.picker-popup {
  font-family: PingFangSC-Regular;
}
.btn-action{
  display: flex;
  align-items: center;
  padding: 30rpx;
  box-sizing: border-box;
  background: #FFFFFF
}
.pipick-view-tab .am-tabs-bar {
  height: 80rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #DDDDDD;
  padding:0 10rpx;
}


.pipick-view-tab .am-tabs-bar-content {
  height: 79rpx;
  box-sizing: border-box;
}


.pipick-view-tab .am-tabs-scroll-right, .pipick-view-tab .am-tabs-scroll-left {
  width: 0;
  display: none;
}


.pick-view-tab-header {
  height: 79rpx;
  line-height: 79rpx;
  box-sizing: border-box;
  font-size: 26rpx;
  color: #333333;
}


.pick-view-tab-header .am-tabs-bar-title {
  max-width: 180rpx;
  height: 79rpx;
  line-height: 79rpx;
  border-bottom: 4rpx solid transparent;
  box-sizing: border-box;
  padding: 0 20rpx;
}


.pick-view-tab-header .am-tabs-bar-title text {
  max-width: 180rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}


.pipick-view-tab .am-tabs-content-wrap {
  margin-top: 0;
}


.pick-view-content {
  height: 480rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
}


.pick-view-content-item {
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 30rpx;
  color: #333333;
  width: 100%;
  box-sizing: border-box;
  font-size: 26rpx;
}


.confirm-btn {
  text-align: right;
  flex: 1;
}
.cancel-btn{
  flex:1;
}


.disable {
  color: #CCCCCC;
}


.active {
  color: #108ee9;
}


.curret {
  color: #FFFFFF;
  background: #108ee9;
}

index.js

Component({
  data: {
    isConfirm: false, // 確認(rèn)是否可點擊
    selectList: [
      {
        title: '請選擇',
        sub: []
      }
    ], // list數(shù)據(jù)
    activeTab: 0 // 當(dāng)前tab項
  },
  props: {
    selectShow: false // 選擇面板是否展示
  },
  didMount() {
    const { list } = this.props;
    this.setData({
      selectList: [
        {
          title: '請選擇',
          sub: list
        }
      ]
    });
  },
  didUpdate(prevProps, prevData) {
    const { selectValue, list } = this.props;
    // 面板狀態(tài)改變的時候數(shù)據(jù)的重新渲染
    if (!prevProps.selectShow && this.props.selectShow && selectValue) {
      const selectArray = selectValue.split(' ');
      let selectList = [];
      selectArray.map((item, k) => {
        if (k === 0) {
          const provinces = {
            title: item,
            sub: list
          };
          selectList.push(provinces);
        }
        if (k === 1) {
          list.map((data, index) => {
            if (data.name === selectArray[k - 1]) {
              const city = {
                title: item,
                sub: data.sub
              };
              selectList.push(city);
            }
          });
        }
        if (k === 2) {
          list.map((data, index) => {
            if (data.name === selectArray[k - 2]) {
              data.sub.map((areaData, i) => {
                if (areaData.name === selectArray[k - 1]) {
                  const area = {
                    title: item,
                    sub: areaData.sub
                  };
                  selectList.push(area);
                }
              });
            }
          });
        }
      });
      this.setData({
        selectList,
        activeTab: selectArray.length - 1
      });
    }
  },
  didUnmount() { },
  methods: {
    /**
     * 關(guān)閉popup
     * @method onPopupClose
     */
    onPopupClose() {
      const { selectValue, list } = this.props;
      if (!selectValue) {
        this.setData({
          isConfirm: false,
          selectList: [
            {
              title: '請選擇',
              sub: list
            }
          ],
          activeTab: 0
        });
      }
      this.props.onClose();
    },
    /**
     * 確認(rèn)
     * @method onConfirm
     * @param {*} e
     */
    onConfirm(e) {
      if (e.target.dataset.click) {
        // 點擊確定
        const { selectList } = this.data;
        let result = [];
        selectList.map((item) => {
          const singleSelect = {
            name: item.title,
            code: item.code
          };
          result.push(singleSelect);
        });
        this.props.onSelectSuccess(result);
        this.props.onClose();
      }
    },
    /**
     * 取消
     * @method onCancel
     */
    onCancel() {
      this.props.onClose();
    },
    /**
     * tab切換
     * @method handleTabClick
     * @param {*} index
     */
    handleTabClick({ index }) {
      this.setData({
        activeTab: index
      });
    },
    /**
     * 省市區(qū)選擇事件
     * @method itemSelect
     * @param {*} e
     */
    itemSelect(e) {
      const { key, name, code, sub } = e.target.dataset;
      const { list } = this.props;
      if (key === 0) { // 第一級數(shù)據(jù)處理
        if (sub) {
          this.setData({
            selectList: [
              {
                title: name,
                code,
                sub: list
              },
              {
                title: '城市',
                sub: sub
              }
            ],
            activeTab: 1,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [
              {
                title: name,
                code,
                sub: list
              }
            ],
            isConfirm: true
          });
        }
      }
      if (key === 1) { // 第二級數(shù)據(jù)處理
        if (sub) {
          this.setData({
            selectList: [
              {
                title: this.data.selectList[0].title,
                code: this.data.selectList[0].code,
                sub: list
              },
              {
                title: name,
                code,
                sub: this.data.selectList[1].sub
              },
              {
                title: '區(qū)縣',
                sub: sub
              }
            ],
            activeTab: 2,
            isConfirm: false
          });
        } else {
          this.setData({
            selectList: [
              {
                title: this.data.selectList[0].title,
                code: this.data.selectList[0].code,
                sub: list
              },
              {
                title: name,
                code,
                sub: this.data.selectList[1].sub
              }
            ],
            activeTab: 1,
            isConfirm: true
          });
        }
      }
      if (key === 2) { // 第三級數(shù)據(jù)處理
        this.setData({
          selectList: [
            {
              title: this.data.selectList[0].title,
              code: this.data.selectList[0].code,
              sub: list
            },
            {
              title: this.data.selectList[1].title,
              code: this.data.selectList[1].code,
              sub: this.data.selectList[1].sub
            },
            {
              title: name,
              code,
              sub: this.data.selectList[2].sub
            }
          ],
          activeTab: 2,
          isConfirm: true
        });
      }
    }
  }
});