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 ...
随机推荐
- BZOJ 2946 [Poi2000]公共串 (二分+Hash/二分+后缀数组/后缀自动机)
求多串的最长公共字串. 法1: 二分长度+hash 传送门 法2: 二分+后缀数组 传送门 法3: 后缀自动机 拿第一个串建自动机,然后用其他串在上面匹配.每次求出SAM上每个节点的最长匹配长度后,再 ...
- “我”这个字的unicode码到底是25105
“我”这个字的unicode码到底是25105 “我”这个字的unicode码到底是25105 “我”这个字的unicode码到底是25105
- h5构建页面(rem布局准备)
新建一个flex.js ! function () { function t(t) { return this.config = t, this } t.prototype = { reset: fu ...
- 激活WebStorm2017.3.1
亲测有效,测试日期:20181202 转发自:https://blog.csdn.net/bjzhaoxiao/article/details/81486490
- XML -- XML基础知识
1.XML的结构 XML的结构采用的是树结构,树结构就是一种一对多的关系结构. XML必定有一个根节点.因为,在解析这个XML时,需要有个起始位置进行遍历解析,这个跟节点就是起始位置. 2.XML的元 ...
- linux下源码安装mariadb
1.mariadb源码包下载地址:https://downloads.mariadb.org/ 2.安装mariadb是依赖包,创建mysql用户和目录: 命令 yum -y install rea ...
- 推荐系统系列(五):Deep Crossing理论与实践
背景 特征工程是绕不开的话题,巧妙的特征组合也许能够为模型带来质的提升.但同时,特征工程耗费的资源也是相当可观的,对于后期模型特征的维护.模型线上部署不太友好.2016年,微软提出Deep Cross ...
- Codeforces 474D Flowers(DP)
题目链接 非常简单的一道dp题,通过O(n)的预处理来使查询变为O(1). 主要的坑在于取模后的dp数组的前缀和再相减可能得到负数,导致无法得到某一区间和的取模. 解决方法:(a-b)%mo==(a% ...
- boost1.59编译安装
boost 1.59.0编译及使用 1.下载: 网址:http://sourceforge.net/projects/boost/files/boost/1.59.0/ 选择:boost_1_59_0 ...
- This sample is for changing from “float64” to “int” for values did unmarshal using map[string]interface{}. When it did unmarshal using map[string]interface{}, a number with “int” was changed to “floa
This sample is for changing from “float64” to “int” for values did unmarshal using map[string]interf ...