微信小程序 分页、下拉加载、到底提示

效果图

微信小程序 分页、下拉加载、到底提示

微信小程序 分页、下拉加载、到底提示

微信小程序 分页、下拉加载、到底提示

wxml页面

** 下载微信小程序页面布局组件 lin-ui 更快布局**

直接通过git下载 Lin UI 源代码,并将 dist 目录(Lin-UI 组件库)拷贝到自己的项目中

git clone https://github.com/TaleLin/lin-ui.git

打开lin-ui手册

布局组件 - 卡片 Card - 《Lin UI v0.5 使用教程》 - 书栈网 · BookStack

微信小程序 分页、下拉加载、到底提示

<!--pages/cart/cart.wxml-->
<view wx:for="{{movies}}" wx:for-item="item">
  <l-card type="primary" 
          full="{{true}}"
          image="{{item.images}}"
          title="{{item.movie_name}}">
     <view class="content">
        {{item.movie_name}}
    </view>
  </l-card>
</view>
<!-- 提示框 -->

.json页面

将l-card 标签引入json文件中 ,此处linui是我将下载好的dist文件夹名称后来改为的linui

{
  "usingComponents": {
    "l-card":"/linui/card/index"
  }
}

js页面代码


Page({
  data: {
    page:1,//页码
    movies:[],//即将展示的数据
    last_page:'',//最后一页页码
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {//页面加载求出第一页数据
    let that = this;
       wx.request({
         url: 'http://www.test.com/test',
         data:{
             pageSize :10,//每页查询条数
         },
         success:(res)=>{
           console.log(res.data.data);
           that.setData({
             movies:res.data.data.data,
             last_page:res.data.data.last_page//获取最后一页的页码数存起来
           })
         }
       })
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (e) {
    let that = this;
    let page = that.data.page+1;//获取下一页
   wx.showLoading({//温馨提示正在加载第几页
     title: '正在加载第'+page+"页",
   })

   if(page>this.data.last_page)
   {//判断是否到最后一页
     wx.showToast({
      //友情提示
       title: '到底了',
       icon:'error'
     })
   }
    wx.request({
      url: 'http://www.test.com/test',
      data:{
          pageSize :10,
          page:page//传到后台de页码
      },
      success:(res)=>{
        // console.log(res.data.data.data);
        that.setData({
          //页码数量继续+1
          page:that.data.page+1,
          //将查询到下一页的数据拼接到上一页
          movies:that.data.movies.concat(res.data.data.data)

        })

          setTimeout(function () {//提示设置过期时间隐藏
              wx.hideLoading()
          },1000)
      }
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

PHP后台数据

function test()
    {
        $size  = $this->request->param('pageSize');//接受每条查询的条数
//paginate会自动使用我们传过来的页码,我们只需在小程序传数据的时候把页面page和每页条数size传过来即可

        $movie = \app\admin\model\Movies::paginate($size);

        return  json(['code'=>200,'msg'=>'success','data'=>$movie]);

    }
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 1
import http from "../../common";

// pages/find/find.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    show: ['', '', '', ''],
    showflag: [false, false, false, false],
    arrows:['icon-xiangxia','icon-xiangxia','icon-xiangxia','icon-xiangxia'],
    page:1,//页码
    movies:[],//即将展示的数据
    last_page:'',//最后一页页码
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    // 判断token是否存在
    var token = wx.getStorageSync('token')
    //  判断是否登录过
    var id = wx.getStorageSync('id')
    let header = { 'Authorization': 'Bearer' + " " + token }
    let pageSize=8
  // 实例化
  var promise = new Promise(function (resolve) {
    // 调用请求
    resolve(http("goods/goodsList", 'get', {id,pageSize}, header));
  });
  // 取出请求里的值
  promise.then(function (res) {
    console.log(res.data.data)
    // var img=value.data
  that.setData({
      movies:res.data.data,
      last_page:res.data.last_page//获取最后一页的页码数存起来
    })
  }).catch(function (error) {
    console.error(error);
  });

  },
    /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function (e) {
    let that = this;
    let page = that.data.page+1;//获取下一页
   wx.showLoading({//温馨提示正在加载第几页
     title: '正在加载第'+page+"页",
   })

   if(page>this.data.last_page)
   {//判断是否到最后一页
     wx.showToast({
      //友情提示
       title: '到底了',
       icon:'error'
     })
   }
    // 判断token是否存在
    var token = wx.getStorageSync('token')
    //  判断是否登录过
    var id = wx.getStorageSync('id')
    let header = { 'Authorization': 'Bearer' + " " + token }
    let pageSize=8
  // 实例化
  var promise = new Promise(function (resolve) {
    // 调用请求
    resolve(http("goods/goodsList", 'get', {id,pageSize,page}, header));
  });
  // 取出请求里的值
  promise.then(function (res) {
    // console.log(res)
  that.setData({
    page:that.data.page+1,
    movies:that.data.movies.concat(res.data.data)

    })
  setTimeout(function () {//提示设置过期时间隐藏
    wx.hideLoading()
},1000)
  }).catch(function (error) {
    console.error(error);
  });
  },

  // 遮罩
  onShadeDiv(evt) {
    let index = evt.currentTarget.dataset.index;
    let show = this.data.show;
    let showflag = this.data.showflag;
    let arrows = this.data.arrows;

    if(showflag[index]){ // 已显示,再次点击隐藏起来
      show[index] = '';
      showflag[index] = false;
      arrows[index] = 'icon-xiangxia';
    }else{
      for(let key in show){
        if(key == index){
          show[key] = 'now';
          showflag[key] = true;
          arrows[key] = 'icon-xiangshang';
        }else{
          show[key] = '';
          showflag[key] = false;
          arrows[key] = 'icon-xiangxia';
        }
      }
    }
    this.setData({
      show,
      showflag,
      arrows
    })
  }

})
   public function goodsList(Request $request){
        $pageSize = $request->get('pageSize');
        $data=Goods::goodsList($pageSize);
//        将图片路径字符串转为数组
        foreach ($data as $key=>$val){
            $data[$key]['img']=explode(',',$val['img']);
        }
        return response(['code'=>200,'data'=>$data,'msg'=>'查询成功']);
    }
2年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!