mescroll纯下拉刷新

最新推荐文章于 2023-10-10 09:01:35 发布
最新推荐文章于 2023-10-10 09:01:35 发布
阅读量975 收藏 1
点赞数
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="mescroll.min.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-touch-callout:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}
body{background-color: white}
ul{list-style-type: none}
a {text-decoration: none;color: #18B4FE;}

/*模拟的标题*/

/*菜单*/

/*列表*/
.mescroll{
position: fixed;
top: 0px;
bottom: 0;
height: auto;
}
/*展示上拉加载的数据列表*/
.data-list li{
position: relative;
padding: 10px 8px 10px 120px;
border-bottom: 1px solid #eee;
}
.data-list .pd-img{
position: absolute;
left: 18px;
top: 18px;
width: 80px;
height: 80px;
}
.data-list .pd-name{
font-size: 16px;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.data-list .pd-price{
margin-top: 8px;
color: red;
}
.data-list .pd-sold{
font-size: 12px;
margin-top: 8px;
color: gray;
}
</style>
</head>
<body>
<!--标题-->


<!--滑动区域-->
<div id="mescroll" class="mescroll">
<!--展示上拉加载的数据列表-->
<ul id="dataList" class="data-list">
<!--<li>
<img class="pd-img" src="../res/img/pd1.jpg"/>
<p class="pd-name">商品标题商品标题商品标题商品标题商品标题商品</p>
<p class="pd-price">200.00 元</p>
<p class="pd-sold">已售50件</p>
</li>-->
</ul>
</div>


<script src="mescroll.min.js" type="text/javascript" charset="utf-8"></script>
   <!--mescroll本身不依赖jq,这里为了模拟发送ajax请求-->
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="pdlist1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var mescroll = new MeScroll("mescroll", {
     
up: {
callback: getListData,//上拉加载的回调
clearEmptyId: "dataList"
}
});

//联网查询列表数据
function getListData(page){
getListDataFromNet(page.num,page.size,function(data){
console.log(data.length);
mescroll.endSuccess(data.length);
// mescroll.showTopBtn();
setListData(data)
})
}

//设置列表数据
function setListData(data){
var listDom=document.getElementById("dataList");
for (var i = 0; i < data.length; i++) {
var pd=data[i];

var str='<img class="pd-img" src="'+pd.pdImg+'"/>';
str+='<p class="pd-name">'+pd.pdName+'</p>';
str+='<p class="pd-price">'+pd.pdPrice+' 元</p>';
str+='<p class="pd-sold">已售'+pd.pdSold+'件</p>';

var liDom=document.createElement("li");
liDom.innerHTML=str;
listDom.appendChild(liDom);

}
}




//联网查询列表数据
function getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
  setTimeout(function(){
//   $.ajax({
//   type:"get",
//   url:"",
//   async:true
//                  success:function(data){
                    var data=pdlist1;//pdlist1就是数据（类似ajax请求到的）
                    listData=[];
                    var listData1=[];
                    
                    for (var i=(pageNum-1)*pageSize;i<pageNum*pageSize;i++) {
                    if(i==data.length){
                    break
                    }
                    listData.push(data[i])
                    }
                    
                    successCallback(listData);


   
  },1000)
  
  document.οndragstart=function() {return false;}
}

})


</script>

</body>

</html>



