用iscorll写一个上拉加载,下拉刷新
时间: 2023-05-24 08:02:30 浏览: 71
可以使用iscroll的pullToRefresh和infiniteScroll插件来实现上拉加载和下拉刷新功能。下面是一个简单的示例:
```html
<div id="wrapper">
<div id="scroller">
<!-- 下拉刷新区域 -->
<div class="pulldown-wrapper">
<div class="pullDown">
<span class="pullDownIcon"></span>
<span class="pullDownLabel">下拉刷新...</span>
</div>
</div>
<!-- 列表内容区域 -->
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<!-- 上拉加载区域 -->
<div class="pullup-wrapper">
<div class="pullUp">
<span class="pullUpIcon"></span>
<span class="pullUpLabel">上拉加载更多...</span>
</div>
</div>
</div>
</div>
```
CSS样式:
```css
/* 滚动容器 */
#wrapper {
position: relative;
overflow: hidden;
height: 200px;
border: 1px solid #ccc;
}
/* 列表内容容器 */
#scroller ul {
list-style: none;
margin: 0;
padding: 0;
}
/* 下拉刷新和上拉加载提示容器 */
.pullup-wrapper,
.pulldown-wrapper {
position: absolute;
width: 100%;
height: 60px;
overflow: hidden;
}
/* 下拉刷新提示容器 */
.pulldown-wrapper {
top: -60px;
}
/* 上拉加载提示容器 */
.pullup-wrapper {
bottom: -60px;
}
/* 下拉/上拉提示样式 */
.pullDown,
.pullUp {
height: 60px;
line-height: 60px;
text-align: center;
font-size: 16px;
color: #999;
}
.pullDownIcon,
.pullUpIcon {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
-webkit-animation: rotate .3s linear infinite;
animation: rotate .3s linear infinite;
}
.pullUpIcon {
background: url(icon-pullup.png) no-repeat center;
background-size: contain;
}
.pullDownIcon {
background: url(icon-pulldown.png) no-repeat center;
background-size: contain;
}
.pullDownLabel {
display: inline-block;
}
/* 下拉刷新动画 */
.down-flip,
.down-flip .pullDownLabel {
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.down-flip .pullDownIcon {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.down-flip .pullDownLabel {
margin-left: 30px;
}
/* 上拉加载动画 */
.up-flip .pullUpIcon {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.up-flip .pullUpLabel {
margin-right: 30px;
}
/* 动画样式 */
@-webkit-keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
```
JavaScript代码:
```javascript
var myScroll = new IScroll('#wrapper', {
probeType: 3, // 开启滚动事件监听
mouseWheel: true, // 支持PC端滚轮滚动
scrollbars: false, // 隐藏滚动条
useTransition: false, // 不使用CSS3过渡效果
bounce: true, // 允许在顶部和底部弹跳
pullDownRefresh: true, // 开启下拉刷新功能
infiniteScroll: true, // 开启上拉加载功能
click: true // 允许元素点击事件
});
// 监听下拉刷新事件
myScroll.on('scroll', function () {
if (this.y > 60) {
// 超过60px,切换为释放刷新状态
$('.pulldown-wrapper').addClass('down-flip');
this.minScrollY = 60;
} else {
// 否则保持下拉刷新状态
$('.pulldown-wrapper').removeClass('down-flip');
this.minScrollY = 0;
}
});
myScroll.on('scrollEnd', function () {
if ($('.pulldown-wrapper').hasClass('down-flip')) {
// 如果处于释放刷新状态,则触发刷新事件
$('.pulldown-wrapper').addClass('loading');
setTimeout(function () {
// 模拟2秒后数据加载完成
$('#list').prepend('<li>New item</li>');
// 重置下拉刷新状态
$('.pulldown-wrapper').removeClass('loading down-flip');
myScroll.refresh();
}, 2000);
}
});
// 监听上拉加载事件
myScroll.on('scroll', function () {
if ((this.y - this.maxScrollY) < 60) {
// 接近底部60px时,切换为释放加载状态
$('.pullup-wrapper').addClass('up-flip');
} else {
// 否则保持上拉加载状态
$('.pullup-wrapper').removeClass('up-flip');
}
});
myScroll.on('scrollEnd', function () {
if ($('.pullup-wrapper').hasClass('up-flip')) {
// 如果处于释放加载状态,则触发加载事件
$('.pullup-wrapper').addClass('loading');
setTimeout(function () {
// 模拟2秒后数据加载完成
$('#list').append('<li>More item</li>');
// 重置上拉加载状态
$('.pullup-wrapper').removeClass('loading up-flip');
myScroll.refresh();
}, 2000);
}
});
```
上述代码实现的是一个简单的上拉加载和下拉刷新功能,你可以根据自己的需求进行修改和扩展。