滚动渐影效果
AI-摘要
切换
Tianli GPT
AI初始化中...
介绍自己
生成本文简介
推荐相关文章
前往主页
前往tianli博客
全局注册滚动/mixins/base.js :
// tabbar切换样式
tabbarIsShow(isShow){
if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) {
this.$mp.page.getTabBar().tabbarIsShow(isShow)
}
},
发现页注册/pages/tabbar/circle/circle.vue :
onPageScroll(e) {
let that = this;
let scroll_distance = (e.scrollTop - that.prevScrollTop);
if (scroll_distance > 8 && e.scrollTop >= 65 && scroll_distance <= 65) {
this.tabbarIsShow(false)
} else if(scroll_distance < -8 && scroll_distance >= -65) {
this.tabbarIsShow(true)
}
that.prevScrollTop = e.scrollTop;
},
/**
* 用户点击右上角分享
*/
首页注册/pages/tabbar/index/index :
onPageScroll(e) {
let that = this;
let scroll_distance = (e.scrollTop - that.prevScrollTop);
if (scroll_distance > 8) {
if(e.scrollTop >= 65){
if(scroll_distance >= 65){
that.subNavHeaderTranslateClass = 'subNavHeaderHidden';
}else{
that.subNavHeaderTranslateClass = 'subNavHeaderHiddenLowly';
this.tabbarIsShow(false)
}
}
} else if(scroll_distance < -8) {
if(scroll_distance <= -65){
that.subNavHeaderTranslateClass = 'subNavHeaderShow';
}else{
that.subNavHeaderTranslateClass = 'subNavHeaderShowLowly';
this.tabbarIsShow(true)
}
}else{
// that.subNavHeaderTranslateClass = '';
}
that.prevScrollTop = e.scrollTop;
},
个人中心页/pages/tabbar/mine/mine. :
onPageScroll: function onPageScroll(e) {
let that = this;
let scroll_distance = (e.scrollTop - that.prevScrollTop);
if (scroll_distance > 8 && e.scrollTop >= 65 && scroll_distance <= 65) {
this.tabbarIsShow(false)
} else if(scroll_distance < -8 && scroll_distance >= -65) {
this.tabbarIsShow(true)
}
that.prevScrollTop = e.scrollTop;
var trans = (e.scrollTop > 55 ? 55 : e.scrollTop) / 55;
if(trans > 1 && that.navbarTrans > 1){
return false;
}
var frontColor = '#ffffff';
var backgroundColor = '#000000';
var iconTheme = that.iconTheme;
if (trans <= 0) {
frontColor = '#ffffff';
backgroundColor = '#000000';
iconTheme = 'white';
} else if (trans >= 0.4) {
frontColor = '#000000';
backgroundColor = '#ffffff';
iconTheme = 'black';
}
that.setData({
navbarTrans: trans,
iconTheme: iconTheme,
});
uni.setNavigationBarColor({
frontColor: frontColor,
backgroundColor: frontColor,
animation: {
duration: 400,
timingFunc: 'easeIn',
}
});
},
消息页/pages/tabbar/notice/notice :
复制onPageScroll(e) {
let that = this;
let scroll_distance = (e.scrollTop - that.prevScrollTop);
if (scroll_distance > 8 && e.scrollTop >= 65 && scroll_distance <= 65) {
this.tabbarIsShow(false)
} else if(scroll_distance < -8 && scroll_distance >= -65) {
this.tabbarIsShow(true)
}
that.prevScrollTop = e.scrollTop;
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/个人使用,可以忽略
- 感谢你赐予我前进的力量
赞赏者名单
因为你们的支持让我意识到写文章的价值🙏
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果

