APP 中有一个标题栏,要求标题具有吸顶功能,而且点击对应标题页面滚动到相应位置;同理,滚动页面时,相应的标题也要高亮显示。
在纯网页开发中可以监听 scroll 事件和实时获取页面元素的 boundingRect 实现,但是在 uni-app 中这个功能如何实现呢?需要通过哪些接口实现?
要求兼容小程序和 H5+APP。
APP 中有一个标题栏,要求标题具有吸顶功能,而且点击对应标题页面滚动到相应位置;同理,滚动页面时,相应的标题也要高亮显示。
在纯网页开发中可以监听 scroll 事件和实时获取页面元素的 boundingRect 实现,但是在 uni-app 中这个功能如何实现呢?需要通过哪些接口实现?
要求兼容小程序和 H5+APP。
1***@qq.com - 资深问问题专家
touchStart(e) {
this.touchmove = true;
let pageY = e.touches[0].pageY;
let index = Math.floor(pageY / this.itemHeight);
this.scrollViewId = this.lists[index].letter;
this.touchmoveIndex = index;
},
touchMove(e) {
let pageY = e.touches[0].pageY;
let index = Math.floor(pageY / this.itemHeight);
this.scrollViewId = this.lists[index].letter;
this.touchmoveIndex = index;
},
touchEnd() {
this.touchmove = false;
this.touchmoveIndex = -1;
},
touchCancel(){
this.touchmove = false;
this.touchmoveIndex = -1;
}
_心想事成_ (作者)
但是怎么能得知 scroll-view 中的元素距离 scroll-view 顶部的距离呢?因为只有通过这个才能知道当前内容滚动到了哪里,以便使得对应的标题进行高亮显示。
2019-05-29 17:00
香蕉不是笨啦啦
回复 _心想事成_: createSelectorQuery了解一下
2019-05-29 17:19
_心想事成_ (作者)
回复 香蕉不是笨啦啦: 谢谢!
2019-05-29 17:55