风清月

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

电脑版发表于:2019/11/14 16:46


我们在使用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()
{
}

是真的坑






关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