首先这是一个仿微信页面的通讯录列表：

当点击页面右侧的字母栏时，页面将跳转到相应字母的位置。

wxml代码如下：

<view class="fg">{{item.title}}</view>

<view class="box_1" wx:for="{{item.list}}">

  <view class="box1">

    <view class="tx">

      <image src="{{item.url}}"></image>

    </view>

    <view class="box2">

      <text class="mp">{{item.name}}</text>

    </view>

  </view>

</view>

{{item.title}}

wxss代码如下：

.box1{

font-size: 30rpx;

width: 100vw;

height: 100rpx;

/* background-color: blue; */

display: flex;

flex-direction: row;

}

.tx image{

width: 80rpx;

height: 80rpx;

border-radius: 10%;

margin-top: 10rpx;

margin-left: 10rpx;

}

.tx{

/* width: 100rpx;

height: 100rpx; */

/* background-color: brown; */

}

.box2{

margin-left: 20rpx;

height:100rpx;

width:700rpx;

/* background-color: burlywood; */

border-bottom: gainsboro;

border-width: 0 0 1px 0;

border-style: solid;

line-height: 100rpx;

}

.fg{

height: 50rpx;

background-color: gainsboro;

font-size: 25rpx;

padding-top: 10rpx;

padding-left: 15rpx;

}

.letter{

position: fixed;

top:100rpx;

right: 10rpx;

/* background-color: darkorange; */

width: 30rpx;

height: 900rpx;

}

.letter1{

width: 30rpx;

height: 30rpx;

margin-top: 10rpx;

/* background-color: darkorchid; */

}

scroll-view

{

height: 100%;

}

page{

height: 100%;

}

js代码如下：

// pages/address/address.js

Page({

/**

• 页面的初始数据

*/

data: {

communicationList: [{

    title: 'A',

    list: [{

        url: '../img/a1.jpg',

        name: 'A-橙子姐姐',

        age: 19

      }, {

        url: '../img/a3.jpg',

        name: '阿兰高娃',

        age: 19

      },

      {

        url: '../img/a3.jpg',

        name: '阿镁',

        age: 19

      }

    ]

  },

  {

    title: 'B',

    list: [{

      url: '../img/b1.jpg',

      name: '邦亚宁',

      age: 19

    }, {

      url: '../img/b2.jpg',

      name: '保平舅',

      age: 19

    }]

  },

  {

    title: 'C',

    list: [{

      url: '../img/c1.jpg',

      name: '曹彪彪',

      age: 19

    }, {

      url: '../img/c2.jpg',

      name: '柴渊',

      age: 19

    }]

  },

  {

    title: 'D',

    list: [{

      url: '../img/d1.jpg',

      name: '代悦',

      age: 19

    }, {

      url: '../img/d2.jpg',

      name: '大拇指运动',

      age: 19

    }]

  },

  {

    title: 'E',

    list: [{

      url: '../img/e1.jpg',

      name: '二姨',

      age: 19

    }]

  },

  {

    title: 'F',

    list: [{

      url: '../img/f1.jpg',

      name: '芳姨',

      age: 19

    }]

  }, {

    title: 'R',

    list: [{

      url: '../img/r1.jpg',

      name: 'RoroHna',

      age: 19

    }]

  }

],

toview:""

},

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

},

/**

• 生命周期函数–监听页面初次渲染完成

*/

onReady: function () {

},

/**

• 生命周期函数–监听页面显示

*/

onShow: function () {

},

/**

• 生命周期函数–监听页面隐藏

*/

onHide: function () {

},

/**

• 生命周期函数–监听页面卸载

*/

onUnload: function () {

},

/**

• 页面相关事件处理函数–监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

• 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

• 用户点击右上角分享

*/

onShareAppMessage: function () {

},

clickletter: function (e) {

// console.log("clickletter----")

var letter = e.currentTarget.dataset.index

// console.log("letter:",letter)

this.setData({

  toview: letter

})

}

})