vue-infinite-scroll 与多次调用loading遇到的坑

遇到的问题

在用开发移动端商城过程中,运用mint-ui 框架的无限滚动加载Infinite scroll 和 keep-alive 缓存 ,在从列表页跳到详情页的时候一直触发loading 无限加载数据。

解决方案

从列表页跳到详情页用编程式导航,并且跳页时把loading 改为 true,禁止触发加载函数,从详情页返回列表页时要用
back(){
this.$router.go(-1)
}

反回时要在 activated 钩子函数中把loading 改回false。
// keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

<div class="hotList"  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10" :infinite-scroll-immediate-check="true" ><div class="hot-item" v-for="(hot,index) in hotList" :key="index"><div class="hot-a" @click="togonggaoList"><img v-lazy="hot.goods_img[0]"><span>{{hot.goods_name}} </span></div><p class="price">￥{{hot.shop_price}}</p><p class="midou">赠送<span>{{hot.back_midou}}</span>米豆</p></div></div>import {Indicator} from 'mint-ui' import { InfiniteScroll } from 'mint-ui';import Vue from 'vue'Vue.use(InfiniteScroll);import { Tabbar, TabItem } from 'mint-ui';Vue.component(Tabbar.name, Tabbar);Vue.component(TabItem.name, TabItem);export default {name:'Home',data(){return {lunbo:[],hotList:[],p:2,totalPages:'',loading:false,check:true}},created(){this.$axios({url:'api/applet/Index/index',}).then((res)=>{this.lunbo = res.data.data.banner;console.log(res)}).catch((err)=>{console.log(err)})this.$axios.get('api/applet/Index/ajaxGetMore?p=1').then((res)=>{this.hotList = res.data.data.favourite_goods;this.totalPages= res.data.data.pages.totalPages;}).catch((err)=>{})},activated(){this.loading=false; // keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
},//跳到公告列表
togonggaoList(){this.loading=true;this.$router.push({name:'gonggaoList'})
}

总结

第一次写博客，本人也是刚学习vue，如果有写的不对地方请指出来，大家多交流，或者有更好的解决方法欢迎大家留言

vue-infinite-scroll 与多次调用loading遇到的坑相关推荐

mint-ui 中 Infinite scroll 在tab-container中使用数据全部加载的问题
项目中用到了Infinite scroll 这个组件,但是初始化的时候,getList总会请求两次, 网上查了部分资料,如 <ul class="mui-table-view &quo ...
jquery插件（二）：Infinite Scroll–无限分页
一.前言现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
infinitescroll php,WordPress：增加无限分页（Infinite Scroll）功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
无限滚动插件Infinite Scroll
最近一个项目需要用到无限滚动,调查了很多最后用了Infinite Scroll这个插件. 优点 ①ajax的函数是内部已经封装好,所有不需要单独的调用. ②后台返回的形式既可以是静态html形式也可以 ...
Infinite Scroll - jQuery WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
详细解析：uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
WordPress下拉加载插件Infinite Scroll之手动点击加载实现
本文基于上一篇博文<WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录>而写,上文说到WordPress插件Infinite Scroll的自动加载分页 ...
div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
vue 执行函数this_在vue中使用回调函数,this调用无效的解决
let self = this //使用新变量替换this,以免this无效 //updatestudentinfotoserver是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据, ...

vue-infinite-scroll 与多次调用loading遇到的坑

vue-infinite-scroll 与多次调用loading遇到的坑

遇到的问题

解决方案

总结

vue-infinite-scroll 与多次调用loading遇到的坑相关推荐

最新文章

热门文章

vue-infinite-scroll 与 多次调用loading遇到的坑

vue-infinite-scroll 与 多次调用loading遇到的坑

遇到的问题

解决方案

总结

vue-infinite-scroll 与 多次调用loading遇到的坑相关推荐

最新文章

热门文章

vue-infinite-scroll 与多次调用loading遇到的坑

vue-infinite-scroll 与多次调用loading遇到的坑

vue-infinite-scroll 与多次调用loading遇到的坑相关推荐