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

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

话不多说上代码

wxml：部分

 

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

<--  !滚动区-->

{{item.id}}

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

{{item}}

<./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 () {

   }

})