微信小程序 带字母滑动的列表组件（记录学习）

首先感谢 gitHub 上的 微信小程序开发资源汇总

其中用到的是 wx-alphabetical-listview ★100+ - 微信小程序带字母滑动的 listview

其效果图如下：

第一步：配置好文件

第二步：写相应的代码

alphabetList.wxml

<scroll-view scroll-y style="height: {{windowHeight}}" scroll-into-view="{{alpha}}">
  <view class="alphabet">
    <view id="Top" class="header">
      <view class="h-city">
        <image src="../../imgs/ic_positioning.png"></image>
        <text>杭州</text>
      </view>
      <view class="h-close">
        <image src="../../imgs/ic_off.png"></image>
      </view>
    </view>
    <view class="now-city">
      <text>定位城市</text>
      <text class="now-city-name">杭州</text>
    </view>
    <!-- 下面的就是26个字母的列表内容 -->
    <view class="alphabet-list">
      <view wx:for="{{list}}" wx:key="unique" id="{{item.alphabet}}" class="section-item" wx:if="{{index!=0}}">
        <view class="section-item-header">
          {{item.alphabet}}
        </view>
        <view wx:for="{{item.datas}}" wx:key="unique" wx:for-item="cell" wx:for-index="cellIndex" class="section-item-cells">
          <view class="section-item-cell {{cellIndex != (item.datas.length-1) ? 'border-bottom':''}}">
            <text>{{cell}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</scroll-view>
 <!-- 下面的就是26个字母的右边对应显示 -->
<view data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove" class="alphanet-selector">
  <view data-ap="{{item.alphabet}}" wx:for="{{list}}" wx:key="unique" class="selector-one">
    {{item.alphabet}}
  </view>
</view>

注意：这个时候的控制台 Console 那里会报这样的错误：

alphabetList.wxss

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 20rpx;
}
.header .h-city {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  line-height: 1.0;
  letter-spacing: 0.4px;
  text-align: center;
  color: #a8a8a8;
}
.header .h-city image {
  width: 22rpx;
  height: 27rpx;
  margin-right: 16rpx;
}

.header .h-close image{
  width: 40rpx;
  height: 40rpx;
}
.now-city {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #f2f4f5;
  font-size: 22rpx;
	line-height: 1.0;
	color: #a8a8a8;
  padding: 18rpx 20rpx;
  border-bottom: 1rpx solid #dbdbdb;
}
.now-city .now-city-name {
  display: flex;
  background: white;
  font-size: 30rpx;
	line-height: 1.0;
	letter-spacing: 0.4rpx;
	color: #333333;
  padding: 13rpx 33rpx;
  border: solid 1rpx #dbdbdb;
  margin-top: 18rpx;
}

.alphabet-list {

}
.alphabet-list .section-item {

}
.alphabet-list .section-item .section-item-header {
  display: flex;
  align-items: center;
  font-size: 22rpx;
	color: #a8a8a8;
	background-color: #f2f4f5;
  padding: 4rpx 20rpx;
}

.alphabet-list .section-item .section-item-cells {
  padding-left: 20rpx;
}
.alphabet-list .section-item .section-item-cells .section-item-cell{
  font-size: 30rpx;
	line-height: 1.0;
	color: #333333;
  padding: 29rpx 0;
}
.border-bottom {
  border-bottom: 1rpx solid #dbdbdb;
}
.alphanet-selector {
  position: absolute;
  top: 80px;
  right: 0;
  height: 432px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  box-sizing: border-box;
}
.alphanet-selector .selector-one {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
	color: #43c1f4;
  padding: 3px 3px;
  height: 12px;
}

alphabetList.js

Page({
  data:{
    list: [
      {alphabet: 'Top', datas: ['asome','aentries','are here']},
      {alphabet: 'A', datas: ['asome','aentries','are here']},
      {alphabet: 'B', datas: ['bbsome','bebntries','bare here']},
      {alphabet: 'C', datas:  ['csome','centries','care here']},
      {alphabet: 'D', datas:  ['dsome','dentries','dare here']},
      {alphabet: 'E', datas:  ['esome','eentries','eare here']},
      {alphabet: 'F', datas:  ['fsome','fentries','are here']},
      {alphabet: 'G', datas:  ['gsome','gentries','gare here']},
      {alphabet: 'H', datas:  ['hsome','hentries','hare here']},
      {alphabet: 'I', datas:  ['isome','ientries','iare here']},
      {alphabet: 'J', datas:  ['jsome','jentries','jare here']},
      {alphabet: 'K', datas:  ['ksome','kentries','kare here']},
      {alphabet: 'L', datas:  ['lsome','lentries','lare here']},
      {alphabet: 'M', datas:  ['msome','mentries','mare here']},
      {alphabet: 'N', datas:  ['nsome','nentries','nare here']},
      {alphabet: 'O', datas:  ['osome','oentries','oare here']},
      {alphabet: 'P', datas:  ['psome','pentries','pare here']},
      {alphabet: 'Q', datas:  ['qsome','qentries','qare here']},
      {alphabet: 'R', datas:  ['rsome','rentries','rare here']},
      {alphabet: 'S', datas:  ['some','sentries','sare here']},
      {alphabet: 'T', datas:  ['tsome','tentries','tare here']},
      {alphabet: 'U', datas:  ['usome','uentries','uare here']},
      {alphabet: 'V', datas:  ['vsome','ventries','vare here']},
      {alphabet: 'W', datas:  ['wsome','wentries','ware here']},
      {alphabet: 'X', datas:  ['xsome','xentries','xare here']},
      {alphabet: 'Y', datas:  ['ysome','yentries','yare here']},
      {alphabet: 'Z', datas:  ['zsome','zentries','zare here']},
    ],
    alpha: '',
    windowHeight: ''
  },
  onLoad(options){
    try {
      var res = wx.getSystemInfoSync()
      this.pixelRatio = res.pixelRatio;
      // this.apHeight = 32 / this.pixelRatio;
      // this.offsetTop = 160 / this.pixelRatio;
      this.apHeight = 16;
      this.offsetTop = 80;
      this.setData({windowHeight: res.windowHeight + 'px'})
    } catch (e) {
      
    }
  },
  handlerAlphaTap(e) {
    let {ap} = e.target.dataset;
    this.setData({alpha: ap});
  },
  handlerMove(e) {
    let {list} = this.data;
    let moveY = e.touches[0].clientY;
    let rY = moveY - this.offsetTop;
    if(rY >= 0) {
      let index = Math.ceil((rY - this.apHeight)/ this.apHeight);
      if(0 <= index < list.length) {
        let nonwAp = list[index];
        nonwAp && this.setData({alpha: nonwAp.alphabet});
      } 
    }
  }
})

注意：这里的 list 数组里面的对象要按照这种格式布局来写

alphabetList.json

{

}

最后，以上就是全部的源代码了，可以根据自己的需求添加删除，感谢观。