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

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2b9edb }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; min-height: 18.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #d76019 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #060606 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #b58a00 }
span.s1 { color: #596972 }
span.s2 { color: #2b9edb }
span.s3 { color: #2eafa9 }
span.s4 { color: #d76019 }
span.s5 { color: #000000 }
span.s6 { color: #6b82d9 }
span.s7 { color: #97a700 }
span.s8 { color: #b58a00 }
span.s9 { color: #d8a100 }
span.s10 { color: #060606 }
span.s11 { color: #ad5cff }
span.s12 { color: #a5b2b9 }
span.s13 { color: #3c7400 }
span.Apple-tab-span { white-space: pre }

<!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>

时间: 2024-10-22 10:04:29

angual+ mui 导航切换实现上拉加载的相关文章

Mui Webview下来刷新上拉加载实现

有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一demo就好了,那么就不会花费这么多的无用功了.今天使用mui 的webview实现了一个H5页面的上拉加载下拉刷新的效果,拿出来和大家一起分享一下,希望各位博友有用,当然啦有的时候坑会很多,但是只要我们学会用思考的方式去找问题,不管是什么问题我们都是可以解决的.小弟的文采不好,有错误请指出来,一定虚心接受 //首先在此之前我们先要引用jquery的插件,以及mui.js插件 <!--html代码-

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

//html 部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 }

MUI 实现下拉刷新上拉加载的简单例子

话不多说,直接上代码与效果图吧. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-sc

mui上拉加载

最近在做移动端的项目,用到了mui的上拉加载,整理如下: 1.需要引入的css.js <link rel="stylesheet" href="common/mui/css/mui.min.css"> <script src="js/jquery-3.2.0.min.js"></script> <script src="common/mui/js/mui.min.js"><

使用MUI框架,模拟手机端的下拉刷新,上拉加载操作。

套用mui官方文档的一句话:"开发者只需关心业务逻辑,实现加载更多数据即可".真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现上拉刷新,下拉加载的功呢? 首先需要一个容器: 1 <!--下拉刷新容器--> 2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> 3 <di

MUI - 上拉加载不执行

mui('#pullrefresh').pullRefresh().refresh(true); if($(".list-item").length == countDataSum) { mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了. } else { mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); }

mui 上拉加载更多的使用

最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下,需要设置显示为"加载更多"还是"没有更多数据了". 看了一些博客和官方文档,基本上都把这个设置放在了定时器中 在定时器中调用获取数据的方法(自己的业务需求) 2.在mui封装的上拉加载中,点击某一项会失效.这个是真的很坑.不过网上也有解决方法.就是

MUI上拉加载下拉刷新

<!-- 作者:2444626121@qq.com 时间:2017-11-02 描述:如果有问题请邮箱联系我,并注明来自博客园,谢谢呢^o^ --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,min

mui上拉加载更多的使用

demo地址 我的另一博客原文链接gitHub地址 mui框架中上拉加载的坑 1.在函数自己上拉加载行为后的回调函数 2.在mui封装的上拉加载中,点击某一项会失效. 解决方法 1.该函数是必须要写的,用来写自己的逻辑需求,但是一般情况下,需要设置显示为"加载更多"还是"没有更多数据了".看了一些博客和官方文档,基本上都把这个设置放在了定时器中并在定时器中调用获取数据的方法(自己的业务需求). 2.在mui封装的上拉加载中,点击某一项会失效.这个是真的很坑.就是采用