使用muidemo中的pullrefresh_with_tab.html+vue.js遇到列表不能滑动问题解决办法
使用muidemo中的pullrefresh_with_tab.html+vue.js遇到列表不能滑动问题解决办法
下拉刷新 上拉加载
踩过很多坑，终于被我摸索出来了，按照我这个模板就可以滑动，如有问题可以留言相互探讨。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-scroll-wrapper {
position: absolute;
overflow: hidden;
bottom: 0;
}
.mui-scroll {
position: absolute;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
s
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
.mui-slider .mui-slider-group .mui-slider-item {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">选项卡切换+下拉刷新（div模式）</h1>
</header>
<div class="mui-content" id="app">
<div class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<!--<a v-for="(index,item) in tabList" v-bind:class="[mui-control-item,{mui-active:isActive}]" v-bind:href="'#item'+idnex+'mobile'">
{{item.title}}
</a>-->
<a class="mui-control-item mui-active" href="#item1mobile">
推荐
</a>
<a class="mui-control-item" href="#item2mobile">
热点
</a>
<a class="mui-control-item" href="#item3mobile">
北京
</a>
</div>
</div>
<div id="slider" class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper mui-active">
<div class="mui-scroll">
<ul class="mui-table-view">
<li v-for="item in tuijian" class="mui-table-view-cell">
{{item.title}}
</li>
</ul>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li v-for="item in redian" class="mui-table-view-cell">
{{item.title}}
</li>
</ul>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li v-for="item in beijing" class="mui-table-view-cell">
{{item.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="../../js/mui.min.js"></script>
<script src="../../js/mui.pullToRefresh.js"></script>
<script src="../../js/mui.pullToRefresh.material.js"></script>
<script src="../../js/utils/vue.js"></script>
<script src="../../js/utils/app.js"></script>
<script type="text/javascript">
mui.init();
(function($) {
//阻尼系数
$.ready(function() {
newsVue.initVuePage();
});
})(mui);
var newsVue = new Vue({
el: '#app',
data: {
tuijian: [],
redian: [],
beijing: [],
isActive: false,
count: 0
},
updated: function() {
this.$nextTick(function() {
})
},
methods: {
initVuePage: function() {
console.log("AAAAAAAAA");
//循环初始化所有下拉刷新，上拉加载。
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
newsVue.pulldownRefresh(index);
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
callback: function() {
var self = this;
setTimeout(function() {
newsVue.pullupRefresh(index);
self.endPullUpToRefresh();
}, 1000);
}
}
});
});
},
/**
* 下拉刷新获取最新列表
*/
pulldownRefresh: function(index) {
newsVue.count++;
if(index == 0) {
newsVue.tuijian = newsVue.createFragment();
} else if(index == 1) {
newsVue.redian = newsVue.createFragment();
} else {
newsVue.beijing = newsVue.createFragment();
}
// console.log(JSON.stringify(newsVue.newsList[index]));
},
/**
* 上拉加载拉取历史列表
*/
pullupRefresh: function(index) {
newsVue.count++;
if(index == 0) {
newsVue.tuijian = newsVue.createFragment();
} else if(index == 1) {
newsVue.redian = newsVue.createFragment();
} else {
newsVue.beijing = newsVue.createFragment();
}
},
createFragment: function() {
var newItems = [];
for(var i = 0; i < 5 * newsVue.count; i++) {
newItems.push({
title: "第" + i + "个例子"
});
}
return newItems;
}
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号