上拉刷新

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
   })
  },

})