码迷,mamicode.com
首页 > 微信 > 详细

angual+mui 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

时间:2017-09-05 19:01:28      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:view   his   禁用   timeout   indicator   time   jquery   end   刷新   

//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 双栏上拉加载,微信里面禁用默认事件可用,可以防止浏览器回弹效果

标签:view   his   禁用   timeout   indicator   time   jquery   end   刷新   

原文地址:http://www.cnblogs.com/zyzhao/p/7479813.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!