一趋惨、效果圖

image.png

二可岂、代碼
wxml:

<view class="page">
    <view class="content">
        <!-- 左側(cè)內(nèi)容區(qū) -->
        <scroll-view class="person-list" enable-back-to-top style="height: {{oHeight}}px" scroll-into-view="{{toView}}" scroll-y="true" scroll-top="{{sctop}}" scroll-with-animation="true">
            <view class="person" wx:for="{{personList}}" wx:key="index" id="{{ 'inToView'+item.id}}">
                <view class="person-sign">{{item.sign}}</view>
                <view class="person-content">
                    <view class="person-cont {{item.name.length > 1 ? 'border' : ''}}" bindtap="choose" data-item="{{it}}" wx:for="{{item.name}}" wx:key="id" wx:for-item="it">
                        <!-- <image class="person-head" src="{{it.head_img ? it.head_img : default_img}}"></image> -->
                        <text class="person-name">{{it.name}}</text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 左側(cè)字母欄 -->
        <scroll-view class="letter-list">
            <view class="letter" wx:for="{{personList}}" wx:key="index" catchtap="chooseLetter" data-item="{{item}}">{{item.sign}}</view>
        </scroll-view>
    </view>
</view>

js：

var pinyin = require("../../utils/pinyin.js")

Page({
  data: {
      list: [
          { name: "a阿拉善盟" }, 
          { name: "白山" }, 
          { name: "保定" },
          { name: "保安" }, { name: "保護(hù)" }, { name: "朝陽(yáng)" }, { name: "晨光" }, { name: "城管" }, { name: "東光" }, { name: "導(dǎo)師" }, { name: "導(dǎo)員" }, { name: "鄂州" }, { name: "額賊" }, { name: "兒科" }, { name: "二哈" }, { name: "豐臺(tái)" }, { name: "方言" }, { name: "房子" }, { name: "廣州" }, { name: "廣西" }, { name: "滾蛋" }, { name: "海-南" }, { name: "哈哈" }, { name: "哈士奇" }, { name: "河北" }, { name: "江蘇" }, { name: "唧-唧" }, { name: "濟(jì)南" }, { name: "礦-山" }, { name: "困難" }, { name: "摳門" }, { name: "蘭花" }, { name: "籃子" }, { name: "芒果" }, { name: "媽的" },
          { name: "mongo" }, { name: "牛奶" }, { name: "南京" }, { name: "歐豪" }, { name: "派南" }, { name: "帕薩特" }, { name: "奇步" }, { name: "全部" }, { name: "人類" }, { name: "然而" }, { name: "孫尚香" }, { name: "送禮" }, { name: "通州" }, { name: "特別" }, { name: "unix" }, { name: "vv" }, { name: "外灘" }, { name: "網(wǎng)吧" },
          { name: "西西里" }, { name: "熊大" }, { name: "云南" }, { name: "有道" }, { name: "周公" }, { name: "這里" },
          { name: "apple" }, { name: "apply" }, { name: "back" }, { name: "cookie" }, { name: "dom" }, { name: "document" }, { name: "element" }, { name: "fuck" }, { name: "good" }, { name: "hello" }, { name: "hi" }, { name: "job" },
          { name: "just" }, { name: "keep" }, { name: "loop" }, { name: "look" }, { name: "moon" }, { name: "monkey" }, { name: "node" }, { name: "nice" }, { name: "opera" }, { name: "past" }, { name: "pass" }, { name: "question" }, { name: "red" },
          { name: "store" }, { name: "token" }, { name: "uni-app" }, { name: "version" }, { name: "work" }, { name: "x-ray" }, { name: "yellow" }, { name: "zoom" }, { name: "i拼音" }
          , { name: "123" },{name:"a蘋果"},{name:"appla"}
      ],
      personList:[],
      oHeight:'',
      sctop:'',
  },
  onLoad: function () {
      // 獲取設(shè)備高度
      wx.getSystemInfo({
          success: (res) => {
              this.setData({
                  oHeight: res.windowHeight
              })
          }
      })
      
      this.list()
  },
 
  // 數(shù)據(jù)處理函數(shù)
  list(){
      let personList = this.data.personList
      console.log("personList",personList)
      let i = 0
      /**
       * 1囤热、調(diào)用外部js的方法ChineseToPinYin對(duì)數(shù)據(jù)進(jìn)行分組
       * 2静浴、分組的結(jié)果存在排序有誤的情況,例如I組,V組等沒有漢字的分組
       */
      this.data.list.forEach((item, index) => {
          let bool = personList.some(ite => {
              return ite.sign == pinyin.ChineseToPinYin(item.name).substr(0, 1)
          })
          if (personList.length == 0 || !bool) {
              personList.push({
                  id: i,
                  sign: pinyin.ChineseToPinYin(item.name).substr(0, 1),
                  name: [item]
              })
              i++
          } else if (bool) {
              let a = pinyin.ChineseToPinYin(item.name).substr(0, 1)
              for (let s in personList) {
                  if (a == personList[s].sign) {
                      personList[s].name.push(item)
                  }
              }
          }
      })
      this.setData({
          personList,
      })
      console.log("personList1",personList)
      /**
       * 3巴比、對(duì)分組好的數(shù)據(jù)進(jìn)行排序
       * 4、根據(jù)標(biāo)志sign的ASCII碼進(jìn)行初次排序篩選
       * 5腰奋、如果標(biāo)志sign不在A到Z之間,則添加到#分組中
       */
      this.data.personList.forEach((item, index) => {
          if ((item.sign.charCodeAt() < 65 || item.sign.charCodeAt() > 90) && item.sign.charCodeAt() != 35) {
              this.data.personList.splice(index, 1, "")
              // 注:此處為防止splice分割后,數(shù)組索引index發(fā)生變化,故將需要剔除的元素替換為“”,后再將其剔除
              let i = this.data.personList.findIndex(item => {
                  return item.sign == '#'
              })
              if (i != -1) {
                  item.name.forEach(it => {
                      this.data.personList[i].name.push(it)
                  })

              } else {
                  this.data.personList.push({
                      id: 99,
                      sign: '#',
                      name: item.name
                  })
              }
          }
      })
      // 利用filter方法,剔除之前存在的空元素
      personList = this.data.personList.filter(function (s) {
          return s != ''; // 注：IE9(不包含IE9)以下的版本沒有trim()方法
      });
      this.setData({
          personList
      })
      // 利用sort方法進(jìn)行排序
      this.data.personList.sort(this.listSort('sign'))
      // 一般情況下#分組在最下面,在此做以處理
      if (this.data.personList[0].sign == '#') {
          this.data.personList.splice(0, 1).forEach(item => {
              this.data.personList.push(item)
          })
      }
      this.setData({
          personList
      })
      // console.log(personList)
  },
  // 排序
  listSort(prop) {
      return function (a, b) {
          var value1 = a[prop].charCodeAt();
          var value2 = b[prop].charCodeAt();
          return value1 - value2
      }
  },
  // 點(diǎn)擊列表中的人員
  choose(e){
      console.log(e.currentTarget.dataset.item)
      let name = e.currentTarget.dataset.item.name
      wx.showToast({
          title: name,
          icon: 'none'
      })
  },
  /**
   * 點(diǎn)擊右側(cè)字母
   * 這里使用的是scroll-view中的自身方法,在scroll-view中添加以下屬性
   * 1、enable-back-to-top,點(diǎn)擊標(biāo)題回彈
   * 2抱怔、scroll-into-view="{{toView}}",滾動(dòng)到id為toView的位置,動(dòng)態(tài)設(shè)置該id即起到切換的左右
   * 3劣坊、scroll-y="true",y軸方向滾動(dòng)
   * 4、scroll-with-animation="true",滾動(dòng)動(dòng)畫
   * 注:在使用scroll-view時(shí):必須給當(dāng)前盒子設(shè)置固定的高度,否則無法生效
   */
  chooseLetter(e){
      let currentItem = e.currentTarget.dataset.item;
      console.log(currentItem);
      this.data.personList.forEach(item => {
          if (item.sign == currentItem.sign) {
              this.setData({
                  toView: 'inToView' + currentItem.id //滾動(dòng)條to指定view
              })
          }
      })
  },
  // 點(diǎn)擊回到頂部
  clickHot: function(e){
      this.setData({
          sctop: 0
      })
  }
})

