小程序-仿微信通讯录-字母导航

由于数据都是写死的 其中 通讯录的列表太长 就只放了一个 说明数据结构
结构

<scroll-view scroll-y scroll-into-view="{{scroll}}" >
  <view class="con">
    <view class="con_list" id="{{con.title}}" wx:for="{{con_list}}" wx:key="" wx:for-item="con">
      <view class="title">{{con.title}}</view>
      <view class="list" wx:for="{{con.list}}" wx:key="" wx:for-item="list">
        <image src="{{list.img}}"></image>
        <view class="name">{{list.name}}</view>
      </view>  
    </view>
  </view>
</scroll-view>
<!-- 字母导航 -->
<view class="nav {{touchmove == 1?'touchmove':''}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
  <view id="nav_item" wx:for="{{zimu_list}}" wx:key="" data-index="{{index}}" >
    {{zimu_list[index]}}
  </view>
</view>
<!-- 当前选择字母提示框 -->
<view class="hint_bok" hidden="{{hiddenn}}">{{nav_text}}</view>

js

// pages/zimu_nav/zimu_nav.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    zimu_list:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
    con_list:[
      {
        title: 'A',
        list: [
          { 
            name: "阿嚏",
            img:"https://zuhaowan.zuhaowan.com/pic/201907/5101CD9ED73C9D14379E63D631ABD796.379e63d631abd796.jpg"
          }
        ]
      },
    ],
    scroll:'', //滚动到指定 id值的子元素
    touchmove: 0,//给字母导航添加背景色 1 添加 0不添加
    nav_height: '',//字母导航单个元素高度
    hiddenn: true,//hint_box 提示框 展示隐藏
    nav_text: '',//hint_box 提示框里面的文本
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.get_height();
  },
   //取高度
  get_height: function(){
    var that = this
    var query = wx.createSelectorQuery();
    query.select('#nav_item').boundingClientRect()
    query.exec(function (res) {
      that.setData({
        nav_height: res[0].height,
      })
    })
  },
  touchstart: function(e){
    this.set_scroll(e)
  },
  touchmove: function(e){
    this.set_scroll(e)
  },
  touchend: function(){
    this.setData({
      touchmove: 0,
      hiddenn: true
    })
  },
  set_scroll: function(e){
    var page_y = e.changedTouches[0].pageY
    var nav_height = +this.data.nav_height
    var idx = Math.floor(page_y / nav_height)
    var zimu = this.data.zimu_list[idx];
    this.setData({
      touchmove: 1,
      scroll: zimu,
      nav_text: zimu,
      hiddenn: false
    })
  },
})

css

/* pages/zimu_nav/zimu_nav.wxss */
page,scroll-view{
  height: 100%;
}
.con_list > view{
  padding-left: 20rpx;
}
.con_list .title{
  line-height: 60rpx;
  background: #eee;
  font-size:27rpx;
}
.con_list .list{
  line-height: 100rpx;
  font-size: 0;
  border-bottom: 1px solid #eee;
}
.list image{
  width:70rpx;
  height:70rpx;
  border-radius:6rpx;
  vertical-align:middle;
}
.list .name{
  display: inline-block;
  margin-left: 20rpx;
  font-size:34rpx;
  vertical-align:middle;
}
.nav{
  position: fixed;
  top: 16rpx;
  right: 0;
  width:40rpx;
  z-index:1;
}
.nav.touchmove{
  background:#ddd;
}
.nav view{
  font-size: 30rpx;
  color: #666;
  text-align: center;
}
.hint_bok{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.5);
  color:#fff;
  width:100rpx;
  border-radius:10rpx;
  text-align:center;
  padding:15rpx 0;
  font-size:54rpx;
}