1. 程式人生 > >angual+ mui 導航切換實現上拉加載

angual+ mui 導航切換實現上拉加載

推薦 nbsp ble set div black function clas app

<!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 導航切換實現上拉加載