wxss:

.page .content .person-list .person {
  margin-bottom: 18rpx;
  background: #fff;
  /* display: flex; */
}

.page .content .person-list .person .person-sign {
  /* width: 80rpx; */
  width: 100%;
  /* text-align: center; */
  /* margin-top: 46rpx; */
  font-size: 32rpx;
  font-family: Arial;
  color: #313133;
  padding: 20rpx 30rpx;
  background: #f2f2f2;
}

.page .content .person-list .person .person-content {
  width: calc(100% - 80rpx);
  padding: 0 30rpx;
}

.page .content .person-list .person .person-content .person-cont {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.page .content .person-list .person .person-content .person-cont .person-head {
  width: 80rpx;
  height: 80rpx;
  background: #f7f7f7;
  border-radius: 50%;
  margin-right: 40rpx;
}

.page .content .person-list .person .person-content .person-cont .person-name {
  font-size: 32rpx;
  color: #313133;
}

.page .content .person-list .person .person-content .border {
  border-bottom: 1rpx solid #f7f7f7;
}

.page .content .letter-list {
  position: fixed;
  /* top: 80rpx; */
  top:6%;
  right: 0;
  z-index: 999;
  width: 90rpx;
  font-family: Arial;
  font-size: 26rpx;
  text-align: center;
}

.page .content .letter-list .letter {
  /* margin-bottom: 10rpx;
  padding: 10rpx 20rpx; */
  margin-bottom: 0rpx;
  padding: 0rpx 20rpx;
}
/* 熱門城市 */
.hotList-tit{
  width: 100%;
  padding: 20rpx 30rpx;
  background: #f2f2f2;
}
.hotList-cont{
  padding: 10rpx 30rpx;
}
.hotList-cont view{
  display: inline-block;
  padding: 10rpx;
  text-align: center;
  font-size: 32rpx;
  border:1px solid #f3f3f3;
  margin-left: 5px;
}

下載 pinyin.js