var pdlist1=[
{
"pdImg": "../res/img/pd1.jpg",
"pdName": "【1】  六罐装荷兰美素佳儿金装2段900g",
"pdPrice": 1149.00,
"pdSold": 648
}, {
"pdImg": "../res/img/pd2.jpg",
"pdName": "【2】  韩国Amore爱茉莉红吕洗发水套装修复受损发质",
"pdPrice": 89.00,
"pdSold": 128
}, {
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
},
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
},
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
},
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, 
{
"pdImg": "../res/img/pd3.jpg",
"pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
"pdPrice": 195.00,
"pdSold": 968
}, {
"pdImg": "../res/img/pd4.jpg",
"pdName": "【4】  Fisher pdPrice费雪 费雪三轮儿童滑行车",
"pdPrice": 299.00,
"pdSold": 85
}, {
"pdImg": "../res/img/pd5.jpg",
"pdName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
"pdPrice": 1889.00,
"pdSold": 18
}, {
"pdImg": "../res/img/pd6.jpg",
"pdName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g",
"pdPrice": 70.00,
"pdSold": 658
}, {
"pdImg": "../res/img/pd7.jpg",
"pdName": "【7】 TTBOO兔兔小布 肩纽扣套装",
"pdPrice": 268.00,
"pdSold": 128
}, {
"pdImg": "../res/img/pd8.jpg",
"pdName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶",
"pdPrice": 140.00,
"pdSold": 366
}, {
"pdImg": "../res/img/pd9.jpg",
"pdName": "【9】  illuma启赋 奶粉3段900g",
"pdPrice": 252.00,
"pdSold": 98
}, {
"pdImg": "../res/img/pd10.jpg",
"pdName": "【10】  Abbott雅培乳蛋白部分水解婴儿配方奶粉3段820g",
"pdPrice": 89.00,
"pdSold": 128
}, {
"pdImg": "../res/img/pd11.jpg",
"pdName": "【11】  韩蜜 酷炫唇蜜（礼盒套装）2.8g*4",
"pdPrice": 179.00,
"pdSold": 35
}, {
"pdImg": "../res/img/pd12.jpg",
"pdName": "【12】  保税区直发【3包装】日本Merries花王纸尿裤NB90",
"pdPrice": 289.00,
"pdSold": 1928
}, {
"pdImg": "../res/img/pd13.jpg",
"pdName": "【13】  Comotomo可么多么 硅胶奶瓶（0-3月奶嘴）150ml绿色",
"pdPrice": 203.00,
"pdSold": 87
}, {
"pdImg": "../res/img/pd14.jpg",
"pdName": "【14】  香港直邮德国瑞德露Rival de Loop芦荟精华安瓶",
"pdPrice": 152.00,
"pdSold": 61
}, {
"pdImg": "../res/img/pd15.jpg",
"pdName": "【15】  保税区直发药师堂尊马油香草味温和保湿无刺激面霜",
"pdPrice": 269.00,
"pdSold": 73
}, {
"pdImg": "../res/img/pd16.jpg",
"pdName": "【16】  香港直邮日本Spatreatment眼膜保湿去细纹法令纹",
"pdPrice": 219.00,
"pdSold": 13
}, {
"pdImg": "../res/img/pd17.jpg",
"pdName": "【17】  韩国MEDIHEALNMF可莱丝针剂睡眠面膜",
"pdPrice": 81.00,
"pdSold": 128
}, {
"pdImg": "../res/img/pd18.jpg",
"pdName": "【18】  DHC蝶翠诗橄榄蜂蜜滋养洗脸手工皂90g",
"pdPrice": 123.00,
"pdSold": 77
}, {
"pdImg": "../res/img/pd19.jpg",
"pdName": "【19】  日本资生堂CPB肌肤之钥新版隔离霜 清爽型 30ml",
"pdPrice": 429.00,
"pdSold": 36
}, {
"pdImg": "../res/img/pd20.jpg",
"pdName": "【20】 Heinz亨氏 婴儿面条优加面条全素套餐组合3口味3盒",
"pdPrice": 39.00,
"pdSold": 61
}, {
"pdImg": "../res/img/pd21.jpg",
"pdName": "【21】  Heinz亨氏 乐维滋果汁泥组合5口味15袋",
"pdPrice": 69.00,
"pdSold": 55
}, {
"pdImg": "../res/img/pd22.jpg",
"pdName": "【22】  保税区直发澳大利亚Swisse高浓度蔓越莓胶囊30粒",
"pdPrice": 271.00,
"pdSold": 19
}, {
"pdImg": "../res/img/pd23.jpg",
"pdName": "【23】  挪威Nordic Naturals小鱼婴幼儿鱼油DHA滴剂",
"pdPrice": 102.00,
"pdSold": 125
}, {
"pdImg": "../res/img/pd24.jpg",
"pdName": "【24】  澳大利亚Bio island DHA for Pregnancy海藻油DHA",
"pdPrice": 289.00,
"pdSold": 28
}, {
"pdImg": "../res/img/pd25.jpg",
"pdName": "【25】  澳大利亚Fatblaster Coconut Detox椰子水",
"pdPrice": 152.00,
"pdSold": 17
}, {
"pdImg": "../res/img/pd26.jpg",
"pdName": "【26】  Suitsky舒比奇 高护极薄舒爽纸尿片尿不湿XL60",
"pdPrice": 99.00,
"pdSold": 181
}, {
"pdImg": "../res/img/pd27.jpg",
"pdName": "【27】  英国JUST SOAP手工皂 玫瑰天竺葵蛋糕皂",
"pdPrice": 72.00,
"pdSold": 66
}, {
"pdImg": "../res/img/pd28.jpg",
"pdName": "【28】  德国NUK 多色婴幼儿带盖学饮杯",
"pdPrice": 92.00,
"pdSold": 138
}
];

