mescroll 上拉加载和下拉刷新

最新推荐文章于 2023-10-10 09:01:35 发布
最新推荐文章于 2023-10-10 09:01:35 发布
阅读量436 收藏
点赞数
分类专栏： js 前端 ui 文章标签： javascript js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42699996/article/details/105124496
版权
前端 同时被 3 个专栏收录
14 篇文章 1 订阅
订阅专栏
js
8 篇文章 0 订阅
订阅专栏
ui
2 篇文章 0 订阅
订阅专栏

mescroll官网：http://www.mescroll.com
mescroll文档：http://www.mescroll.com/api.html?v=20200315
js和css到官网下载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="referrer" content="no-referrer" />
    <title>测试上拉加载=下拉刷新</title>
    <link rel="stylesheet" href="dist/mescroll.min.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -webkit-tap-highlight-color:transparent;
            font-size: .14rem;
        }
        body{background-color: white}
        ul{list-style-type: none}
        a {text-decoration: none;color: #18B4FE;}
        
        /*模拟的标题*/
        .header{
            z-index: 9990;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-bottom: 1px solid #eee;
            background-color: white;
            font-size: .16rem;
        }
        .header .btn-left{
            position: absolute;
            top: 0;
            left: 0;
            padding:12px;
            line-height: 22px;
        }
        .header .btn-right{
            position: absolute;
            top: 0;
            right: 0;
            padding: 0 12px;
        }
        /*说明*/
        .mescroll .notice{
            font-size: 14px;
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            text-align: center;
            color:#555;
        }
        /*列表*/
        .mescroll{
            position: fixed;
            top: 44px;
            bottom: 0;
            height: auto;
        }
        /*展示上拉加载的数据列表*/
        .news-list li{
            padding: 16px;
            border-bottom: 1px solid #eee;
        }
        .news-list .new-content{
            font-size: 14px;
            margin-top: 6px;
            margin-left: 10px;
            color: #666;
        }
    </style>
</head>
<body>

    <!--标题-->
    <p class="header">新闻列表</p>
    <!--滑动区域-->
    <div id="mescroll" class="mescroll">
<!-- 			<p class="notice">本Demo的下拉刷新: 添加新数据到列表顶部</p> -->
        <ul id="newsList" class="news-list">
            <!--<li>
                <p>【新闻1】标题标题标题标题</p>
                <p class="new-content">内容内容内容内容内容内容内容内容内容</p>
            </li>-->
        </ul>
    </div>


    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="dist/mescroll.min.js"></script>
    <script type="text/javascript">
        $("html").css("font-size",(window.innerWidth)/3.75 + 'px');
    </script>
    <script>
        let pages = 0; //页数 

        $(function(){
			//创建MeScroll对象
			var mescroll = new MeScroll("mescroll", {
				down: {
					auto: true, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
					callback: downCallback //下拉刷新的回调
				},
				up: {
					auto: false, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
					isBounce: true, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
					callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
					toTop:{ //配置回到顶部按钮
						src : "img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
						offset : 1000
                    },
                    htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
				}
			});
			
			/*下拉刷新的回调 */
			function downCallback(){
                pages = 1;
				getListDataFromNet(pages, 1, function(data){
					mescroll.endSuccess();
					setListData(data, false);
				}, function(){
					//联网失败的回调,隐藏下拉刷新的状态
	                mescroll.endErr();
				});
			}
			
			/*上拉加载的回调 */
			function upCallback(page){
                pages += 1;
				getListDataFromNet(pages, page.size, function(curPageData){
                    console.log('执行')
					mescroll.endSuccess(curPageData.length);
					setListData(curPageData, true);
				}, function(){
					//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
	                mescroll.endErr();
				});
			}
			
			/*设置列表数据*/
			function setListData(curPageData, isAppend) {
                console.log(isAppend)
                if (isAppend){
                    $("#newsList").append(curPageData)
                } else{ //下拉刷新
                    $("#newsList").html(curPageData)
                }
			}
            
            
            let dataList = [
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'},
                {title:'【新闻1】标题标题标题标题',content:'内容内容内容内容内容内容内容内容内容'}
            ];
			function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
                console.log('请求');
                console.log('页码：'+pageNum)
                setTimeout(function () {
                	try{
                        let html = '';
                        dataList.map((item,index)=>{
                            html += `<li>
                                <p>【新闻${index}】标题标题标题标题</p>
                                <p class="new-content">内容内容内容内容内容内容内容内容内容</p>
                            </li>`;
                        })
                        if(pageNum == 3 || pageNum == 6){html = ''}; // 模仿请求没数据了
	                	successCallback&&successCallback(html);
                	}catch(e){
                		//联网失败的回调
                		errorCallback&&errorCallback();
                	}
                },1000)
			}
			
		});
    </script>
    
</body>
</html>

<!--

    #1.引入jq 因为该ui基于jq
    #2.引入mescroll.min.css 引入mescroll.min.js
    #3.在html写入控制器

