今天给大家带来了自己在写项目时，做的一个例子，主要的功能就是类似手机通讯录的字幕栏，点击字母跳转到对应的位置，也有些类似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 () {
}
})
