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 ...
随机推荐
- Web前端开发——HTML基本标签
标题h1-h6 只有h1到h6,没有h7. 一个页面建议只有一个h1 普通文字大小大约介于h3~h4 段落p 段内换行br 段内分组span 预留格式pre 水平线hr
- 问题[scrapy.spidermiddlewares.offsite] DEBUG: Filtered offsite request to...
原因是二次解析的域名被过滤掉了, 解决办法 解决办法一: yield scrapy.Request(url=detail_url, meta={'item': item}, callback=self ...
- vue实例之组件开发:图片轮播组件
一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 在Windows下编译扩展OpenCV 3.1.0 + opencv_contrib 及一些问题
一.准备工作: 1.下载OpenCV安装包:https://github.com/opencv/opencv 安装过程实际上就是解压过程,安装完成后得到(这里修改了文件名): 2.下载opencv_c ...
- Spring——代理工厂实现增强
借助Spring IOC的机制,为ProxyFactory代理工厂的属性实现依赖注入,这样做的优点是可配置型高,易用性好. 1.创建抽象主题 public interface ProService { ...
- 推荐系统系列(六):Wide&Deep理论与实践
背景 在CTR预估任务中,线性模型仍占有半壁江山.利用手工构造的交叉组合特征来使线性模型具有"记忆性",使模型记住共现频率较高的特征组合,往往也能达到一个不错的baseline,且 ...
- Xshell远程连接的具体操作和Xshell多会话设置小技巧
前几天给大家分享了Xshell的安装教程,今天给大家分享如何在Xshell中进行远程连接,并且分享一下如何设置一条命令可以发送多个终端,这里以Xshell6为例进行说明,具体的教程如下. 1.依次点击 ...
- Git与Repo 的使用
一.Linux常用命令 pwd 用于显示工作目录,执行pwd指令可立刻得知您目前所在的工作目录的绝对路径名称. chmod 用来变更文件或目录的权限. > ...
- OUC_Summer Training_ DIV2_#5
这是做的最好的一次了一共做了4道题 嘻嘻~ A - Game Outcome Time Limit:2000MS Memory Limit:262144KB 64bit IO For ...
- 关于wordpress文章分类显示404错误的解决办法。
闲来无事,在虚拟主机上装了一个wordpress尝试自己搭一个博客玩一下,发现文章分类一直显示404错误,网上查了好久,终于找到解决方法,其实很简单,只要将分类的别名改成英文的就解决了,分类中不能包含 ...