-->
qq_42699996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mescroll官网-下载刷新 上拉加载
代码青春
09-24 751
http://www.mescroll.com/uni.html
学习mescroll的下拉刷新、上拉加载
weixin_45804357的博客
04-21 2264
写APP端总是避免不了要下拉刷新加载和下拉刷新 mescroll的uni版本, 是在 uni-app 运行的下拉刷新和上拉加载的组件,用着挺不错的 结合官网看 认真看官方文档收获十分大 官网讲解很详细:http://www.mescroll.com/uni.html#mescrolluni mescroll的最重要的两个事件 上拉事件下拉事件 上拉加载事件示例: <mescroll-uni ref="mescrollRef" @init="mescr.
mescroll 移动端上拉加载下拉刷新插件
01-08
mescroll 移动端上拉加载下拉刷新插件
Vue开发问题—— mescroll滚动懒加载，以及保留滚动条位置。
Lazy33的博客
03-22 3429
系列文章目录 Vue-cli3 ，js根据汉字或拼音模糊搜索功能,汉字支持同音字、多音字，支持首字母 Vue开发问题——axios二次封装，请求、响应拦截器。 Vue开发问题——打包后首页白屏，cli3设置vue.config.js 使用proxy配置跨域 mescroll使用，以及keep-alive的使用遗漏点系列文章目录前言一、mescroll使用二、如何保持滚动1.keepAlive的设置帮到你的话，点个赞吧d=====(￣▽￣*)b 前言 提示：这里可以添加本文要记录的大概内容： 1、mesc
移动端下拉加载插件----mescroll.js插件
xuan的博客
11-18 518
一、官网 http://www.mescroll.com/ 二、下载引入 <script src="./js/mescroll.min.js"></script> <link rel="stylesheet" href="./css/mescroll.min.css"> 三、拷贝布局结构 <div id="mescroll" class="m...
移动端：纯html 基于 mescroll 插件实现上拉加载，下拉刷新，返回顶部
AAAXiaoApple的博客
10-13 945
mescroll 官网地址： http://www.mescroll.com/api.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
mescroll上拉加载下拉刷新总结
最新发布
st646889325的博客
10-10 329
mescroll常用方法：(参考官网：http://www.mescroll.com)1、mescroll.triggerDownScroll();
vue mescroll使用上拉加载、下拉刷新
Jana Jing的分享
08-27 693
一个页面多次调用mescroll 注：this.navData[1].mescroll.resetUpScroll(); // 点击筛选重置方法 <template> <div class="healthy-bean-record-c"> <div class="top"> [外链图片转存失败(img-pPYyrr3K-1562119870434)(https://mp.csdn.net/assets/images/mine/tixianji
mescroll使用上拉加载、下拉刷新
xiaoququ的博客
06-12 7704
1、安装包 注：position: fixed; // 必须使用固定定位 npm install --save mescroll.js 2、引入mescroll的vue组件 import MescrollVue from 'mescroll.js/mescroll.vue' 3、注册为组件 components: { MescrollVue // 注册mescroll...
上拉加载 下拉刷新框架 mescroll
06-23
精致的上拉加载和下拉刷新的js框架，原生Js,不依赖于jquery,zepto,支持vue,完美运行与android,ios，各手机浏览器，兼容pc端主流浏览器。
mescroll下拉刷新和上拉加载
06-01
精致的下拉刷新和上拉加载js框架.原生js, 支持vue, 不依赖jquery, zepto, 比iScroll,dropload精简强大; 一套代码多端运行: 完美运行于android,iOS,手机各浏览器,兼容PC端主流浏览器; 参数自由搭配,随心定制,轻松拓展...
mescroll上拉加载下拉刷新插件（附带demo）
08-10
可指定列表平滑滚动到任何位置。支持监听列表滚动事件,可一键滚动到列表顶部和底部,附带平滑缓冲效果。自动控制翻页。无需手动判断处理列表的页码,时间等变量等等
vue插件mescroll.js实现移动端上拉加载和下拉刷新
10-17
主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
mescroll.js上拉加载下拉刷新组件使用详解
01-19
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码，供大家参考，具体内容如下 附上链接地址http://www.mescroll.com/api.html#NPM，手机端和浏览器都能够使用，唯一推荐； 使用过程中要注意这些问题...
vue移动端上拉加载，下拉刷新（mescroll）
_小郑有点困了的博客
12-13 2599
官网地址： mescroll.js 效果图： 安装引入： 1. 执行npm命令安装mescroll : npm install --save mescroll.js 2. 引入mescroll组件 : import MescrollVue from 'mescroll.js/mescroll.vue' 代码： 基本赋值官网代码，其实上拉加载，下拉刷新，难点在于丝滑的下下拉，拼接数据 <template> <div> <!--标题-->
视频试看5分钟
热门推荐
qq_42699996的博客
12-23 16万+
缺陷：用户在控制台能直接拿到视频url地址 <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .videobox{ position: relative; width: 300px; ...
微信小程序左边菜单栏
qq_42699996的博客
05-30 6919
WXML <view class='big-box'> <view class='left-menu'> <block wx:for="{{dataList}}" wx:key="key"> <view class='{{index == idx ? "avtive":"Default-Class"}}' bindt...
活动倒计时 （距离活动开始还有多少时间/距离活动结束还有多少时间）
qq_42699996的博客
11-23 2472
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; ...
uniapp 下拉刷新
08-01
mescroll是专门用于uni-app的下拉刷新和上拉加载的组件，支持一套代码编译到iOS、Android、H5、小程序等多个平台。它是一个比较完善且实用的框架，推荐在uni-app中使用。[1] 要在uni-app中实现下拉刷新，需要在js...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值