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 ...
随机推荐
- FZU-1901-Period 2(KMP)
链接: https://vjudge.net/problem/FZU-1901 题意: For each prefix with length P of a given string S,if S[i ...
- WCF概述
Tips:概念性的东西仅助理解,可以略过 概述 1.SOA概述 1).从三个问题开始 SOA是什么——面向服务架构.一种编程模式.一种架构模式.它将应用程序分成不同功能(服务)单元,再通过服务之间的接 ...
- Codeforces Round #451 (Div. 2) [ D. Alarm Clock ] [ E. Squares and not squares ] [ F. Restoring the Expression ]
PROBLEM D. Alarm Clock 题 OvO http://codeforces.com/contest/898/problem/D codeforces 898d 解 从前往后枚举,放进 ...
- javaScript第一篇
什么中DOM: DOM是一套对文档内容进行抽象各概念化的方法; 例如:我们对别人说:“猫在沙发上!”:别人听到的不会是“狗已经跑了”:这是因为人类对已有的事物有了一套公有的认识;再比如,有人问你,“左 ...
- 微信支付接口,curl错误代码58
微信支付接口,curl错误代码58 之前的微信付款到用户零钱都是好好的,今天运营来找我, 我想了了下,就是进行了网站搬家 看了下 微信支付相关的证书配置文件 知道了,在这个 要改下证书的路径 WxPa ...
- pyton3的数字操作你都会用吗?
'''数字数据类型用于存储数值.数据类型是不允许改变的,这就意味着如果改变数字数据类型的值,将重新分配空间. 1.del(用于删除一些数字对象的引用) 2.整形(int)通常被称为是整形或者整数,是正 ...
- MS11-080提权
前提是你渗透进入了一台服务器 这是微软11年的第80个漏洞 每一个漏洞都有一个对应的kb(补丁) 这里我们直接在kali里面搜索 root@kali:~# searchsploit ms11- --- ...
- VirtualBox更改虚拟硬盘 VDI文件空间大小的方法
cmd执行 C:\Oracle\VirtualBox\VBoxManage.exe modifyhd
- Nginx事件管理之核心模块ngx_events_module
1. ngx_events_module核心模块的功能介绍 ngx_events_module 模式是一个核心模块,它的功能如下: 定义新的事件类型 定义每个事件模块都需要实现的ngx_event_m ...
- node-sass 安装失败 win32-x64-57_binding.node
安装npm install环境的时候我遇到一个问题就是 缺少node-sass文件 用这行命令: node -p "[process.platform, process.arch, pro ...