mui 上拉加载

最新推荐文章于 2024-05-13 12:20:21 发布

一个程序员的春天

最新推荐文章于 2024-05-13 12:20:21 发布

阅读量485

点赞数 1

分类专栏： javascript mui.js js 文章标签： js javascript html

本文链接：https://blog.csdn.net/weixin_44186787/article/details/106825782

版权

js 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

javascript

31 篇文章 0 订阅

订阅专栏

mui.js

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>mui上拉刷新下拉加载demo--封装</title>
<link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.js"></script>
<style type="text/css">
/* #refreshContainer {
height: 100vh;
overflow: hidden;
overflow-y: scroll;
} */
</style>
</head>

<body>
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">data</li>
<li class="mui-table-view-cell">data</li>
<li class="mui-table-view-cell">data</li>
<li class="mui-table-view-cell">data</li>
<li class="mui-table-view-cell">data</li>
<li class="mui-table-view-cell">data</li>
</ul>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var bb = 1;
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
auto: false,
contentrefresh: '正在加载...',
callback: LoadData
},
down: {
 style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
//                    color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
//                    height:'50px',//可选,默认50px.下拉刷新控件的高度,
//                    range:'100px', //可选 默认100px,控件可下拉拖拽的范围
//                    offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
                  auto: true,//可选,默认false.首次加载自动上拉刷新一次
                  callback :pulldownRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
 function pulldownRefresh() {
            setTimeout(function () {
                userinfo();//实现更新页面的操作
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            }, 1000);
        }
function userinfo(){
console.log("1122")
}

var num = 1;
function LoadData() {
// console.log(num++)
//数据绑定 逻辑
// mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); 继续加载
// mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);结束下拉加载
num++;
// mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
getList(num)
}
function getList(num) {
console.log(num)
// 没有数据加这行
// mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}

</script>

</html>

一个程序员的春天

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mui 上拉加载

html <div id="pullrefresh" style="height:200px"> <div> js $(document).ready(function() { //上拉加载下拉刷新 mui.init({ pullRefresh: { container: '#pullrefresh', bounce: true, //是否回弹 up: { contentrefres..
复制链接

扫一扫

专栏目录