微信小程序--字母栏（类似通讯录的字母栏）

今天给大家带来了自己在写项目时，做的一个例子，主要的功能就是类似手机通讯录的字幕栏，点击字母跳转到对应的位置，也有些类似js里的锚点跳转，小程序里scroll-view里给我们提供了一个很好的功能，scroll-into-view

话不多说上代码

wxml：部分

  <view class="index"></view>

 <--  !主要内容区-->

<view w class="contents">

<--  !滚动区-->

<scroll-view  scroll-y scroll-into-view="{{toWhich}}">

<view wx:for="{{textData}}" id="view{{item.id}}" class="listA" wx:key="item">{{item.id}}

</scroll-view>

</view>

<--  !右侧字母栏-->

<view class="right">

<view class="letters" wx:for="{{['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', '', 'Y', 'Z']}}" wx:key="item" data-hash="{{item}}" bindtap="click">{{item}}</view>

</view>

<./view>

js部分

var app = getApp()；

Page({

data: {

//  初始位置

  toWhich:'viewA',

  textData: [ {

    id: 'A'

},{

   id: 'B'

},{

  id: 'C'

},{

id:'D'

},{

id:'E'

},{

  id:'F'

}]

},

// 点击右侧字幕栏的字母

  click: function (e) {

  var hash = e.target.dataset.hash;

  var haha = 'view' + hash;

  this.setData({

    toWhich: haha

  })

console.log( this.data.toWhich)

// 提示框，提示点击跳转到的字母

  wx.showToast({

   title: hash,

   mask:true

})

},

  onLoad: function () {

   }

})