自定义组件：
js:
// components/loadmore/loadmore.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
options: {
multipleSlots: true,
},
ready: function() {
var that = this;
const query = wx.createSelectorQuery().in(this)
query.select(".pull").boundingClientRect(function(e) {
that.setData({
height: e.height,
})
}).exec()
},
/**
* 组件的初始数据
*/
data: {
scrollHeight:0,
tips:'下拉刷新',
isTop:false,
isRefreshing:false
},
/**
* 组件的方法列表
*/
methods: {
bindscroll:function(e){
// console.log('bindscroll---');
// console.log(e);
},
bindscrolltoupper: function (e) {
// console.log('滑动到顶部');
// console.log(e);
},
bindscrolltolower: function (e) {
// console.log('滑动到底部');
// console.log(e);
this.triggerEvent('onLoadMore')
},
start:function(e){
// console.log('start');
// console.log(e);
this.data.startY = e.touches[0].pageY;
},
move: function (e) {
var that = this;
// console.log('start');
// console.log(e);
var query = wx.createSelectorQuery().in(this)
query.select('.scroll-wrap').fields({
dataset: true,
size: true,
scrollOffset: true,
properties: ['scrollX', 'scrollY'],
computedStyle: ['margin', 'backgroundColor']
}, function (res) {
res.dataset // 节点的dataset
res.width // 节点的宽度
res.height // 节点的高度
res.scrollLeft // 节点的水平滚动位置
res.scrollTop // 节点的竖直滚动位置
res.scrollX // 节点 scroll-x 属性的当前值
res.scrollY // 节点 scroll-y 属性的当前值
// 此处返回指定要返回的样式名
res.margin
res.backgroundColor
// console.log('-----------');
// console.log(res);
if(res.scrollTop==0){
that.data.isTop = true;
}else{
that.data.isTop = false;
return
}
if(that.data.isRefreshing){
return
}
var dy = e.touches[0].pageY - that.data.startY;
if (dy >= 0 && dy < that.data.height / 2) {
that.setData({
scrollHeight: dy
})
} else if (dy >= that.data.height && dy <= that.data.height * 3 / 2) {
that.setData({
scrollHeight: dy,
tips: '松手释放'
})
} else if (dy >= that.data.height * 3 / 2) {
that.setData({
scrollHeight: that.data.height * 3 / 2
})
}
}).exec()
},
end: function (e) {
// console.log('end');
// console.log(e);
if (this.data.isRefreshing) {
return
}
if(this.data.scrollHeight>this.data.height/2){
this.setData({
scrollHeight: this.data.height,
tips:'正在刷新...',
isRefreshing:true
})
this.triggerEvent('onRefresh')
} else if (this.data.scrollHeight<this.data.height/2&&this.data.scrollHeight>0){
this.setData({
scrollHeight: 0,
tips: '下拉刷新',
isRefreshing:false
})
}
},
stopRefresh:function(){
this.setData({
scrollHeight: 0,
tips: '下拉刷新',
isRefreshing:false
})
}
}
})
wxml:
<!--components/loadmore/loadmore.wxml-->
<scroll-view class='loading-container' scroll-y style='height:100%;' bindscroll='bindscroll' bindscrolltoupper='bindscrolltoupper' bindscrolltolower='bindscrolltolower' class='scroll-wrap'>
<view style='transform:translateY({{scrollHeight - height}}px);height:100%;' bindtouchstart='start' bindtouchmove='move' bindtouchend='end'>
<!-- <view class="weui-loadmore" style='margin:0 auto;padding:1.5em 0;'>
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">{{tips}}</view>
</view> -->
<view class="pull">
<view class="pull-refresh"></view>
</view>
<view class="content">
<slot name="content"></slot>
</view>
</view>
</scroll-view>
wxss:其中引用了weui 这个用不用都无所谓的很简单的
/* components/loadmore/loadmore.wxss */
@import '/pages/common/weui.wxss';
page{
height: 100%;
}
.pull {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #999;
font-size: 12px;
/* display: none; */
}
.pull-refresh {
position: relative;
width: 6px;
height: 6px;
top: 50%;
left: 50%;
margin-left: -3px;
border-radius: 50%;
background-color: rgba(153, 153, 153, 0.2);
/* -webkit-animation: loader10m 2s ease-in-out infinite;
animation: loader10m 2s ease-in-out infinite; */
}
.pull-refresh:before {
content: "";
position: absolute;
top: 0px;
left: -12px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: rgba(153, 153, 153, 0.2);
/* -webkit-animation: loader10g 2s ease-in-out infinite;
animation: loader10g 2s ease-in-out infinite; */
}
.pull-refresh:after {
content: "";
position: absolute;
top: 0px;
left: 12px;
height: 6px;
width: 6px;
border-radius: 50%;
background-color: rgba(153, 153, 153, 0.2);
/* -webkit-animation: loader10d 2s ease-in-out infinite;
animation: loader10d 2s ease-in-out infinite; */
}
.pull.refresh .pull-refresh {
-webkit-animation: loader10m 2s ease-in-out infinite;
animation: loader10m 2s ease-in-out infinite;
}
.pull.refresh .pull-refresh:before {
-webkit-animation: loader10g 2s ease-in-out infinite;
animation: loader10g 2s ease-in-out infinite;
}
.pull.refresh .pull-refresh:after {
-webkit-animation: loader10d 2s ease-in-out infinite;
animation: loader10d 2s ease-in-out infinite;
}
@keyframes loader10g {
0% {
background-color: rgba(153, 153, 153, 0.2);
}
25% {
background-color: rgba(153, 153, 153, 1);
}
50% {
background-color: rgba(153, 153, 153, 0.2);
}
75% {
background-color: rgba(153, 153, 153, 0.2);
}
100% {
background-color: rgba(153, 153, 153, 0.2);
}
}
@keyframes loader10m {
0% {
background-color: rgba(153, 153, 153, 0.2);
}
25% {
background-color: rgba(153, 153, 153, 0.2);
}
50% {
background-color: rgba(153, 153, 153, 1);
}
75% {
background-color: rgba(153, 153, 153, 0.2);
}
100% {
background-color: rgba(153, 153, 153, 0.2);
}
}
@keyframes loader10d {
0% {
background-color: rgba(153, 153, 153, 0.2);
}
25% {
background-color: rgba(153, 153, 153, 0.2);
}
50% {
background-color: rgba(153, 153, 153, 0.2);
}
75% {
background-color: rgba(153, 153, 153, 1);
}
100% {
background-color: rgba(153, 153, 153, 0.2);
}
}
使用：
<!--pages/collection/index.wxml-->
<import src="../../components/collectionList/list.wxml" />
<view class='container'>
<view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box" type="search" size="14"></icon>
<input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" bindconfirm='search' />
<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
<icon type="clear" size="14"></icon>
</view>
</view>
<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
<icon class="weui-icon-search" type="search" size="14"></icon>
<view class="weui-search-bar__text">搜索</view>
</label>
</view>
<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
</view>
<view style='height:calc(100vh - 50px);flex:1;'>
<refresh id='loadmore' bindonRefresh='onRefresh'>
<view slot='content'>
<template is='list' data='{{list:list,width:width}}' />
</view>
</refresh>
</view>
</view>
Js文件：
onRefresh: function () {
this.data.pageIndex = 0;
this.requestPage();
},
onLoadMore: function () {
this.data.pageIndex++
this.requestPage();
},