Dragon-v

微信小程序+PHP实现上拉刷新

1.写wxml代码:(因为这里是测试,所以写的比较简答)

<view class="view" wx:for="{{list}}" wx:key="*this">
    <view class="view1">{{item.content}}</view>
</view>

2.写js代码:

// pages/list/list.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        //循环数据
        list:[],
        //页码
        page:'1',
        //总页数
        pages:'',
        //每页显示数量
        size:5
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var _this=this
        wx.request({
          // 请求地址
          url: 'http://www.exam5.com/test/Seek/list',
          //传页码和每页显示的数量
          data: {page:this.data.page,size:this.data.size},
          success: function(res){
              //返回数据后赋值、循环
              var arr=res.data.data;
              arr.forEach(function (v,k) {
                  //将每一个值追加到list数组中
                  _this.data.list.push(v)
              });
              //替换掉list,page,pages(后边两个值均为返回的值)
              _this.setData({
                  list:_this.data.list,
                  page:res.data.page,
                  pages:res.data.pages
              })
          }
        })
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        var _this=this;
        //如果页码大于等于总页数,则做出提示
        if(this.data.page>=this.data.pages){
            wx.showToast({
                title: '到底了',
                icon: 'error'
            })
        }
        wx.request({
          // 请求地址
          url: 'http://www.exam5.com/test/Seek/listX',
          //传页码和每页显示的数量
          data: {page:this.data.page,size:this.data.size},
          success: function(res){
              //返回数据后赋值、循环
              var arr=res.data.data;
              arr.forEach(function (v,k) {
                  //将每一个值追加到list数组中
                  _this.data.list.push(v)
              });
              //替换掉list,page(page值为返回的值)
              _this.setData({
                  list:_this.data.list,
                  page:res.data.page
              })
          }
        })
    }
})

3.后台代码:

//此方法为第一次加载调用的方法
    public function list(){
        //接值
        $page=Request::instance()->param('page');
        $size=Request::instance()->param('size');
        //new模型查询出数据后计算总页数
        $model=new \app\test\model\Lists();
        $data=$model->select();
        $data=collection($data)->toArray();
        $pages=count($data);
        //向上取整计算出总页数
        $pages=ceil($pages/$size);
        //再次查询利用limit进行分段查询
        $data=$model->limit(($page-1)*$size,$size)->select();
        //转化为数组
        $data=collection($data)->toArray();
        //返回页码,数据,总页数
        return json(['code'=>200,'page'=>$page+1,'data'=>$data,'pages'=>$pages,'msg'=>'查询成功']);
    }
    //此方法为上拉调用的方法
    public function listX(){
        //接值
        $page=Request::instance()->param('page');
        $size=Request::instance()->param('size');
        //new模型查询出数据
        $model=new \app\test\model\Lists();
        //利用limit进行分段查询
        $data=$model->limit(($page-1)*$size,$size)->select();
        //转化为数组
        $data=collection($data)->toArray();
        //返回页码,数据(每次返回页码都+1)
        return json(['code'=>200,'page'=>$page+1,'data'=>$data,'msg'=>'查询成功']);
    }

 

posted on 2021-09-21 20:58  Dragon-v  阅读(74)  评论(0编辑  收藏  举报