上拉刷新

scroll-view

  • 利用scroll-view组件可以自定义下拉和上拉加载实现,详情看官方文档scroll-view
  • 使用scroll-view组件的属性开启下拉刷新
1
2
3
4
5
6
7
8
9
10
11
<scroll-view 
scroll-y="true"
refresher-triggered="{{isTriggered}}"
refresher-enabled="true"
bindrefresherrefresh="handleRefresher"
>
<view></view>
<view></view>
<view></view>
<view></view>
</scroll-view>
  • 然后在下拉刷新的回调中重新获取数据,注意对加载动画的处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Page({
data: {
newsListData: [],
isTriggered:false, // 下拉刷新状态
},
// 获取焦点新闻数据
async getNesDate() {
// 发送请求
let res = await request('/getEntitys',{}, 'POST')
let data = res.data
// 通过map对每一个时间戳进行转换
this.setData({
// 关闭下拉加载
isTriggered : false,
// 获取已发布的数据
newsListData: data
})
},
// 自定义下拉刷新
handleRefresher(){
// 再次发请求获取信息
this.getNesDate()
},
})
  • scroll-view也有下拉加载的回调bindscrolltolower="fn",但需要限定高度
  • 如果对数据遍历做限制,可以限定索引
1
2
<block wx:for='{{studyList}}' wx:key wx:if="{{index<3}}">
</block>

下拉加载

开启设置

  • scroll-view实现下拉加载有缺陷,微信自带了页面加载的回调
  • 下拉加载类似于分页功能,列表滚动到底部时,继续往上拉,加载更多内容 ;实现思路如下
    • 当第一次访问接口时,也就是触发触底函数,前端设置参数pageIndex表示当前页也叫加载次数,封装成请求参数传给后台,后台返回数据过来,与原有数据进行拼接
    • 在请求成功的的回调函数中,判断返回的数据是否大于0,是则取出数据,渲染视图层并显示底部加载效果;否,则没有数据可取,并把没有更多数据显示在列表底部,同时把加载隐藏掉
  • 首先要在app.json中设置window属性开启加载事件
1
2
3
"window": {
"enablePullDownRefresh": true
}
1
2
3
4
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () {},
//页面上拉触底事件的处理函数
onReachBottom: function () {},

案例实现

  • 首先前端要对pageIndex进行设置,没触发一次触底事件就++,发送一次请求,请求就是pageIndex参数,表示请求某一页的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import request from '../../utils/http/request'
const app = getApp()
Page({
data: {
newsListData:[], // 第一次加载就有的数据 (5条,也就是i第一页的数据)
pageIndex:1, // 表示当前索引,对应第几次加载
callbackcount: 5, //需要返回数据的个数
showLoading : false, // 显示加载动画
showNoData: false, // 显示没有数据了
},
/** 页面上拉触底事件的处理函数
*/
// 异步添加数据
async getNewsDataAdd(){
// 封装请求参数
let pageInfo = {
pageSize: this.data.callbackcount, // 只取五条数据
pageIndex: this.data.pageIndex, // 第一页的数据不要请求
}
// 发送请求
let res = await request('/getEntitys', pageInfo, 'POST')
let newData = res.data
// 没有数据了
if(newData.length == 0){
this.setData({
showNoData: true
})
}
// 对数据处理
for(let i=0;inewData.length;i++){
this.data.newsListData.push(newData[i])
}
this.setData({
showLoading : false,
// 获取加载的数据
newsListData:this.data.newsListData
})

},
onReachBottom: function () {
// 触发一次加载次数加加
let index = this.data.pageIndex
index = index + 1
this.setData({
showLoading : true,
pageIndex : index
})
// 获取数据
this.getNewsDataAdd();
},
})

回到顶部

  • 新建components/back-top组件,使用固定定位,位置要动态根据不同机型设置
1
2
3
4
5
6
7
<view 
class="back-top"
wx:if="{{showBackTop}}"
catchtap="backTop"
style="left:{{windowWidth}}px;top:{{windowHeight}}px">
<image class="icon" src="../../assets/images/back-top.png"></image>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.back-top {
width: 70rpx;
height: 70rpx;
position: fixed;
/* top: 740px;
left: 340px; */
border-radius: 50%;
/* background-color: red; */
box-shadow: 0px 0px 5px #f1f1f1;
line-height: 100rpx;
text-align: center;
z-index: 999;
}

.back-top .icon {
width: 70rpx;
height: 70rpx;
opacity: 0.7
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// components/back-top/back-top.js
Component({
/**
* 组件的属性列表
*/
properties: {
showBackTop:{
type:Boolean,
value:false
},
windowWidth:{
type:Number,
value : 0
},
windowHeight:{
type:Number,
value:0
}
},

/**
* 组件的初始数据
*/
data: {

},

/**
* 组件的方法列表
*/
methods: {
backTop(){
this.triggerEvent('backTop')
}
}
})
  • 然后在需要使用的页面引入
1
2
3
4
5
{
"usingComponents": {
"back-top":"/components/back-top/back-top",
}
}
1
2
3
4
5
6
<back-top 
showBackTop="{{showBackTop}}"
windowHeight="{{windowHeight}}"
windowWidth="{{windowWidth}}"
bind:backTop="backTop">
</back-top>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// pages/news/news.js
const app = getApp()
Page({
data: {
showBackTop : false, // 展示返回顶部
windowWidth: 0, // 设备宽度
windowHeight:0, // 设备高度
},
// 监听滚动条坐标
onPageScroll(event){
const that = this
let scrollTop = event.scrollTop
let showBackTop = scrollTop > 500 ? true : false
that.setData({
showBackTop : showBackTop
})
},
// 回到顶部
backTop(){
wx.pageScrollTo({
scrollTop: 0,
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
// 获取新闻数据
this.getNesDate()
let width = wx.getSystemInfoSync().windowWidth - 70
let height = wx.getSystemInfoSync().windowHeight - 135
this.setData({
windowHeight : height,
windowWidth : width
})
},

})