微信小程序滚动到底部加载新数据

最近在玩微信小程序
然后实现一个滚动到底部加载数据的功能
微信小程序呢还是挺简单的，只要看懂文档基本上都可以学会
那么直接上代码吧

wxml部分

<scroll-view scroll-y='true' style="height:{{height}}px;" bindscrolltolower='lower'>
     <view wx:for="{{lists}}" wx:key="index" class="list">
      {{item.name}}+{{index+1}}
    </view>
</scroll-view>
这里的height使用
可使用窗口高度，即：屏幕高度(screenHeight) - 导航(tabbar)高度
在js里面获取的

js

// pages/cart/cart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"},
      {name:"我是数据"}
    ],
    lists:[],
    page:0,
    number:10,
    height:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  lower()
  {
    console.log(111)
    this.setData({
      page:this.data.page+10,
      number:this.data.number+10,
    })
    console.log(this.data.page,this.data.number)
   // console.log(this.data.list)
    var data=this.data.list.slice(this.data.page,this.data.number);
    data.forEach((e)=>{
      this.data.lists.push(e)
    })
   this.setData({
    lists:this.data.lists
   })
  },
  onLoad: function (options) {
    this.setData({
      lists:this.data.list.slice(this.data.page,this.data.number),
      height:wx.getSystemInfoSync().windowHeight
    })
    console.log(wx.getSystemInfoSync().windowHeight)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxss

.list{
  line-height: 160rpx;
  text-align: center;
}

由于大晚上的没有请求数据，自己随便写了一点 loading也没有写
后期会完善~~