骑驴走走
骑驴走走
  • 发布:2016-11-11 09:20
  • 更新:2019-05-22 11:58
  • 阅读:4092

vuejs在使用mui的下拉刷新组件时,安卓真机运行无效

分类:MUI

vuejs在使用mui的下拉刷新组件时,安卓真机运行无效,但是上拉加载就可以。vuejs是2.0版本。
有没有那个大神帮解决下,具体的代码如下:

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
    </head>  

    <body>    
        <!--下拉刷新容器-->  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
                <!--数据列表-->  
                <ul class="mui-table-view">  
                    <li class="mui-table-view-cell mui-media" v-for="item in items" v-on:tap="list($index)">  
                        <a data-href="{{item.href}}">  
                            <img class="mui-media-object mui-pull-left" v-bind:src="item.src">  
                            <div class="mui-media-body">  
                                {{item.title}}  
                                <p class="mui-ellipsis">{{item.descrition}}</p>  
                            </div>  
                        </a>  
                    </li>  
                </ul>  
            </div>  
        </div>  

        <script src="js/mui.min.js"></script>  
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>  
        <script type="text/javascript">  
            var home = new Vue({  
                el: '#pullrefresh',  
                data: {  
                    items: []  
                },  
                mounted: function(){  
                    mui.init({  
                        pullRefresh: {  
                            container: '#pullrefresh',  
                            down: {  
                                callback: this.pulldownRefresh  
                            },  
                            up: {  
                                contentrefresh: '正在加载...',  
                                callback: this.pullupRefresh  
                            }  
                        }  
                    });  
                    if (mui.os.plus) {  
                        mui.plusReady(function() {  
                            setTimeout(function() {  
                                mui('#pullrefresh').pullRefresh().pullupLoading();  
                            }, 1000);  
                        });  
                    } else {  
                        mui.ready(function() {  
                            mui('#pullrefresh').pullRefresh().pullupLoading();  
                        });  
                    }  
                },  
                methods: {  
                    // 下拉刷新具体业务实现  
                    pulldownRefresh: function() {  
                        var self = this;  
                        setTimeout(function() {  
                            for(var i=0; i < 5; i++) {  
                                self.items.unshift({  
                                    href: i+'.html',   
                                    src: 'img/lazyload.gif',   
                                    title: 'dowm'+i,   
                                    descrition: '能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?'  
                                })  
                            }  
                            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
                        }, 1500);  
                    },  
                    // 上拉加载具体业务实现  
                    pullupRefresh: function() {  
                        var self = this;  
                        setTimeout(function() {  
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //refresh completed  
                            for(var i=0; i < 15; i++) {  
                                self.items.push({  
                                    href: i+'.html',   
                                    src: 'img/lazyload.gif',   
                                    title: 'up'+i,   
                                    descrition: '能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?'  
                                })  
                            }  
                        }, 1500);  
                    },  
                    list: function(index) {  
                        var subUrl = this.items[index].href;  
                        mui.openWindow({  
                            url: 'home-sub.html',  
                            id: 'homesub',  
                            extras: {  
                                subUrl: subUrl  
                            }  
                        });  
                        if(!mui.os.plus){  
                            localStorage.setItem('subUrl', subUrl);  
                        }  
                    }  
                }  
            })  
        </script>  
    </body>  

</html>
2016-11-11 09:20 1 条评论 负责人:无 分享
已邀请:
二八中医

二八中医

搞定了没?

l28

l28

你好,如果用ajax 请求数据,应该放在哪里写,还有就是开始没有上拉操作,页面就有数据,每页显示4几条这样,请问一下这个要怎么写,可以的话,发我qq2811361327

该问题目前已经被锁定, 无法添加新回复