建立一个网站如何开通账号,建公司,网上商店系统,二维码表白网页在线生成制作非重点的代码#xff0c;比如样式啥的#xff0c;我就不放上来了#xff0c;一笔带过简略的写一下1. data ()data () {paddingBottom: 1.5rem, // 给最外层div一个padding-bottom// 因为footer是fixed定位 如果padding-bottom为0 数据列表拉到最下面的时候 会有部分数据被fo…非重点的代码比如样式啥的我就不放上来了一笔带过简略的写一下1. data ()data () {paddingBottom: 1.5rem, // 给最外层div一个padding-bottom// 因为footer是fixed定位 如果padding-bottom为0 数据列表拉到最下面的时候 会有部分数据被footer挡住isFixed: false, // bar浮动offsetTop: 0, // 触发bar浮动的阈值marginTop: 0, // 触发bar浮动的同时 给数据列表一个margin-top 防止列表突然上移 会很突兀advertShow: true, // 广告显示}2. mounted ()mounted () {// 设置初始的 padding-bottom 值为 footer 的高度 20 防止数据列表拉到最下面被footer挡住 多少自定this.paddingBottom document.querySelector(.footer).offsetHeight 20 px;// 设置bar浮动阈值为 #fixedBar 至页面顶部的距离this.offsetTop document.querySelector(#fixedBar).offsetTop;// 开启滚动监听window.addEventListener(scroll, this.handleScroll);}3. methodsmethods: {// 关闭广告del () {this.advertShow true;this.$nextTick(() {this.paddingBottom document.querySelector(.footer).offsetHeight 20 px;});},// 滚动监听 滚动触发的效果写在这里handleScroll () {var scrollTop window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;if (scrollTop this.offsetTop) {this.isFixed true;this.marginTop document.querySelector(#fixedBar).offsetHeight px;} else {this.isFixed false;this.marginTop 0;}}}4. destroyed ()destroyed () {window.removeEventListener(scroll, this.handleScroll); // 离开页面 关闭监听 不然会报错}效果图以上这篇开发者。
