微信和通讯录经常看到这种,那么在小程序如何实现呢(等下我们需要用到小程序的一个官方组件),这个功能可以拆分两块,一个是滚动区域,一个是滑动定位区域。
实现
滚动区域
小程序里面实现滚动到指定位置,可以用 scroll-view 组件. (点击我即可查看小程序文档)
<scroll-view class="goup_list" scroll-with-animation="true" scroll-y="true" style="height: 300rpx;" scroll-into-view="{{toView}}">
<具体业务界面代码 />
</scroll-view>
复制代码
最后面是我刚刚录gif的代码。可以看到 scroll-view
组件,有一个属性 scroll-into-view
,这个属性可以实现转跳到指定位置。值是id,也就是Gif看到的 B、C、D的ID。
(最后会有完整代码)
滑动实现
滑动我们会想到 touchmove
事件,我们需要依靠这个判断滑动到了哪个索引(字母)。
但是滑动里面没有直接告诉你,是哪个组件,所以我们需要根据现有的信息进行利用,这里用的是y,x的信息。
拿到x,y之后的逻辑如下
用文字不好描述清楚,看下面图,可以这样求偏差值,然后除以每项的高度,就拿到了滑动到了第几项。 这里又涉及一个问题就是,怎么求单个项的高度。 height / 个数。
代码
var y = e.touches[0].pageY;
var itemLen = this.data.list.length
var height = letterDomRes.height
var top = letterDomRes.top
// 滑动的偏移量(偏差值)
var offsetTop = (height + top - y)
var itemHeight = height / itemLen
var index = itemLen - ((offsetTop / itemHeight)|0) - 1
if(index < 0 || index >= itemLen){
return
}
复制代码
还有就是上面数据从哪里来,也就是小程序如何拿下图中的top值和height。
代码
//创建节点选择器
var query = wx.createSelectorQuery()
query.select('.letter-index').boundingClientRect()
query.exec(function (res) {
letterDomRes = res[0]
console.log(letterDomRes);
})
复制代码
letterDomRes.height
letterDomRes.top
就是我们需要的数据了。
到这里就都完成了。然后加一个优化,超出滑动范围就return,上面代码也有了,然后设置的时候判断是否在滑动期间,是的话过滤相同的设置。
完整代码
JS
Page({
/**
* 页面的初始数据
*/
data: {
toView: '',list: [
{
word: 'B',children: [
{word: 'Ban',translation: 'vt. 禁止,查禁;n. 禁止,禁令'},{word: word: 'C',0);">'D',]
},// ---- methods
letterTap(e){
var id = e.target.id
// console.log(id)
this.setListSite(id)
},letterMove(e){
this.data.list.length
return
}
var letter = this.data.list[index].word
// console.log(index,letter)
// [优化] 过滤相同的
if(moveing_word == letter){
return
}
moveing_word = letter
this.setListSite('word_' + letter)
// console.log(height / this.data.list.length)
// / this.data.list.length
// console.log(letterDomRes.top)
},letterEnd(e){
// 重置
moveing_word = ''
},136);">/**
* 设置滚动位置
* @param {String} id 前缀 + 字母
*/
setListSite(id){
wx.showToast({
title: id.split('_')[1],icon: 'none',})
this.setData({
toView: id,duration: 500,})
},136);">/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},136);">/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//onshow中获取索引条高度
var query = wx.createSelectorQuery();//创建节点选择器
query.select('.letter-index').boundingClientRect()
query.exec(function (res) {
//res就是 所有标签为mjltest的元素的信息 的数组
letterDomRes = res[console.log(letterDomRes);
//取高度
console.log("height : "+res[0].height);
})
},136);">/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},136);">/**
* 生命周期函数--监听页面隐藏
*/
onHide: /**
* 生命周期函数--监听页面卸载
*/
onUnload: /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: WXML
<!--pages/word/strange.wxml-->
<view class="container">
<scroll-view class="goup_list" scroll-with-animation="true" scroll-y="true" style="height: 300rpx;" scroll-into-view="{{toView}}">
<"">
<"group_item" wx:for={{list}}" wx:key={{index}}">
<"group">
<"title" id="word_{{item.word}}">{{item.word}}</view>
<"word_list">
<"word_list_item" wx:for={{item.children}}">
<"e">
<view>view>
<"">{{item.translation}}</view>
</view>
<image mode="widthFix" src="/image/right.png" class="right-image" />
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<"letter-index" bind:touchmove="letterMove" bindtap="letterTap" bind:touchend="letterEnd">
<"item" id={{item.word}}" wx:for={{list}"index">view>
</view>
复制代码
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。