angual+mui 雙欄上拉加載，微信裏面禁用默認事件可用，可以防止瀏覽器回彈效果
//html 部分
<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部分
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
<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的
<body ng-app="pullapp" ng-controller="pullcon">
angual+mui 雙欄上拉加載，微信裏面禁用默認事件可用，可以防止瀏覽器回彈效果