微信小程序-仿写通讯录样式

承接微信小程序开发，扫码加微信：

先看实现效果，如下图：

js代码：

// pages/myTeam/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isActive: null,
    listMain: [{
      id: "1", region: "A",
      items: [
        { id: "", name: "amour" },
        { id: "", name: "amour" },
        { id: "", name: "amour" },
        { id: "", name: "amour" }
      ]
    },
      {
        id: "2", region: "B",
        items: [
          { id: "", name: "bandon" },
          { id: "", name: "bandon" }
        ]
      },
      {
        id: "3", region: "C",
        items: [
          { id: "", name: "client" },
          { id: "", name: "client" },
          { id: "", name: "client" },
          { id: "", name: "client" }
        ]
      },
      {
        id: "4", region: "D",
        items: [
          { id: "", name: "digital" },
          { id: "", name: "digital" }
        ]
      },
      {
        id: "5", region: "E",
        items: [
          { id: "", name: "echo" },
          { id: "", name: "echo" },
          { id: "", name: "echo" },
          { id: "", name: "echo" }
        ]
      },
      {
        id: "6", region: "F",
        items: [
          { id: "", name: "funk" },
          { id: "", name: "funk" }
        ]
      },
      ],
    listTitles: [],
    fixedTitle: 'A',
    toView: 'inToView0',
    viewPosition: [],
    scroolHeight: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this ;
    var num = 0;
    for (let i = 0; i < that.data.listMain.length;i++){  
      wx.createSelectorQuery().select('#inToView' + that.data.listMain[i].id).boundingClientRect(function(rect){
        num = num + rect.height; //元素高度+该元素先前元素高度 ， 可理解为元素底部至可滚动视图区域顶部高度
        console.log(num)
        var _array = [{ 'height': num, 'key': rect.dataset.id , 'name':that.data.listMain[i].region}];
        that.setData ({
          viewPosition: that.data.viewPosition.concat(_array) //合并数组
        });  
      }).exec()
    };
  },
  // 可滚动视图区域滑动函数触发
  onPageScroll: function (e) {
    console.log(e)
    this.setData({
      scroolHeight: e.detail.scrollTop //获取滚动条滚动位置
    });
    for (let i in this.data.viewPosition) {
      if (e.detail.scrollTop < this.data.viewPosition[i].height) { //判断滚动条位置是否在元素内
        this.setData({
          isActive: this.data.viewPosition[i].key,
          fixedTitle: this.data.viewPosition[i].name
        });
        return false;
      }
    }
  },
    //点击右侧字母导航定位触发
  scrollToViewFn: function (e) {
    console.log(e)
    var that = this;
    var _id = e.target.dataset.id;
    for (var i = 0; i < that.data.listMain.length; ++i) {
      if (that.data.listMain[i].id === _id) {
        that.setData({
          isActive: _id,
          toView: 'inToView' + _id //滚动条to指定view
        })
        break
      }
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml代码：

<view >
<!-- 左侧列表内容部分 -->
  <scroll-view class="content" enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll"> 
    <view wx:for="{{listMain}}" wx:for-item="group" wx:key="{{group.id}}"  id="{{ 'inToView'+group.id}}" data-id='{{group.id}}'> 
      <view class="address_top" >{{group.region}}</view> 
        <view wx:for="{{group.items}}" wx:for-item="item" wx:key="{{item.brandId}}"> 
          <view class="address_bottom" data-id='{{item.brandId}}'>{{item.name}}</view> 
        </view> 
    </view> 
  </scroll-view> 
  <!-- 顶部固定分类 -->
  <view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
    <view class="fixed-title">
    {{fixedTitle}}
    </view>
  </view>
  <!-- 右侧字母导航 -->
  <view class="orientation_region"> 
    <view class="orientation">自动定位</view> 
      <block wx:for="{{listMain}}"  wx:key="{{item.id}}"> 
        <view class="orientation_city  {{isActive==item.id ? 'active':'' }}" bindtap="scrollToViewFn" data-id="{{item.id}}" >
        {{item.region}}
        </view> 
    </block> 
  </view>  
</view> 

wxss代码：

page{ 
  height: 100%;
} 
.content{
  padding-bottom: 20rpx;
  box-sizing: border-box;
  height: 100%;
  position: fixed
} 
.location{
  width: 100%;
} 
.location_top{
  height: 76rpx;
  line-height: 76rpx;
  background: #f4f4f4;
  color: #606660;
  font-size: 28rpx;
  padding: 0 20rpx;
} 
.location_bottom{
  height: 140rpx;
  line-height: 140rpx;
  color: #d91f16;
  font-size: 28rpx;
  border-top: 2rpx #ebebeb solid;
  border-bottom: 2rpx #ebebeb solid;
  padding: 0 20rpx;
  align-items: center;
  display: -webkit-flex;
} 
.address_top{
  height: 56rpx;
  line-height: 56rpx;
  background: #EBEBEB;
  color: #999999;
  font-size: 28rpx;
  padding: 0 20rpx;
} 
.address_bottom{
  height: 88rpx;
  line-height: 88rpx;
  background: #fff;
  color: #000000;
  font-size: 32rpx;
  padding: 0 20rpx;
  border-bottom: 2rpx #ebebeb solid;
  margin-left: 20rpx;
  margin-right: 50rpx;
} 
.location_img{
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  right: 20rpx;
  top: 125rpx;
} 
.add_city{
  width: 228rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 2rpx solid #ebebeb;
  color: #000000;
  margin-right: 20rpx;
} 
.add_citying{
  width: 228rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border: 2rpx solid #09bb07;
  color: #09bb07;
  margin-right: 20rpx;
} 
.orientation{
  white-space:normal;
  display: inline-block;
  width: 55rpx;height:58rpx;
  color: #999;
  text-align: center;
} 
.orientation_region{
  width: 55rpx;
  font-size: 20rpx;
  position: fixed;
  top: 100rpx;
  right: 0rpx;
} 
.orientation_city{
  height: 40rpx;
  line-height: 40rpx;
  color: #000;
  text-align: center;
} 
.active{
  color: #2cc1d1;
}
.list-fixed{
  position: fixed;
  width: 100%;
  z-index: 999;
  height: 56rpx;
  line-height: 56rpx;
  background: #EBEBEB;
  color: #999999;
  font-size: 28rpx;
  padding: 0 20rpx;
  z-index: 9999;
}