MAYAO1206
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习mescroll的下拉刷新、上拉加载
weixin_45804357的博客
04-21 2312
写APP端总是避免不了要下拉刷新加载和下拉刷新 mescroll的uni版本, 是在 uni-app 运行的下拉刷新和上拉加载的组件,用着挺不错的 结合官网看 认真看官方文档收获十分大 官网讲解很详细:http://www.mescroll.com/uni.html#mescrolluni mescroll的最重要的两个事件 上拉事件下拉事件 上拉加载事件示例: <mescroll-uni ref="mescrollRef" @init="mescr.
关于mescroll 无法下拉刷新,上拉加载的问题
兄弟连之一个前端小白的成长
02-28 1万+
官网：http://www.mescroll.com/ 我用这个插件是因为 我的一个朋友说mescoll只有上拉功能。下拉功能无法使用，配置了也无效。所以 我就简单的用几分钟模拟了一下。一定是不完美的。希望能帮助别人哪怕一个人也好。 快速开始 : 下载并引用 mescroll.min.css , mescroll.min.js（两种引用方式） // 第一种: &lt;l...
mescroll下拉刷新和上拉加载
06-01
精致的下拉刷新和上拉加载js框架.原生js, 支持vue, 不依赖jquery, zepto, 比iScroll,dropload精简强大; 一套代码多端运行: 完美运行于android,iOS,手机各浏览器,兼容PC端主流浏览器; 参数自由搭配,随心定制,轻松拓展; 主流APP案例,丰富经典
uniapp使用mescroll-uni只实现下拉刷新，不实现上拉加载
LzzMandy的博客
06-28 2982
mescroll-uni官网地址：http://www.mescroll.com/uni.html?v=20200315 只实现下拉刷新，不实现上拉加载，在data中设置upOption如下： upOption: { use: false } 参考代码如下： <template> <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up=.
mescroll上拉加载下拉刷新总结
最新发布
st646889325的博客
10-10 383
mescroll常用方法：(参考官网：http://www.mescroll.com)1、mescroll.triggerDownScroll();
mescroll下拉刷新
MAYAO1206的博客
10-18 1229
* { margin: 0; padding: 0; -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; } body{background-color: white} ul{list-style-type: none} a {text-dec
uni-app：mescroll-nui下拉刷新组件
09-08
本知识点主要聚焦于uni-app中的mescroll-nui下拉刷新组件，这是一个非常实用的功能，用于实现用户在滚动到页面顶部时触发数据的刷新。 首先，mescroll-nui是基于MeScroll库的一个uni-app插件，MeScroll是一个高性能...
mescroll.js上拉加载下拉刷新组件使用详解
10-19
`mescroll.js`是一个强大的JavaScript组件，专门用于实现页面的上拉加载和下拉刷新功能。这个组件适用于移动端和浏览器环境，具有易用性和高效性。以下是对`mescroll.js`组件的详细说明： 1. **上拉加载**： 上拉...
iScroll下拉刷新上滑加载
热门推荐
小记心得
10-08 1万+
iScroll下拉刷新上滑加载
mescroll下拉刷新-上来加载测试
weixin_34174132的博客
08-25 215
为什么80%的码农都做不了架构师？>>> ...
下拉刷新，上拉加载插件mescroll源码分析
weixin_34238642的博客
07-25 228
最近项目要求增加一个下拉刷新的功能，自己也试着写了一个，单总是有点卡顿。 于是学习了下别人的插件（ps : 既然写不出好插件，就要会学习别人的）： 官网github地址：https://github.com/mescroll/m... 1.整体预发结构 ;(function(name, definition) { // 检测上下文环境是否...
移动端下拉刷新上拉加载-mescroll.js插件
weixin_30587927的博客
12-11 217
最近无意间看到有这么一个上拉刷新下拉加载的插件 —— mescroll.js，个人感觉挺好用的，官网地址是：http://www.mescroll.com 然后我就看了一下文档，简单的写了一个小demo记录下来，因为没有过多需要解释说明的，所以直接贴出代码。 1、下载mescroll.js插件。 　　在页面中引入如下两个文件： 　　mescroll.min.css 　　mescroll....
移动端下拉加载插件----mescroll.js插件
xuan的博客
11-18 537
一、官网 http://www.mescroll.com/ 二、下载引入 <script src="./js/mescroll.min.js"></script> <link rel="stylesheet" href="./css/mescroll.min.css"> 三、拷贝布局结构 <div id="mescroll" class="m...
h5下拉加载，上拉刷新 ,调用mescroll.js
九天虚空的博客
06-24 1049
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <me...
mescroll 实现下拉刷新和上划加载
纳尼Baby
06-17 493
官网 link http://www.mescroll.com/ 下载之后有很多 demo 下拉刷新页面，上划加载页面 上主要代码H5： <!--标题--> <p class="header">这是标题，可放自己的，也可无</p> <!--滑动区域 必须有mescroll--> <div id="mescroll" class="mescroll"> <p class="notice">本Demo的下拉刷新: 添加
php mescroll,mescroll快速入门
weixin_32820805的博客
03-26 238
官网：http://www.mescroll.com/一个简单的demo，无数据时候的空白显示暂时没写。下拉刷新demohtml,body,div{padding;0;margin:0;}.mescroll{left:0;width:100%;position: fixed;top: 0;bottom: 0;height: auto; /*如设置bottom:50px,则需height:auto才...
使用mescroll实现下拉刷新上拉加载
LmingAn的博客
09-18 3463
Vue练习—使用mescroll实现下拉刷新上拉加载的功能
uniapp mescroll：高效实现下拉刷新与上拉加载
uniapp的mescroll高性能下拉刷新和上拉加载组件是一个专门为微信小程序、H5以及支付宝小程序等移动端平台设计的轻量级滚动容器，它旨在优化用户体验并提高页面性能。这个组件在uniapp开发中被广泛应用，尤其在列表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值