首页 > 代码库 > angual+ mui 导航切换实现上拉加载
angual+ mui 导航切换实现上拉加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Pragma" CONTENT="no-cache">
<link rel="stylesheet" href="../css/mui.min.css" />
</head>
<body ng-app="pullapp" ng-controller="pullcon">
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class=" mui-segmented-control mui-segmented-control-inverted">
<!--<div class="mui-scroll">-->
<a class="mui-control-item mui-active" href="#item1mobile">
推荐
</a>
<a class="mui-control-item" href="#item2mobile">
热点
</a>
<!--</div>-->
</div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell" ng-repeat="i in data">
<p ng-bind="i"></p>
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell" ng-repeat="i in data1">
<p ng-bind="i"></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script type="text/javascript">
var app = angular.module(‘pullapp‘, [])
app.controller(‘pullcon‘, [‘$scope‘, ‘$interval‘, function($scope, $interval) {
$scope.data = [];
$scope.data1 = [];
mui.init();
(function($) {
//阻尼系数
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$(‘.mui-scroll-wrapper‘).scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
$.ready(function() {
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll(‘.mui-slider-group .mui-scroll‘), function(index, pullRefreshEl) {
console.log(mui(‘.mui-slider-group .mui-scroll‘))
$(pullRefreshEl).pullToRefresh({
up: {
callback: function() {
var self = this;
setTimeout(function() {
createFragment(index, 10,self);
// self.endPullUpToRefresh();
}, 1000);
}
}
});
});
var createFragment = function(index, count, reverse) {
console.log(reverse);
if(index == 0) {
console.log(11)
var list = [{
name: ‘1111‘
}, {
name: ‘222‘
}, {
name: ‘333‘
}, {
name: ‘444‘
}]
for(i in list) {
$scope.data.push(list[i].name)
}
reverse.endPullUpToRefresh(true);
// mui(‘#item1mobile‘).pullRefresh().endPullupToRefresh($scope.data.length < 10);
} else {
var list = [{
name: ‘555‘
}, {
name: ‘654‘
}, {
name: ‘73`2‘
}, {
name: ‘8322‘
}]
for(i in list) {
$scope.data1.push(list[i].name)
}
console.log(list.length)
reverse.endPullUpToRefresh(true);
//mui(‘#item2mobile‘).pullRefresh().endPullupToRefresh($scope.data1.length < 10);
}
$scope.$apply();
};
});
})(mui);
}]);
</script>
</body>
</html>
angual+ mui 导航切换实现上拉加载