小程序加载更多、点击回到顶部

HTML页面

<!-- 点击回到顶部 -->
<image src='/pages/img/a.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>

css页面

.goTop{
  height: 80rpx;
  width: 80rpx;
  position: fixed;
  bottom: 50rpx;
  right: 30rpx;
  border-radius: 50%;
}

js页面

// 获取滚动条当前位置
onPageScroll: function (e) {
  //console.log(e)
  if (e.scrollTop > 1500) {
    this.setData({
      floorstatus: true
    });
  } else {
    this.setData({
      floorstatus: false
    });
  }
},
//回到顶部
goTop: function (e) {  // 一键回到顶部
  if (wx.pageScrollTo) {
    wx.pageScrollTo({
      scrollTop: 0
    })
  } else {
    wx.showModal({
      title: '提示',
      content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
    })
  }
},

下拉触底刷新

在js中我们要先定义一个空的数组进行查出下一页数据的追加，然后定义出当前默认页数page这两个参数

js代码

data:{
    //定义每页显示条数和偏移量以及一个可以进行追加的空数组
      data:[],
      page:1,
      limit:5,
      count:''
  },

页面第一次请求的数据

onLoad: function (options) {
    var _thih=this;
      wx.request({
        url: 'http://day531.week2.com/liebiao',
        data:{
          page:_thih.data.page,
          limit:_thih.data.limit
        },
        success:function(res){
          //console.log(res.data.data.data)
          var add = res.data.data.data;
          var count = res.data.data.total;
          //console.log(count)
          _thih.setData({
            data:add,
            count:count
          });
        }
      })
  },

下拉触底加载下一页

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    let _thih=this;
    //获取总条数和当前页数以及onload第一次加载赋过值的数组data
    var count = _thih.data.count;
    var page = _thih.data.page+=1;
    //console.log(page)
    var limit = _thih.data.limit;
    var data = _thih.data.data;
    //让总条数/每页显示条数然后向上取整从而得出总页数【得出总页数】Math.ceil:向上取整
    let zpage = Math.ceil(count / (limit-1))
    //console.log(zpage)
    if(zpage == page){
      wx.showToast({
          title: '我也是有底线的',
        })
        return false;
    }
    wx.request({
      url: 'http://day531.week2.com/liebiao',
      data:{
        page:_thih.data.page,
        limit:_thih.data.limit
      },
      success:function(res){
        //console.log(res.data.data.data)
        var add = res.data.data.data;
        for(let i in add){
            data.push(add[i])
        }
        _thih.setData({
          data:data,
        });
      }
    })
  },

HTML页面正常循环展示

<!-- 列表 -->
<view>
  <block  wx:for="{{data}}" wx:key="key">
    <view class="body">
      <view class="viedo">
         <video 
      id="myVideo" 
      src="{{item.video}}" 
      binderror="videoErrorCallback" 
      danmu-list="{{danmuList}}" 
      enable-danmu 
      danmu-btn 
      show-center-play-btn='{{false}}' 
      show-play-btn="{{true}}" 
      controls
      picture-in-picture-mode="{{['push', 'pop']}}"
      bindenterpictureinpicture='bindVideoEnterPictureInPicture'
      bindleavepictureinpicture='bindVideoLeavePictureInPicture'
      custom-cache="{{false}}"
    ></video>
      </view>  
    <view class="title">{{item.title}}</view>
</view>
   </block>
</view>

后台请求方式

   //详情
    public function read(Request $request)
    {
        //小程序下拉刷新，接收每页显示条数和偏移量
        $page=$request->input('page');
        $limit=$request->input('limit');
        //将获取到的数据存入缓存，先查询缓存，如果有的话就直接从缓存中获取数据，减少数据库压力
//        if (Cache::has('id')){
//            $data=Cache::get('id');
//        }else{
            //$data=Read::with('courseRead')->where('t_id',$id)->get();
            $data=Read::paginate($limit,'*','page',$page);
//            Cache::set('id',$data);
//        }
        $count=Read::count();
        foreach ($data as &$v){
            $v['image']="http://day528.exam9.com/".$v['image'];
        }
        return ['code'=>200,'data'=>$data,'count'=>$count,'msg'=>'查询成功'];
    }