vant组件list懒加载，子组件滚动条作用在父组件上的问题

最新推荐文章于 2024-01-11 16:40:51 发布

自学前端啥时候是个头

最新推荐文章于 2024-01-11 16:40:51 发布

阅读量574

点赞数

分类专栏： vue 文章标签： vue.js 前端前端框架 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/UVliuwei/article/details/128892660

版权

在Vue项目中，使用Vant的List组件和axios动态加载电影列表。从详情页返回列表页时，由于滚动条状态导致错误触发List的load事件。初次解决方案是在load事件判断条件中添加`total !== 0`，但这引发页面卡死，因为未考虑`number`状态。最终解决方案是在mounted生命周期中更新数据或重置`number`为1，以防止无限加载问题。

摘要由CSDN通过智能技术生成

项目：

利用vue-cil搭建框架，结合vant组件中的list组件和axios动态获取电影列表渲染列表页，然后根据列表页对应id跳转详情页。

初始化代码

export default {
  data () {
    return {
      filmslist: [],
      loading: false,
      finished: false,
      number: 1,
      total: 0
    }
  },
  mounted () {
    http({
      url: '******',
      headers: ********
    }).then(res => {
      this.filmslist = res.data.data.films
      this.total = res.data.data.total /* 获取json文件中电影的数量 */
    })
  },
  methods: {
    onLoad () {
      // console.log(this.filmslist.length)
      /* 增加判断防止详情页跳回便加载 */
      if (this.filmslist.length === this.total) {
        this.finished = true
        return
      }
      this.number++
      http({
        url: `*****&pageNum=${this.number}&pageSize=10&*****`,
        headers: ****