mint ui解决Navbar和Infinite scroll共存时的bug
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的更多相关文章
- 解决Android ListView 和 ScrollView 共存时冲突 问题 方法其一
转载请注明出处: http://www.goteny.com/articles/2013/11/8.html http://www.cnblogs.com/zjjne/p/3428480.html 当 ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- Mint UI Example的运行
Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...
- vuetify,vux,Mint UI 等框架的选择
vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...
- JavaScript Infinite scroll & Masonry
// infinitescroll() is called on the element that surrounds // the items you will be loading more of ...
随机推荐
- [Functional Programming] Add, Mult, Pow, isZero
const log = console.log; // zero :: &fa.a const zero = f => x => x; // zero is F // once : ...
- SpringBoot AOP介绍
说起spring,我们知道其最核心的两个功能就是AOP(面向切面)和IOC(控制反转),这边文章来总结一下SpringBoot如何整合使用AOP. 一.示例应用场景:对所有的web请求做切面来记录日志 ...
- 32. ClustrixDB License管理
一.许可的概述 ClustrixDB必须拥有有效的许可证才能运行.本授权指定: 集群中允许的最大节点数 ClustrixDB将使用的最大核数 在裸金属系统上,ClustrixDB将尝试启用与已授权的物 ...
- java+文件批量下载
这篇文章主要介绍了Java实现批量下载选中文件功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下 1.在action中定义变量 private List<String> downLoa ...
- luogu3812 【模板】线性基
Code: #include <cstdio> #include <algorithm> #define ll long long #define N 64 #define s ...
- Gitlab启动、停止、重启(两种启动方式)
因为Gitlab不是我部署的,是之前总监部署的,服务器突然更新系统了,Git服务器就没有自启··自启··自启······,自己操作启动没有成功,然后网上搜了一下都是这三种启动关闭重启的方式,可是我这里 ...
- BZOJ3033太鼓达人
第一问,1<<k,谁都看得出来. 毫无思路,暴搜,枚举每一个数列,Hash加map判断是否重复,拿到30,打表都打不出来. #include <iostream> #inclu ...
- 【学习】eclipse自动提示+自动补全
解决代码的自动提示问题: 1.打开 Eclipse -> Window -> Perferences 2.找到Java 下的 Editor 下的 Content Assist , 右边出现 ...
- LeetCode 114. 二叉树展开为链表(Flatten Binary Tree to Linked List)
题目描述 给定一个二叉树,原地将它展开为链表. 例如,给定二叉树 1 / \ 2 5 / \ \ 3 4 6 将其展开为: 1 \ 2 \ 3 \ 4 \ 5 \ 6 解题思路 二叉树转化为链表的基本 ...
- wait/notify模拟连接池
连接池中的连接可重复使用,减少每次新建和烧毁连接对资源的消耗,但连接池的容量大小也要设置合理,否则也会占用多余的资源.连接池的基本功能是获取连接和释放连接 连接在java中也是一个类,连接对象是一个普 ...