//html 部分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.s4 { color: #2eafa9 }
span.Apple-tab-span { white-space: pre }
<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>
//js部分
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #060606 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #b58a00 }
span.s1 { color: #6b82d9 }
span.s2 { color: #97a700 }
span.s3 { color: #2eafa9 }
span.s4 { color: #b58a00 }
span.s5 { color: #d8a100 }
span.s6 { color: #060606 }
span.s7 { color: #000000 }
span.s8 { color: #ad5cff }
span.s9 { color: #596972 }
span.s10 { color: #a5b2b9 }
span.s11 { color: #3c7400 }
span.Apple-tab-span { white-space: pre }
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);
}]);
//需要引用的js
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #d76019 }
span.Apple-tab-span { white-space: pre }
<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>
//body里面需要添加angual的
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #d76019 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #2eafa9 }
<body ng-app=“pullapp” ng-controller=“pullcon”>