小程序(上拉加载更多数据)

小程序部分

首先设置三个用到的初始值:page数据当前页数、limit当前页面几条数据、hasMoreData上拉时是否继续请求数据,即是否还有更多数据,别的就可以参考下面的代码了
在这里插入图片描述

小程序代码

// pages/customer/customer.js
//获取应用实例
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    admin_type:'',//用户身份
    page:1,//数据当前页数
    limit:10,//当前页面几条数据
    hasMoreData: true,//上拉时是否继续请求数据,即是否还有更多数据
    windowHeight: wx.getSystemInfoSync().windowHeight,//应用程序高度
    data:[]//数据
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    this.getList('正在加载数据...');//调用客户数据

    //获取本地储存的用户信息
    var data=wx.getStorageSync('data');
    that.setData({admin_type:data.type});//把本地存储的用户身份放到初始数据里面
  },
  ///客户数据
  getList:function(message){
    //显示加载中
    wx.showNavigationBarLoading()					//在当前页面显示导航条加载动画
    wx.showLoading({								//显示 loading 提示框
      title: message,
    })
    
    var that = this;
    //获取本地储存的用户信息
    var data=wx.getStorageSync('data');
    wx.request({
      url: app.globalData.api+app.globalData.Customer,
      data:{
        data:data,
        page:that.data.page, 
        limit:that.data.limit,
      },
      method: 'post',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        if(res.data.code==200){
          if (res.data.data.length > 0) {
            //关闭加载
            wx.hideNavigationBarLoading()		//在当前页面隐藏导航条加载动画
            wx.hideLoading()					//隐藏 loading 提示框
            var contentlist = res.data.data;
            if (contentlist.length < that.data.limit) {
              that.setData({
                data:contentlist,
                hasMoreData: false
              })
            } else {
              that.setData({
                data:contentlist,
                hasMoreData: true,
                page:that.data.page+1
              })
             
            }
          } 
        }else if(res.data.code==404){
          //关闭加载
          wx.hideNavigationBarLoading()		//在当前页面隐藏导航条加载动画
          wx.hideLoading()					//隐藏 loading 提示框
          
          wx.showToast({
            title: res.data.msg,
            icon:"none",
            duration:2000
          }) 
        }
      },
      fail: function (res) {
        wx.hideNavigationBarLoading()
        wx.hideLoading()
        fail()
      },
    })
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.data.page = 1
    this.getList('正在刷新数据')
    wx.stopPullDownRefresh()//刷新完成后停止下拉刷新动效
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.hasMoreData) {
      //显示加载中
      wx.showNavigationBarLoading()					//在当前页面显示导航条加载动画
      wx.showLoading({								//显示 loading 提示框
        title: '正在加载数据',
      })
      
      var that = this;
      //获取本地储存的用户信息
      var data=wx.getStorageSync('data');
      wx.request({
        url: app.globalData.api+app.globalData.Customer,
        data:{
          data:data,
          page:that.data.page,
          limit:that.data.limit,
        },
        method: 'post',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) {
          // console.log(res.data)
          if(res.data.code==200){
            if (res.data.data.length > 0) {
              //关闭加载
              wx.hideNavigationBarLoading()		//在当前页面隐藏导航条加载动画
              wx.hideLoading()					//隐藏 loading 提示框
              var x_sj = res.data.data;  //新数据
              if (x_sj.length < that.data.limit) {
                that.setData({
                  //把新数据合并到就数据里面
                  // push  concat  都是合并数据
                  // push 遇到数组参数时,把整个数组参数作为一个元素;而 concat 则是拆开数组参数,一个元素一个元素地加进去。  
                  // push 直接改变当前数组;concat 不改变当前数组。
                  data:that.data.data.concat(x_sj),
                  hasMoreData: false
                })
              } else {
                that.setData({
                  //把新数据合并到就数据里面
                  // push  concat  都是合并数据
                  // push 遇到数组参数时,把整个数组参数作为一个元素;而 concat 则是拆开数组参数,一个元素一个元素地加进去。  
                  // push 直接改变当前数组;concat 不改变当前数组。
                  data:that.data.data.concat(x_sj),
                  hasMoreData: true,
                  page:that.data.page+1
                })
              
              }
            } 
          }else if(res.data.code==404){
            //关闭加载
            wx.hideNavigationBarLoading()		//在当前页面隐藏导航条加载动画
            wx.hideLoading()					//隐藏 loading 提示框
            wx.showToast({
              title: res.data.msg,
              icon:"none",
              duration:2000
            }) 
          }
        },
        fail: function (res) {
          wx.hideNavigationBarLoading()
          wx.hideLoading()
          fail()
        },
      })
    } else {
      wx.showToast({
        title: '没有更多数据',
        icon:"none",
      })
    }
  }
})

