css 设置
它是一个比较新的属性,所以不是所有浏览器都能实现
position:sticky;
top:40px; //必须设置 top 的位置来确定它滚动到距离上面是哪里才开始 sticky
JS 设置
思路
1.必须知道滚动到多少时,开始有吸顶效果
看这个元素距离上边的距离是多少,用属性 offserTop
注意,这个属性值如果不准,是因为页面加载的时候图片是后加载的。这个值如果是在图片加载之前返回的就不准。需要先判断该元素上面的图片是否都加载完毕了,然后再开始计算这个值。
this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
//所有的组件都有一个属性 $el,用于获取组件中的 Dom 元素
2.将 Better Scroll 里面的 tabControl2 复制一份到 masthead 下面。先隐藏,等下面的 tabControl2 滚动到 offsetTop 的时候让这个障眼法的 tabControl1 来实现停留效果。
这么写是因为 Better Scroll 的特殊性 设置 position 失效,因此我们不得不采取这种障眼法来达到效果。如果没有用 Better Scroll 的话,完全可以在滚动到 offsetTop 的时候设置 其 style 为: position: fix; left:0;right:0;top:44px; (44是 masthead 的高度)
<tab-control class="tab-control" ref="tabControl1" v-show="isShowTabControl" :titles='["新品", "热门", "小众2"]' @tabClick="tabClick" />
<scroll class="scroll" ref="scroll" :probeType="3" @scroll="handleScrollContent" :pullUpLoad="true" @pullingUp="loadMore">
。。。
。。。
。。。
。。。
<tab-control ref="tabControl2" :titles='["新品", "热门", "小众2"]' @tabClick="tabClick" />
。。。
。。。
。。。
。。。
</scroll>
<back-top @click.native="backTopClick" v-if="isShowBackTop" />
<script type="text/javascript">
export default {
components: { TabControl, Scroll, BackTop },
data() {
return {
currentType: 'new', //当前显示的 tab 里的商品类型
goods: {
'new': { page: 0, list: [] },
'pop': { page: 0, list: [] },
'sell': { page: 0, list: [] }
},
isShowBackTop: false, // 是否显示返回顶部按钮
tabOffsetTop: 0, //tabControl距离顶部的距离
isShowTabControl: false, //是否显示吸顶的tabControl
}
},
mounted() {
this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
},
methods: {
tabClick(i) { // tab 切换
this.currentType = Object.keys(this.goods)[i];
// 注意障眼法设置两个tabControl内部的currentIndex一致
this.$refs.tabControl1.currentIndex = i;
this.$refs.tabControl2.currentIndex = i;
},
handleScrollContent(position) { //监听滚动位置
// 1.是否显示backTop图标
this.isShowBackTop = (-position.y) > 1000;
// 2.障眼法显示tabControl吸顶
this.isShowTabControl = (-position.y) > this.tabOffsetTop;
},
backTopClick() { //返回顶部
this.$refs.scroll.scrollTo();
},
loadMore() { //上拉加载更多
this.getHomeGoods(this.currentType);
},
},
}
</script>
<style scoped>
.home {
height: 100vh;
position: relative;
}
.tab-control { /*障眼法的 tab 的 css*/
position: relative; /*设置了 position 之后才可以设置 z-index*/
z-index: 9;
}
.scroll {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 44px;
bottom: 49px;
overflow: hidden;
}
.home-nav {
background-color: #ffcffb;
}
</style>