angual+mui 双栏上拉加载，微信里面禁用默认事件可用，可以防止浏览器回弹效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 双栏上拉加载，微信里面禁用默认事件可用，可以防止浏览器回弹效果的主要内容，如果未能解决你的问题，请参考以下文章