tp5代码

控制器

namespace app\api\controller;

use think\Controller;
use app\api\model\CustomerModel;

class Customer extends Controller
{
    //自动调用model
    public function __construct()
    {
        parent::__construct();
        $this->Customer=new CustomerModel();//调用model
    }
    /**
     * @作者: 杨某人
     * @描述: 登录接口
     * @Date: 2021-07-16 15:31:08
     */    
    public function Customer(){
        $input=input('post.');
        $data=$this->Customer->Customer($input);
        return json($data);
    }
}

model部分

namespace app\api\model;

use think\Model;

class CustomerModel extends Model
{
    public function Customer($input){
        
        $data=db('user')
        ->alias('a')
        ->join('purpose b','a.purpose_id=b.purpose_id','left')//用途id      
        ->join('brand c','a.brand_id=c.brand_id','left')//品牌入口id        
        ->join('grade d','a.grade_id=d.grade_id','left')//等级id            
        ->join('type e','a.type_id=e.type_id','left')//类型id               
        ->join('admin f','a.manager_id=f.id','left')//销售经理id                   
        ->where('a.cl_status','neq',3)//处理为失败的不查出来
        ->order('a.user_id ')//id正序
        ->page($input['page'],$input['limit'])//(页数,查出数据个数)
        ->field('a.*,b.purpose_name,f.name,c.brand_name,d.grade_name,e.type_name')
        ->select();
        if($data){
            foreach($data as $k=>$v){
                //管理员
                $admin=db('admin')->field('id,name')->select();
                foreach($admin as $vv){
                    if($v['ls_manager_name']==$vv['id']){
                        $data[$k]['ls_name']=$vv['name'];
                    }
                }
                //当前时间戳
                $time=time();
                //获取15分钟以后的时间戳
                $sw_time=$v['add_time']+60 * 15;

                $data[$k]['time'] = $time;
                $data[$k]['sw_time'] = $sw_time;
                $data[$k]['add_time']=date('Y-m-d',$v['add_time']);
                $data[$k]['up_time']=TimeRule($v['add_time']);
            }
            $data=[
                'code'=>200,
                'data'=>$data,
            ];
        }else{
            $data=['code'=>404,'msg'=>'没有更多的数据了'];
        }
        
        return $data;
    } 
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现微信小程序上拉加载更多数据,你可以通过以下步骤实现: 1. 在 wxml 文件中添加一个 scroll-view 组件,并设置其 scroll-into-view 属性为一个变量,用于记录当前滚动到的位置。 2. 在 js 文件中,定义一个变量 page,表示当前加载的页数,初始值为 1。 3. 在 scroll-view 组件上绑定一个 scrolltolower 事件,当滚动到底部时触发该事件。 4. 在 scrolltolower 事件中,发送请求获取下一页数据,并将 page 加 1。 5. 将获取到的数据添加到原有数据列表中。 6. 在获取数据之前,显示一个 loading 提示。 7. 在请求结束后,隐藏 loading 提示,并更新 scroll-into-view 属性,将页面滚动到数据的最后一项。 以下是一个简单的示例代码: ``` // wxml 文件 <scroll-view scroll-into-view="{{scrollIntoView}}" scroll-y="true" bindscrolltolower="loadMoreData"> <view wx:for="{{dataList}}" wx:key="{{index}}">{{item}}</view> </scroll-view> // js 文件 Page({ data: { dataList: [], // 数据列表 page: 1, // 当前页数 scrollIntoView: '', // 当前滚动到的位置 loading: false // 是否正在加载数据 }, onLoad: function () { this.loadData() }, // 加载第一页数据 loadData: function () { // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=1', success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: res.data.data }) } }) }, // 加载更多数据 loadMoreData: function () { // 如果正在加载数据,则不处理 if (this.data.loading) { return } // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=' + (this.data.page + 1), success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: this.data.dataList.concat(res.data.data), page: this.data.page + 1, scrollIntoView: 'item-' + (this.data.dataList.length - 1) // 将页面滚动到最后一项 }) }, complete: () => { // 标记数据加载完成 this.setData({ loading: false }) } }) // 标记正在加载数据 this.setData({ loading: true }) } }) ``` 在上述示例中,我们使用了 wx.showLoading 和 wx.hideLoading 方法来显示和隐藏 loading 提示。注意,在请求结束后,需要在 complete 回调函数中调用 setData 方法,以更新 loading 变量的值。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值