排名
3
文章
317
粉丝
22
评论
14
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:
50010702506256


欢迎加群交流技术

我们在使用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()
- {
- }
是真的坑
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)
评价