先看效果
介绍
一个简单的静态页面主要是使用 better-scroll 做横向滚动，点击标签滚动到相应位置，以及滚到相应位置后对应标签显示红色。开发过程中遇到了几个问题一：初始化的时候要计算内容的高度，一直有误差，因为一开始直接用 img 引入的，没加载完就计算高度就会有问题解决办法：用 background 写图片，然后高度写死二：滚动到某个内容，对应标签高亮这里比较的是当前滚动位置高度和内容距离 dom 顶部的高度加上实际 nav 的高度三：better-scroll fixed 后滚动失效这里是因为没有给固定的宽度，用了 100% 造成的。这里给了 tab-warp 宽度就解决了
记录一下和大家共同学习
主要代码
因为是静态野蛮标题放到数组中了
itemList: [{
‘title’: ‘ 战略升级 ’
},
{
‘title’: ‘ 官方授权 ’
},
{
‘title’: ‘100% 正品 ’
},
{
‘title’: ‘ 全链路监管 ’
},
{
‘title’: ‘ 阳光保险 ’
},
{
‘title’: ‘ 售后无忧 ’
},
{
‘title’: ‘ 专业仓储 ’
},
{
‘title’: ‘ 用户好评 ’
},
{
‘title’: ‘ 媒体监督 ’
},
{
‘title’: ‘ 资质公示 ’
}
],
mounted() {
this.$nextTick(() => {
window.addEventListener(‘scroll’, this.handleScroll) // 监听滚动事件
this.InitTabScroll() // 初始化滚动
})
},
methods: {
handleChange(index) {
this.swipeIndex.nowIndex = index + 1
},
// 监听滚动事件
handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
document.body.scrollTop
// 吸顶效果
const isFixed = scrollTop >= this.tabToTop
if (isFixed !== this.isFixed) {
this.isFixed = isFixed
}
// 当页面滚动时候标签也要滚动
for (var i = 0; i < this.contentH.length; i++) {
// 循环判断内容高度的数组，滚动的高度小于前一个大于后一个设置，这里是包含下拉面板的高度（我也不知道为什么，自己试出来的，尴尬）
if (scrollTop + this.tabRealHeight> this.contentH[i] && scrollTop + this.tabRealHeight< this.contentH[i + 1]) {
if (this.checkIndex !== i) {
this.checkIndex = i
// 然后设置标签高亮，滚动到居中位置
this.scroll.scrollToElement(this.$refs.tabitem[i], 300, -100)
}
}
}
},
// 初始化方法
InitTabScroll() {
/*
* 这里有几个高度需要注意一下，因为后面要计算滚动距离，这里要很精确要不就会出问题
* tabToTop tab 距离顶部的高度，也就是第一个图片的高度
* tabRealHeight 是 tab 点下拉箭头显示面板后的高度
* tabHeight 就是 tab 的高度了
*/
// 头部高度
this.tabToTop = this.$refs[‘tab-containter’].offsetTop
// tab 带面板高度
this.tabRealHeight = this.$refs[‘tab-containter’].offsetHeight
// tab 高度
this.tabHeight = this.$refs[‘tabitem’][0].offsetHeight
// 内容高度要记录下来放在数组里，当页面滚动的时候判断在哪个区间，对于标签高亮
for (let i = 0; i < 11; i++) {
this.contentH.push(this.$refs[‘contentItem’ + i].offsetTop)
}
// nav 横向滚动宽度，然后设置
let width = 0
for (let i = 0; i < this.itemList.length; i++) {
width += this.$refs.tabitem[i].getBoundingClientRect().width // getBoundingClientRect() 返回元素的大小及其相对于视口的位置
}
this.$refs.tabWrapper.style.width = width + ‘px’
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.tab, {
startX: 0,
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: ‘vertical’
})
} else {
this.scroll.refresh()
}
})
},
// 点击 nav 标签
checkStatus(index, pop) {
this.checkIndex = index
// 点击展开面板的选项
if (pop) {
this.flag = !this.flag
}
// 点击标签后，标签要滚到 nav 中间位置
this.scroll.scrollToElement(this.$refs.tabitem[index], 300, -100)
// 获取该点击标签对应的内容区域，距离 dom 顶部高度
const offsetTop = this.$refs[‘contentItem’ + index].offsetTop
// 页面滚动到高度减去 nav 的位置
window.scrollTo(0, offsetTop – this.tabHeight)
}
}
总结
主要功能实现了，但是还有很多需要优化的地方查看 demo 正品保障 完整代码 github 微信扫码看我们的小程序
关于我
您可以扫描添加下方的微信并备注 Soul 加交流群，给我提意见，交流学习。