加载更多及触底

页面:

<block wx:for="{{data}}" wx:key="index">

<view class="list">

<view class="list-left">

<view>

<image src="{{item.active_img}}" class="list-img"></image>

</view>

<view class="list-time">

  <view>{{item.active_time}}</view>

  <view>{{item.active_address}}</view>

</view>

</view>

<view class="list-right">

<view class="list-text">

{{item.active_name}}

</view>

<view class="list-money">

  <text class="list-money-text">¥{{item.active_price}}</text>

  <button type="primary" size="mini"  class="list-money-text" bindtap="click" data-id="{{item.active_id}}">预约</button>

</view>

</view>

</view>

</block>

js:页码数据:

 data: {

    // 页码

    page:1,

    // 要展示数据

    data:[],

    // 最后一页的页码

    last_page:"",

  },

详情跳转:

  click(evt){

    // console.log(evt.currentTarget.dataset.id)

    let id=evt.currentTarget.dataset.id

    wx.redirectTo({

      url: '/pages/detail/detail?id='+id,

    })

  },

页面监听:

onLoad: function (options) {

    let _this=this

    try {

      // 取缓存

      var value = wx.getStorageSync('id')

      if (value) {

        // console.log(value)

        // 发送列表请求

        wx.request({

          url: 'http://www.week3.com/index.php/activeList',

          method:"GET",

          data:{

            "pages":4,

          },

          success(res){

            // console.log(res.data.data.data)

            let data=res.data.data.data

            let last_page=res.data.data.last_page

            // 渲染页面

            _this.setData({

              data:data,

              last_page:last_page

            })

          }

        })

      }

    } catch (e) {

      // Do something when catch 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: 'success',

        duration: 2000

      })

    }

    wx.request({

      url: 'http://www.week3.com/index.php/activeList',

      method:"GET",

      data:{

        "pages":4,

        "page":page

      },

      success(res){

        // console.log(that.data.data)   

        // 渲染页面

        that.setData({

          page:that.data.page+1,

          data:that.data.data.concat(res.data.data.data)

        })

      }

    })

    setTimeout(function(){

      wx.hideLoading()

    },2000)

  },

后台:

public function activeList(Request $request){
    $pages=$request->get("pages");
    $data=ActiveList::activeList($pages);
    return json(['data'=>$data]);
}
public static function activeList($pages){
    return self::order('active_time',"desc")->paginate($pages);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值