优化-阅读记忆-lazy-render属性-开启延迟渲染 & 使用scrollTop-绑定滚动事件,记录阅读位置 & ref-给元素或子组件注册引用信息 & $nextTick() 下一帧 时间延时
-
tab组件,默认是懒加载,会导致操作dom问题,需要关闭,自己主动来加载。
-
onload tab被激活的时候,根据页面高度,去主动加载数据。
-
lazy-render 属性 设置为 false
是否开启延迟渲染(首次切换到标签时才触发内容渲染) 默认值为true
lazy-render属性:https://youzan.github.io/vant/#/zh-CN/tab#api
-
-
切换tab组件的时候 (没有数据)
- 如果之前没有加载过数据,开启上拉加载效果,调用加载函数。
- 如果有数据,操作当前列表,滚动到阅读位置 (目前:tab切换默认记住阅读位置)
-
绑定滚动事件,记录阅读位置,使用scrollTop,每一个文章列表都拥有自己的阅读位置。
-
激活组件的时候,操作当前激活列表,滚动到阅读位置。
src/vies/home/index.vue
中:
关闭懒加载:
<van-tabs :lazy-render="false"></van-tabs>
监听滚动:
//<!--一个内容可以滚动的容器(记录浏览的位置)-->
//<div @scroll="remember($event)"></div>
<div ref="scroll-wrapper" class="scroll-wrapper" @scroll="remember($event)">
记录阅读位置:
src/vies/home/index.vue
中methods里
remember (e) {
// 记录当前激活的频道 滚动容器的滚动位置
this.activeChannel.scrollTop = e.target.scrollTop
},
需要提前设置记录阅读位置数据:
// 获取数据
async getChannels () {
const data = await getChannels()
// 组织数据
this.channels = data.channels.map(item => ({
id: item.id,
name: item.name,
timestamp: Date.now(),
upLoading: false,
downLoading: false,
finished: false,
articles: [],
+ scrollTop: 0
}))
}
},
在激活组件时候,跳转记录的位置:
src/vies/home/index.vue
中export defort{}里
activated () {
// 激活组件触发
// 获取当前激活的滚动容器
// this.$refs['scroll-wrapper'] 获取的是dom数组,如果没有容器值undefined
// 设置之前记录的阅读位置即可
if (this.$refs['scroll-wrapper']) {
this.$refs['scroll-wrapper'][this.activeIndex].scrollTop = this.activeChannel.scrollTop
}
},
注:
ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs
对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
激活后,切换tab组件的时候(默认滚动到了顶部,tab组件做的)
- 在切换tab的时候,判断是否有数据,定位到之前阅读的位置。
- 没有数据,加载数据。
src/vies/home/index.vue
中的methods里
// 切换频道触发函数
changeChannel () {
// 判断当去激活的频道是否有文章数据
const articles = this.activeChannel.articles
if (articles.length) {
// 有数据 定位到之前阅读的位置
// 两句代码:定位到阅读位置 tab组件做的回调顶部 (tab的dom操作在我们的后面)
// function(){ setTimeout(()=>{console.log(1)},0) console.log(2) }
// window.setTimeout(() => {
// this.$refs['scroll-wrapper'][this.activeIndex].scrollTop = this.activeChannel.scrollTop
// }, 0)
// vue 提供相同的功能 $nextTick() 下一帧 时间延时
this.$nextTick(() => {
// 使用场景:做一些需要延时做的事情 (等dom渲染完毕)
this.$refs['scroll-wrapper'][this.activeIndex].scrollTop = this.activeChannel.scrollTop
})
} else {
// 没有数据
// 看到加载中效果
this.activeChannel.upLoading = true
// 主动加载数据
this.onLoad()
}
},