小程序实现带索引的城市列表

叁歲伎倆 2021-12-21 11:55 442阅读 0赞

### 效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70][]

### 一、城市数据 ###

### 二、index.js实现 ###

我使用的是网络请求 你测试的时候可以使用上述的城市数据进行渲染

import api from "../../utils/api.js";
    const app = getApp();
    
    Page({
      data: {
        city: '',
        cityData: {},
        _py: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],
        //搜索列表
        inputVal: '',
        hidden: true,
        showPy: '★',
        selectData: []
      },
      onLoad: function() {
        var that = this;
        api.get(app.globalData.cities).then(res => {
          if(res){
            that.setData({
              cityData: res
            });
          }
        })
      },
    
    
      //选择城市
      selectCity: function(e) {
        var dataset = e.currentTarget.dataset;
        api.post(app.globalData.recruitmentInfo, dataset.fullname).then(res => {
          wx.setStorageSync('localCity', dataset.fullname)
          wx.navigateBack({
            delta: 1,
          })
        })
      },
    
      //获取文字信息
      getPy: function(e) {
        this.setData({
          hidden: false,
          showPy: e.target.id,
        })
      },
    
      setPy: function(e) {
        this.setData({
          hidden: true,
          scrollTopId: this.data.showPy
        })
      },
    
      //触发全部开始选择
      tStart: function() {
        this.setData({
          hidden: false
        })
      },
    
      //触发结束选择
      tEnd: function() {
        this.setData({
          hidden: true,
          scrollTopId: this.data.showPy
        })
      },
    
      //输入
      input: function(e) {
        let cityData = this.data.cityData;
        let selectData = [];
        if (e.detail.value == '') {
          this.setData({
            inputVal: e.detail.value,
            selectData
          });
        } else {
          for (let i in cityData) {
            for (let j in cityData[i]) {
              if (cityData[i][j].fullName.includes(e.detail.value)) {
                selectData.push(cityData[i][j].fullName)
              }
            }
          }
          console.error(selectData);
          this.setData({
            selectData,
            inputVal: e.detail.value,
          });
        }
      },
    
    })

### 三、index.wxml布局实现 ###

<view class="container">
      <view class="cu-bar bg-white search">
        <view class="search-form round" style='background: #F7F8FB;'>
          <text class="cuIcon-search"></text>
          <input value='{
       {inputVal}}' type="text" bindinput='input' bindfocus='input' placeholder="输入搜索的关键词" confirm-type="search"></input>
        </view>
      </view>
      
      <view style='background:#ffffff' class="searchName" wx:for="{
       {selectData}}" wx:key="key" data-fullname="{
       {item}}" bindtap='selectCity'>{
       {item}}
      </view>
      
      <view wx:if="{
       {selectData.length==0}}" else class='list-city'>
        <scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{
       {scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
          
          
          <view class='item' wx:for="{
       {cityData}}" wx:for-index="idx" wx:for-item="group" wx:key="key">
            <view class='py' id="{
       {idx}}">{
       {idx}}</view>
            <view class="fullname" wx:for="{
       {group}}" wx:key="key" data-fullname="{
       {item.fullName}}" bindtap='selectCity'>{
       {item.fullName}}
            </view>
          </view>
        </scroll-view>
        
        <view class='city-py'>
          <view class='city-py-item' wx:for="{
       {_py}}" wx:key="key" bindtouchstart="getPy" bindtouchend="setPy" id="{
       {item}}">{
       {item}}
          </view>
        </view>
      </view>
    </view>
    
    <view hidden="{
       {hidden}}" class="showPy">{
       {showPy}}</view>

**送上一波福利**

### 微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取 ###

![20191014103439896.png][]

### 四、index.wxss样式实现 ###

page {
      height: 100%;
    }
    
    .container {
      box-sizing: border-box;
      height: 100%;
      background: #fff;
    }
    
    .search-bar {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      margin-top: -100rpx;
      box-sizing: border-box;
      overflow: hidden;
      background: rgb(59, 63, 68);
      padding: 0 20rpx;
      position: relative;
    }
    
    .search-bar .clear {
      position: absolute;
      right: 30rpx;
      bottom: 25rpx;
      z-index: 2;
      height: 50rpx;
      width: 50rpx;
      opacity: 0.35;
    }
    
    .search-bar .split {
      padding: 0 30rpx;
      color: #555;
    }
    
    .search-bar .picker-opts {
      box-sizing: border-box;
      white-space: nowrap;
      font-size: 25rpx;
      color: #fff;
      float: left;
      height: 100rpx;
      line-height: 100rpx;
    }
    
    .search-bar input {
      font-size: 35rpx;
      color: #f5f5f5;
      height: 100rpx;
      line-height: 100rpx;
      box-sizing: border-box;
    }
    
    .search-bar .placeholder {
      font-size: 30rpx;
      color: #aaa;
    }
    
    .list-detail, .list-city {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      background: #fff;
    }
    
    .list-detail .item-nav {
      border-bottom: 1rpx solid #eee;
    }
    
    .list-detail .title, .history .title {
      font-size: 32rpx;
      color: #000;
      line-height: 45rpx;
    }
    
    .list-detail .address, .history .address {
      font-size: 28rpx;
      color: #aaa;
      white-space: normal;
    }
    
    /* 城市列表 */
    
    .list-city {
      position: relative;
    }
    
    .py {
      font-family: ArialMT;
      font-size: 30rpx;
      color: #909399;
      letter-spacing: 0;
      box-sizing: border-box;
      background: #fff;
      padding: 30rpx 40rpx 20rpx 40rpx;
    }
    
    .fullname {
      margin-right: 40rpx;
      margin-left: 40rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      color: #555;
      padding: 25rpx 0 25rpx 0;
      border-bottom: 1rpx solid #f1f2f7;
    }
    
    .searchName {
      margin-right: 40rpx;
      margin-left: 40rpx;
      box-sizing: border-box;
      font-size: 30rpx;
      color: #555;
      padding: 25rpx;
      border-bottom: 1rpx solid #f1f2f7;
    }
    
    .city-py {
      position: fixed;
      top: 36%;
      right: 0;
      margin-top: -324rpx;
    }
    
    .city-py-item {
      margin-top: 14rpx;
      font-family: ArialMT;
      font-size: 26rpx;
      color: #5297ca;
      margin-right: 14rpx;
      letter-spacing: 0;
    }
    
    .showPy {
      width: 150rpx;
      height: 150rpx;
      background: #fff;
      border-radius: 15rpx;
      line-height: 150rpx;
      text-align: center;
      font-size: 80rpx;
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 3;
      color: #333;
      box-shadow: 0 0 150rpx rgba(0, 0, 0, 0.35);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTcwNjQxNQ_size_16_color_FFFFFF_t_70]: /images/20211220/ddfaea029ff64dfaaabb93d50572b2af.png
[20191014103439896.png]: /images/20211220/0ba3e7a5e8f2485cb9e3b3f19e318357.png