渲染列表 (八) -优化-阅读记忆-lazy-render属性-开启延迟渲染 & scrollTop-记录阅读位置 & ref-给子组件注册引用信息 & $nextTick() 下一帧 时间延时

优化-阅读记忆-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()
      }
    },