小程序通讯录好友列表右侧字母导航

介绍：

1.顶部搜索没做（我没有申请APPID）没法预览，就没做

2.点击a，b，c导航到相应位置（和我之前写的仿小米商城那个例子一样）

3.争取复制就能用-下面是全代码

index.wxml

<view class='head flex alic borderbe0'>
  <view class='flex justc alic box bgf ml10 borRad'>
  <view class='flex justc alic box'>
    <icon type="search" size="20" class='ml5 mr10'/>
    <input placeholder='搜索' type='search' value='{{val}}' bindconfirm='search' class='{{focus?"flex1":"w"}}' bindfocus='setFocus' bindblur='setFocus'></input>
  </view>
  <image src='../img/say.png' class='ml5 mr10 say'></image>
  </view>  
</view>

<view class='flex '>
  <scroll-view class="flex1" scroll-y scroll-into-view="id{{toView}}" style='height:calc(100vh - 102rpx)'>
    <block wx:for='{{list}}' wx:key='id'>
      <view class='lh40 fz16 color9e ml10' id='id{{item.id}}'>{{item.title}}</view>
      <view class='bgf fz14'>
        <view class='flex alic borderbe0 ml10 pt15 pb15' wx:for='{{item.list}}' wx:key='i' wx:for-item='n' data-id='{{item.id}}' bindtap='goDetail'>
          <image src='{{n.src}}' class='img mr15'></image>
          <text>{{n.name}}</text>
          <text wx:if='{{n.heart=="1"&&n.cue}}' class='posAbs mr15 r10 colorf0'>{{n.cue}}</text>
          <image wx:elif='{{n.heart=="1"&&!n.cue}}' src='../img/star-on.png' class='right posAbs mr15 r10'></image>
          <image  wx:else src='../img/star-off.png' class='right posAbs mr15 r10'></image>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class='posFix right0 tc fz12 flex justsa colu' style='height:calc(100% - 102rpx)'>
    <image src='../img/star-off.png' class='star' data-i='-1' bindtap='toView'></image>
    <view wx:for='{{nav}}' bindtap='toView' data-i='{{index}}' wx:key='a'>{{item}}</view>
  </view>
</view>

index.js

const util = require('../../utils/util.js')

Page({
  data: {
    focus: false,
    val: '',
    list: [{ id: 1, title: '特别关注', list: [{ name: '郭美美', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', cue: '血糖控制异常', heart: 1 }, { name: '凤姐', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 1 }] }, { id: 2, title: 'A', list: [{ name: '芙蓉妹妹', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '秋香姐', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }] }, { id: 3, title: 'B', list: [{ name: '凤姐', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 1 }] }, { id: 4, title: 'C', list: [{ name: '石榴姐', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '如花', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '如玉', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '亚索', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '石头人', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '蛮王', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }, { name: '赵新', src: 'http://img1.imgtn.bdimg.com/it/u=105692044,3597038919&fm=27&gp=0.jpg', heart: 0 }] } ],
    nav: ["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","#"],
    toView:1
  },
  onLoad: function () {

  },
  setFocus: function () {
    this.setData({
      focus: !this.data.focus,
      val: ''
    })
  },
  search: function (e) {
    console.log(e.detail.value)
  },
  toView:function(e){
    let i = parseInt(e.currentTarget.dataset.i)+2;
    this.setData({
      toView: i
    })
  },
  goDetail:function(e){
    wx.navigateTo({
      url: 'detail/detail?id=' + e.currentTarget.dataset.id,
    })
  },
  onShow: function () {

  },
})

index.wxss

page{
  background: #EFEFF4;
}
.head{
  background: #EFEFF4;height: 100rpx;
}
.box{
  width: calc(100% - 20px);height: 60rpx;
}
.box .w{width: 100rpx;}
.say{
 width: 40rpx;height: 40rpx;
}
.img{
  width: 80rpx;height:80rpx;border-radius: 50%;box-shadow: 0 5px 10px #aaa;
}
.star{width: 32rpx;height:32rpx;border-radius: 50%}
.bgf view:last-of-type{border: 0}
.r10{right: 20rpx;}
.right{
  width: 50rpx;height:50rpx;
}

如果出bug看这里：
1.把列表导航详情页点击事件删了，你没有这个页面
2.如果点击字母d，e，f…没效果，莫慌，看数据，我只写到c，c以下的点击没效果，是因为没数据，自己加上就好

来源：https://blog.csdn.net/qq_25252769/article/details/81116597