哥几个，看来遇到有人在JS文件里乱搞那个什么page onPageScroll事件和scroll-view的scroll事件导致卡顿的事儿不少~就是那种setData渲染太闹心，把其他脚本给拖慢，弄得网页速度跟幻灯片似的。别担心，我这儿教你一个解决办法！
首位的事情，就是教你好好解决底栏吸顶的问题嘞。其实这东西很简单，用wxs回应下事件就可以了。从2.4.4版本起就已经有这个功能了。如果你还是在使用老版本的话，也不用太紧张，我们都会帮你搞定哒~只需把页面跟scroll-view组件的高度设成100%，那么当垂直滚动条超出导航顶部位置时，导航就会自动显现出来了这样一来，让人烦恼的卡顿情况也就拜拜~
来给你们分享个好玩儿的东东。只需要利用scroll-view这个小神器，就能轻松搞定渐变式导航了，是不是感觉很神奇？当垂直滚动条移到特定位置时，导航栏便会神奇般地显示出来，而且它的透明度还会随着滚动条位置的变化而变化！让你的网页看上去更加灵动有趣！
{{item}}
第{{index}}部分
哈喽，我还有个问题想问大家。你们是不是觉得在网页或者滚动视图上触发 onPageScroll 或 scroll 事件总是会卡顿？这个问题确实让人头疼！别担心，我这儿有个实用小技巧可以帮助你们解决它~
/* wxss文件 */
page{
font-size: 30rpx;
background: #fea;
height: 100%;
}
.div{
width: 100%;height: 500rpx;
}
.nav-image{
width: 100%;height: 400rpx;
vertical-align: middle;
}
.navigation{
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
top:0;left:0; /*只有使用定位才起效果*/
}
.navigation view{
padding: 15rpx 20rpx;
margin: 0 20rpx;
}
别急，告诉你个超级实用的解决方案，用 wxs 就能轻松搞定这个问题。其实，自打 2.4.4 的基础库开始，这项功能就有了。要是你的设备比较老，不用担心，我们可以帮你做好适配。简单的说，当你滑动屏幕，使得整个页面和 scroll-view 占满全屏后，就能看到那个长长的横条上拉超过顶部的导航了。这时，导航就会老实地呆在最上方，再也不会出现卡顿的情况咯！
//wxs文件
var scrollEvent = function (e, ins) {
var scrollTop = e.detail.scrollTop;
var navTop = e.currentTarget.dataset.top;
if (scrollTop >= navTop) {
ins.selectComponent('.navigation').setStyle({
"position": 'fixed'
})
} else {
ins.selectComponent('.navigation').setStyle({
"position": 'static'
})
}
}
module.exports = {
scrollEvent: scrollEvent
}
你们还没走哇？太好了！其实我想问下，你们在用 page 的 onPageScroll 和 scroll-view 的 scroll 事件时会不会常常遇到卡顿问题呀？这真的是很让人生气！不过别担心，我这儿有办法可以解决~
//js文件
Page({
/**
* 页面的初始数据
*/
data: {
navBarList: ['喜欢', '点赞', '收藏'],
navTop:0, //导航距顶部距离
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getNavTop();
},
/**
* 获取导航距顶部距离
*/
getNavTop() {
var that = this;
var query = wx.createSelectorQuery();
query.select('.navigation').boundingClientRect(function (data) {
that.setData({
navTop: data.top,
})
}).exec();
},
})
好消息告诉你，我们网站有个神器，叫scroll-view组件，可以让你网页变得炫酷起来！这个组件可以把导航条随着滚动条移动显现出来，最牛逼的还有，它能依据滚动条的位置调节自己的透明度！有了这些功能，网页肯定更有意思啦
等会儿揭晓答案咯！如果在.js文件里写page onPageScroll或者scroll-view scroll的时候卡住了，放心大胆地试这两招小秘籍！第一个是用wxs来响应事件，加个顶部吸顶效果；其次就是利用scroll-view组建做个逐步下滑的导航。很实用，保证帮你解决卡顿问题。今天就聊到这儿！希望能激发你们灵感！下次再遇到这种事儿，记得试试看！别偷懒留言互动，点赞分享，把这些妙招告诉更多朋友们！感谢各位的关注支持！
我是导航条
第{{index}}部分
评论0