Navbar和Infinite scroll共同使用时会出现无限加载的问题,滑动也会出现乱加载。

只需要判断一下就可以了,代码:

html:

    <mt-navbar v-model="selected">
<mt-tab-item id="aa" @click.native.prevent="showAA">option A</mt-tab-item>
<mt-tab-item id="bb" @click.native.prevent="showBB">option B</mt-tab-item>
</mt-navbar> <mt-tab-container v-model="selected">
<mt-tab-container-item id="aa">
<ul v-if="selected == 'aa'" v-infinite-scroll="addAAList" infinite-scroll-disabled="aaloading" infinite-scroll-distance="10">
<li v-for="i in arr1">{{i}}</li>
</ul>
</mt-tab-container-item>
<mt-tab-container-item id="bb">
<ul v-if="selected == 'bb'" v-infinite-scroll="addBBList" infinite-scroll-disabled="bbloading" infinite-scroll-distance="10">
<li v-for="i in arr2">{{i}}</li>
</ul>
</mt-tab-container-item>
    ...
</mt-tab-container>

js:

    data() {
return {
selected: 'aa',
arr1: [],
aal: false,
...
}
}, methods: {
showAA() {
this.aal = true;
for (let i = 0; i < 10; i++) {
this.arr1.push('AA = ' + (this.arr1.length + 1));
}
this.aal = false;
},
showBB() {
     ...
},
},

mint ui解决Navbar和Infinite scroll共存时的bug的更多相关文章

  1. 解决Android ListView 和 ScrollView 共存时冲突 问题 方法其一

    转载请注明出处: http://www.goteny.com/articles/2013/11/8.html http://www.cnblogs.com/zjjne/p/3428480.html 当 ...

  2. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  3. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  4. Mint UI Example的运行

    Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...

  5. vuetify,vux,Mint UI 等框架的选择

    vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...

  6. 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现

    一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...

  7. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  8. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  9. JavaScript Infinite scroll & Masonry

    // infinitescroll() is called on the element that surrounds // the items you will be loading more of ...

随机推荐

  1. C#双缓冲解释

    C#双缓冲解释 简单说就是当我们在进行画图操作时,系统并不是直接把内容呈现到屏幕 C#双缓冲 上,而是先在内存中保存,然后一次性把结果输出来,如果没用双缓冲的话,你会发现在画图过程中屏幕会闪的很厉害, ...

  2. Laravel进行数据库迁移(migration)

    迁移(migration) 文档的简介是:迁移就像数据库的版本控制,允许团队简单轻松的编辑并共享应用的数据库表结构,迁移通常和 Laravel 的结构构建器结对从而可以很容易地构建应用的数据库表结构. ...

  3. MySQL_(Java)使用JDBC向数据库中删除(delete)数据

    MySQL_(Java)使用JDBC向数据库发起查询请求 传送门 MySQL_(Java)使用JDBC向数据库中插入(insert)数据 传送门 MySQL_(Java)使用JDBC向数据库中删除(d ...

  4. [CSP-S模拟测试]:联合权值·改(暴力)

    题目传送门(内部题143) 输入格式 输入文件的第一行为三个整数$n,m,t$.其中$t$是数据类型. 接下来$m$行,每行两个正整数$u,v$,表示图中的一条边.数据保证不存在重边或自环的情况.   ...

  5. Robot Framework自动化测试(一)--- 安装

    所需环境: 1.python 2.robotframework https://pypi.python.org/pypi/robotframework/2.8.5#downloads 3.wxPyth ...

  6. C++入门经典-例7.7-对象与复制,菌类的繁殖

    1:当函数以相应的类作为形参列表时,对象可以作为函数的参数传入.在学习函数时,我们曾提过,值传递先复制实参产生副本.那么对象的副本是怎样的呢? 复制构造函数是指类的对象被复制时所调用的函数.下面两种情 ...

  7. (十六)C语言之函数

  8. boost1.59编译安装

    boost 1.59.0编译及使用 1.下载: 网址:http://sourceforge.net/projects/boost/files/boost/1.59.0/ 选择:boost_1_59_0 ...

  9. b+tree索引在MyIsam和InnoDB的不同实现方式

    普通二叉搜索树当索引的劣势: (1)每个节点占用的空间太少,不能很好的利用磁盘的预读性 (2)数据不规律的话,很可能形成链表 (3)频繁IO b树当索引机制相比于二叉树的优势和劣势: (1)每个节点有 ...

  10. LeetCode 145. 二叉树的后序遍历(Binary Tree Postorder Traversal)

    题目描述 给定一个二叉树,返回它的 后序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [3,2,1] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 解题思路 后 ...