tnblog
首页
视频
资源
登录
愿你出走半生,归来仍是少年
排名
3
文章
317
粉丝
22
评论
14
bootstrap 栅格布局一小例子
剑轩 : 后端写样式有点痛苦哇
一点flex布局的运用
剑轩 : 后端写样式有点痛苦哇
vue.js常用指令
剑轩 : 可以可以,多总结一点
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

mui与vue.js结合实现上拉加载

5211人阅读 2019/11/14 16:46 总访问:2063126 评论:0 收藏:0 手机
分类: mui


我们在使用mui与vue.js结合起来的时候会导致上拉加载失败,是因为vue.js生成的时候影响了demo节点,

我们只要先用vue初始化后在使用mui的初始化就没有问题了。


下面贴一下代码:

html:

  1. <!--下拉刷新容器-->
  2. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  3.   <div class="mui-scroll">
  4.     <!--数据列表-->
  5.     <ul class="mui-table-view mui-table-view-chevron">
  6.       <li class="mui-table-view-cell" v-for="(item, index) in items">
  7.         <a href="" class="mui-navigate-right">{{item.title}}</a>
  8.       </li>
  9.     </ul>
  10.   </div>
  11. </div>

js:

  1. var demo = new Vue({
  2.   el'#pullrefresh',
  3.   data: {
  4.     count : 0,
  5.     items : [{title'item1'}]
  6.   },
  7.   methods: {
  8.     pulldownRefresh : function(){
  9.       setTimeout(function({
  10.         var addedArray = [];
  11.       for (var i = demo.items.length + 1, len = i + 3; i < len; i++) {
  12.         addedArray.push({title'item'+i});
  13.       }
  14.       demo.items = addedArray.concat(demo.items);
  15.       mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
  16.     }, 1000);
  17.     },
  18.     pullupRefreshfunction(){
  19.       setTimeout(function({
  20.       var addedArray = [];
  21.       for (var i = demo.items.length + 1, len = i + 4; i < len; i++) {
  22.         addedArray.push({title'item'+i});
  23.       }
  24.       demo.items = demo.items.concat(addedArray);
  25.       mui('#pullrefresh').pullRefresh().endPullupToRefresh(); 
  26.     }, 1000);
  27.     }
  28.   }
  29. });
  30. mui.init({
  31.   pullRefresh: {
  32.     container'#pullrefresh',
  33.     down: {
  34.       contentrefresh'正在下拉...',
  35.       callback: demo.pulldownRefresh
  36.     },
  37.     up: {
  38.       contentrefresh'正在加载...',
  39.       callback: demo.pullupRefresh
  40.     }
  41.   }
  42. });

注意两点,mui的初始化写到下面,等vue加载完后,vue.js的数据先不要去请求其他的


当然加载的方法不一定要写到vue的methods里边随便写在外面都可以,只要是让vue先初始化,

但是要注意!定义的方法不能用下面这种形式

  1. var loaddata = function()
  2. {  
  3. }

要用:

  1. function loaddata()
  2. {
  3. }

是真的坑






欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价