小程序点击更多怎么进行数据拼接

简介: 小程序点击更多怎么进行数据拼接

业务场景:


image.png


    点击查看更多进行数据拼接显示




实现思路:


   我们先在公共方法里边声明俩个属性,一个是页数page,一个是每次查询条数。


   页数默认的是第一页,我们在小程序的data里边设置一个page变量,默认也是1


   当发起请求的时候获取page,进行减1就可以获取到上一次查询最后的条数network_num就是这个值



  点击更多的时候将page+1,查询使用limit,第一个参数是从多少条开始,第二个参数是查询多少条


  最后一步就是点击更多进行数据的拼接,当我们初始化进入页面时,是从0开始的,会从数据库拿取第一批数据,当点击更多的时候,使用concat这个方法,将点击更多数据和原始数据进行拼接即可



注意:这里设置的network这个值必须跟你查询时的数量一样




PHP代码


class Common extends Controller {
    protected $page = 1; //默认第一页
    protected $network_num = 10;
    protected $network_bg = 0;
    protected function _initialize() {      
        $this->network_num = empty($network_num) ? 10 : $network_num;
        $this->network_bg = ($this->page - 1) * $this->network_num;
    }
}


使用你要查询的类继承common


class  Allinfo extends  Common{
    public function getInfo(){        
        $where['examine'] = 2;
        // $where['vip_time'] = ['>',time()];
        $product = Db::table('wxb_move_user')->where($where)->order('is_vip desc,creat_time desc')->limit($this->network_bg,10)->select();
        if(!$product){
            $send = ['code'=>400,'msg'=>'暂无数据'];
            return json($send);
        }
        $this->result($product, 200, '获取信息成功', 'json');
    }
}

小程序代码:


/*
author:咔咔
address:陕西西安
wechat:fangkangfk
*/
Page({
  /**
   * 页面的初始数据
   */
  data: {
    companyList:[],
    page:1,
    length:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getCompanyInfo();
  },
  // 获取公司信息
  getCompanyInfo:function(){
    wx.showLoading({
      title: '加载中',
    })
    var that = this;
    var page = this.data.page;
    wxb.Post('/api/automatic.Allinfo/getInfo',{
      page: page
    },function(data){
      wx.hideLoading();
      console.log(data.length)
      that.setData({
        companyList: data,
        length:data.length
      })
    });
  },
  more:function(){
    var that = this;
    var companyList = this.data.companyList;
    var page = this.data.page;
    wxb.Post('/api/automatic.Allinfo/getInfo', {
      page: page+1
    }, function (data) {
      wx.hideLoading();
      console.log(data.length)
      that.setData({
        companyList: companyList.concat(data),
        length: data.length,
        page: page + 1
      })
    });
  },  
})
相关文章
|
2月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
37 1
|
1月前
|
小程序 JavaScript 开发工具
|
1月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
65 4
|
1月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
43 3
|
3月前
|
缓存 小程序 数据库
小程序页面之间(传值)传递数据的方法
小程序页面之间(传值)传递数据的方法
187 63
|
2月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
2月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
3月前
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
4月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
257 0

热门文章

最新文章

下一篇
无影云桌面