vue实现吸顶效果,
这篇文章主要为大家详细介绍了VUE实现吸底按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了VUE实现吸底按钮的具体代码，供大家参考，具体内容如下
模板
div id=test
ul class=列表框
li v-for=(item，key) in 50 :key=key
{{ item }}
/李
/ul
过渡名称=淡化
p :class=[go ，{ is fixed:header fixed }] v-if= header fixed
吸底按钮
/p
/过渡
/div
/模板
脚本
导出默认值{
名称："测试",
data() {
返回{
headerFixed: false，
}
},
已安装(){
窗户。addevent侦听器( scroll ，this.handleScroll)
},
销毁(){
窗户。removeeventlistener( scroll ，this.handleScroll)
},
方法：{
handleScroll() {
const scrollTop=
窗户。页面偏移 文档。文档元素。向上滚动 文档。身体。滚动顶部
this.headerFixed=scrollTop 50
},
},
}
/脚本
style lang=scss scoped=scoped
#测试{。列表框{
填充-底部：50px
}。去吧
背景：粉色；
文本对齐：居中；
行高：50px
宽度：100%;
}。已修复{
位置：固定；
底部：0;
}。淡入{
不透明度：0;
}。淡入激活{
转场：不透明度0.8s
}。淡出-离开至{
不透明度：0;
}。淡化-保持活动状态{
转场：不透明度0.8s
}
}
/风格
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。