码迷,mamicode.com
首页 > 其他好文 > 详细

angual+ mui 导航切换实现上拉加载

时间:2017-07-11 11:12:55      阅读:410      评论:0      收藏:0      [点我收藏+]

标签:bounce   each   form   interval   []   create   time   tor   http   

<!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 导航切换实现上拉加载

标签:bounce   each   form   interval   []   create   time   tor   http   

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

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