#上拉加载&下拉刷新
预计阅读时间: 小于 1 分钟#⏬ 插件下载
- jQuery-mescroll 插件：jq-mescroll.7z
#🚲 HTML 页面示例
代码示例
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
6 <meta name="apple-mobile-web-app-capable" content="yes" />
7 <title>title-list</title>
8 <!-- 重置样式 -->
9 <link rel="stylesheet" type="text/css" href="css/reset.min.css" />
10 <!-- 插件封装样式 -->
11 <link rel="stylesheet" type="text/css" href="css/mescroll.min.css" />
12 <!-- 当前页面css样式 -->
13 <link rel="stylesheet" type="text/css" href="css/list.css" />
14 </head>
15 <body>
16 <div class="header">
17 <!-- 列表标题 -->
18 <p style="line-height:24px;">列表标题名称</p>
19 <!-- 列表表头 -->
20 <div class="nav">
21 <p class="active" i="0">分类0</p>
22 <p i="1">分类1</p>
23 <p i="2">分类2</p>
24 </div>
25 </div>
26 <!-- 内容滑动区 -->
27 <div id="mescroll" class="mescroll">
28 <ul id="dataList" class="data-list"></ul>
29 </div>
30 </body>
31 <script src="js/zepto.min.js"></script>
32 <!-- 插件封装js -->
33 <script src="js/mescroll.min.js"></script>
34 <!-- 当前页面js -->
35 <script src="js/list.js"></script>
36</html>#🏍 CSS 样式示例
代码示例
1* {
2 margin: 0;
3 padding: 0;
4 -webkit-touch-callout: none;
5 -webkit-user-select: none;
6 -webkit-tap-highlight-color: transparent;
7}
8body {
9 background-color: #fff;
10}
11ul {
12 list-style-type: none;
13}
14a {
15 text-decoration: none;
16 color: #18b4fe;
17}
18.header {
19 z-index: 999;
20 position: fixed;
21 top: 0;
22 left: 0;
23 width: 100%;
24 line-height: 16px;
25 padding-top: 12px;
26 text-align: center;
27 background-color: #fff;
28}
29.header .nav {
30 margin-top: 12px;
31 border-bottom: 1px solid #ddd;
32}
33.header .nav p {
34 display: inline-block;
35 width: 30%;
36 padding: 5px 0;
37}
38.header .nav .active {
39 color: #ffa54c;
40 border-bottom: 1px solid #ffa54c;
41}
42.mescroll {
43 position: fixed;
44 top: 84px;
45 bottom: 0;
46 height: auto;
47}
48.data-list li {
49 position: relative;
50 padding: 10px 8px 10px 120px;
51 border-bottom: 1px solid #eee;
52}
53.data-list .pd-img {
54 width: 80px;
55 height: 80px;
56 position: absolute;
57 top: 50%;
58 left: 18px;
59 -webkit-transform: translateY(-50%);
60 transform: translateY(-50%);
61}
62.data-list .pd-name {
63 font-size: 16px;
64 height: 32px;
65 overflow: hidden;
66 text-overflow: ellipsis;
67 white-space: nowrap;
68}
69.data-list .pd-price {
70 color: #333;
71 line-height: 18px;
72 font-size: 14px;
73}
74.data-list .pd-sold {
75 font-size: 12px;
76 margin-top: 8px;
77 color: gray;
78}#🚗 JavaScript 逻辑示例
代码示例
1$(function () {
2 // 获取地址栏参数
3 function getQueryString(name) {
4 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
5 r = window.location.search.substr(1).match(reg);
6 return r ? decodeURI(r[2]) : null;
7 }
8
9 // 初始化mescroll
10 var mescroll = new MeScroll("mescroll", {
11 up: {
12 callback: getListData,
13 noMoreSize: 4,
14 // 没有数据时候的提示
15 empty: {
16 icon: "../res/img/mescroll-empty.png",
17 btntext: "暂无数据",
18 btnClick: function () {}
19 },
20 clearEmptyId: "dataList"
21 }
22 });
23
24 /*初始化菜单*/
25 var pdType = 0;
26 $(".nav p").click(function () {
27 var i = $(this).attr("i");
28 if (pdType != i) {
29 pdType = i;
30 $(".nav .active").removeClass("active");
31 $(this).addClass("active");
32 mescroll.resetUpScroll();
33 }
34 });
35
36 /* 链接跳转 */
37 $("#dataList").on("click", "li", function (e) {
38 // 通过事件委托实现获取每一个列表的数据，并实现跳转
39 window.location.href = "index.html";
40 });
41
42 function getListData(page) {
43 getListDataFromNet(
44 pdType,
45 page.num,
46 page.size,
47 function (data) {
48 // 对请求的数据进行判断处理
49 mescroll.endSuccess(data.length);
50 setListData(data);
51 },
52 function () {
53 mescroll.endErr();
54 }
55 );
56 }
57
58 // DOM拼接渲染
59 function setListData(data) {
60 var $dataList = $("#dataList");
61 // 列表项字符串拼接
62 for (var i = 0, str = ""; i < data.length; i++) {
63 let pd = data[i];
64 str +=
65 '<li data-id="' +
66 pd.id +
67 '" data-url="' +
68 pd.videoUrl +
69 '"><img class="pd-img" src="' +
70 pd.imgUrl +
71 '"/><p class="pd-name">' +
72 pd.videoName +
73 '</p><p class="pd-price">' +
74 pd.desc +
75 '</p><p class="pd-sold">浏览量：' +
76 pd.number +
77 "</p></li>";
78 }
79 $dataList.append(str);
80 }
81
82 function getListDataFromNet(pdType, pageNum, pageSize, successCallback, errorCallback) {
83 const api = "api_url";
84 // 定时器的作用是模拟网络延迟
85 setTimeout(function () {
86 $.ajax({
87 type: "POST",
88 url: api,
89 data: {
90 pageIndex: pageNum, // pageNum默认值为1
91 type: pdType // type类型
92 },
93 success: function (res) {
94 if (res.code) {
95 let data = res.data;
96 // 请求成功回调
97 successCallback(data);
98 } else {
99 // 请求失败提示
100 mescroll.endErr();
101 }
102 },
103 error: function (err) {
104 // 请求失败回调
105 mescroll.endErr();
106 }
107 });
108 }, 500);
109 }
110});目 录