首先這是一個(gè)仿微信頁(yè)面的通訊錄列表：

當(dāng)點(diǎn)擊頁(yè)面右側(cè)的字母欄時(shí)，頁(yè)面將跳轉(zhuǎn)到相應(yīng)字母的位置。

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({

/**

• 頁(yè)面的初始數(shù)據(jù)

*/

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: '大拇指運(yùn)動(dòng)',

      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:""

},

/**

• 生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面加載

*/

onLoad: function (options) {

},

/**

• 生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面初次渲染完成

*/

onReady: function () {

},

/**

• 生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面顯示

*/

onShow: function () {

},

/**

• 生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面隱藏

*/

onHide: function () {

},

/**

• 生命周期函數(shù)–監(jiān)聽(tīng)頁(yè)面卸載

*/

onUnload: function () {

},

/**

• 頁(yè)面相關(guān)事件處理函數(shù)–監(jiān)聽(tīng)用戶下拉動(dòng)作

*/

onPullDownRefresh: function () {

},

/**

• 頁(yè)面上拉觸底事件的處理函數(shù)

*/

onReachBottom: function () {

},

/**

• 用戶點(diǎn)擊右上角分享

*/

onShareAppMessage: function () {

},

clickletter: function (e) {

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

var letter = e.currentTarget.dataset.index

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

this.setData({

  toview: letter

})

}

})