vant tab选项卡左右滑动且保留数据

最新推荐文章于 2024-09-23 20:56:39 发布

夜惊如水

最新推荐文章于 2024-09-23 20:56:39 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_41422208/article/details/111981807

vue 专栏收录该内容

7 篇文章

订阅专栏

该博客主要讨论前端页面的滚动加载实现，使用`onClick`和`onLoad`事件处理数据加载。当列表项的`products`长度为0时，启动加载状态。`onLoad`方法中，通过API获取数据并更新产品列表，同时处理分页。当达到最后一页时，设置加载状态为已完成。此外，`handleScroll`函数用于监听滚动事件，改变背景透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    onClick() {
      this.$nextTick(() => {
        document.documentElement.scrollTop = document.body.scrollTop = this.list[this.active].scrollTop
      })
      if (this.list[this.active].products.length > 0) return
      this.list[this.active].loading = true;
      this.onLoad()
    },
    onLoad() {
      const data = {
        newsType: this.active == 0 ? null : this.active,
        pageNum: this.list[this.active].page,
        pageSize: this.pages.size
      }
      newsManager(data).then(res => {
        res.data.list.map(item => {
          item.videoThumb = JSON.parse(item.videoThumb)
          item.newsImgs = item.newsImgs ? JSON.parse(item.newsImgs) : []
        })

        this.list[this.active].products = this.list[this.active].products.concat(res.data.list)
        if (res.data.list.length > 0) {
          this.list[this.active].page++
        }

        // 加载状态结束
        this.list[this.active].loading = false;
        // 数据全部加载完成
        
        if (this.list[this.active].page > res.data.totalPage) {
          this.list[this.active].finished = true;
        }
      })
    },
    handleScroll() {
      let s = document.documentElement.scrollTop || document.body.scrollTop
      this.list[this.active].scrollTop = s
      if (s >= 100) {
        s = 100
      } 
      this.$refs.nav.$el.style.background = `rgba(255,255,255, ${s * 0.01})`
    },