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

最新推荐文章于 2024-10-03 17:08:59 发布

Dragon-v

最新推荐文章于 2024-10-03 17:08:59 发布

阅读量103

点赞数

分类专栏：微信小程序文章标签： php 小程序微信

本文链接：https://blog.csdn.net/m0_62199749/article/details/120503398

版权

微信小程序专栏收录该内容

16 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用WXML和JS实现微信小程序的页面数据加载。在WXML中，通过`wx:for`指令遍历列表数据，并显示每个条目的内容。JS部分展示了页面加载时如何通过`wx.request`获取数据，以及当用户上拉触底时如何进行分页加载。PHP后台提供了两个方法，分别用于首次加载和上拉刷新时的数据处理，包括计算总页数和利用`limit`进行分页查询。

摘要由CSDN通过智能技术生成

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.PHP后台代码：

//此方法为第一次加载调用的方法
    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'=>'查询成功']);
    }