排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
分类:
mui
我们在使用mui与vue.js结合起来的时候会导致上拉加载失败,是因为vue.js生成的时候影响了demo节点,
我们只要先用vue初始化后在使用mui的初始化就没有问题了。
下面贴一下代码:
html:
<!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--数据列表--> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell" v-for="(item, index) in items"> <a href="" class="mui-navigate-right">{{item.title}}</a> </li> </ul> </div> </div>
js:
var demo = new Vue({ el: '#pullrefresh', data: { count : 0, items : [{title: 'item1'}] }, methods: { pulldownRefresh : function(){ setTimeout(function() { var addedArray = []; for (var i = demo.items.length + 1, len = i + 3; i < len; i++) { addedArray.push({title: 'item'+i}); } demo.items = addedArray.concat(demo.items); mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed }, 1000); }, pullupRefresh: function(){ setTimeout(function() { var addedArray = []; for (var i = demo.items.length + 1, len = i + 4; i < len; i++) { addedArray.push({title: 'item'+i}); } demo.items = demo.items.concat(addedArray); mui('#pullrefresh').pullRefresh().endPullupToRefresh(); }, 1000); } } }); mui.init({ pullRefresh: { container: '#pullrefresh', down: { contentrefresh: '正在下拉...', callback: demo.pulldownRefresh }, up: { contentrefresh: '正在加载...', callback: demo.pullupRefresh } } });
注意两点,mui的初始化写到下面,等vue加载完后,vue.js的数据先不要去请求其他的
当然加载的方法不一定要写到vue的methods里边随便写在外面都可以,只要是让vue先初始化,
但是要注意!定义的方法不能用下面这种形式
var loaddata = function() { }
要用:
function loaddata() { }
是真的坑
欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739
评价