微信小程序本地分页加载

// pages/shoplist/shoplist.js
Page({
 
  /**
   * 页面的初始数据
   */
  data:{
 
    query:{},
    "list":[
      {
        "id":"1",
        "name":"apple",
        "image":"/shoplist_images/apple.png",
        "address":"砖井村",
        "tel":"18601416781"
      },
      {
        "id":"2",
        "name":"avocado",
        "image":"/shoplist_images/avocado.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"3",
        "name":"avocado_1",
        "image":"/shoplist_images/avocado_1.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"4",
        "name":"banana",
        "image":"/shoplist_images/banana.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"5",
        "name":"barbecue",
        "image":"/shoplist_images/barbecue.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"6",
        "name":"beer",
        "image":"/shoplist_images/beer.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"7",
        "name":"beer_mug",
        "image":"/shoplist_images/beer_mug.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"8",
        "name":"birthday_cake",
        "image":"/shoplist_images/birthday_cake.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"9",
        "name":"bone",
        "image":"/shoplist_images/bone.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"10",
        "name":"bottle",
        "image":"/shoplist_images/bottle.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"11",
        "name":"bowl",
        "image":"/shoplist_images/bowl.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"12",
        "name":"bread",
        "image":"/shoplist_images/bread.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"13",
        "name":"bread_2",
        "image":"/shoplist_images/bread_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"14",
        "name":"cake_1",
        "image":"/shoplist_images/cake_1.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"15",
        "name":"cake_2",
        "image":"/shoplist_images/cake_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"16",
        "name":"cake_3",
        "image":"/shoplist_images/cake_3.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"17",
        "name":"cake_4",
        "image":"/shoplist_images/cake_4.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"18",
        "name":"cake_5",
        "image":"/shoplist_images/cake_5.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"19",
        "name":"candy",
        "image":"/shoplist_images/candy.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"20",
        "name":"canned_fruit",
        "image":"/shoplist_images/canned_fruit.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"21",
        "name":"carrot",
        "image":"/shoplist_images/carrot.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"22",
        "name":"chafing_dish_2",
        "image":"/shoplist_images/chafing_dish_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"23",
        "name":"chafing_dish",
        "image":"/shoplist_images/chafing_dish.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"24",
        "name":"cheese",
        "image":"/shoplist_images/cheese.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"25",
        "name":"chef_hat",
        "image":"/shoplist_images/chef_hat.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"26",
        "name":"cherry",
        "image":"/shoplist_images/cherry.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"27",
        "name":"chicken",
        "image":"/shoplist_images/chicken.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"28",
        "name":"chicken_leg",
        "image":"/shoplist_images/chicken_leg.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"29",
        "name":"crab",
        "image":"/shoplist_images/crab.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"30",
        "name":"fish",
        "image":"/shoplist_images/fish.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"31",
        "name":"hamburger",
        "image":"/shoplist_images/hamburger.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"32",
        "name":"hot_pot",
        "image":"/shoplist_images/hot_pot.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"33",
        "name":"lemon",
        "image":"/shoplist_images/lemon.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"34",
        "name":"popcorn",
        "image":"/shoplist_images/popcorn.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"35",
        "name":"popcorn_2",
        "image":"/shoplist_images/popcorn_2.png",
        "address":"砖井村",
        "tel":"186"
      },
      {
        "id":"36",
        "name":"snacks",
        "image":"/shoplist_images/snacks.png",
        "address":"砖井村",
        "tel":"186"}],   
      i:0,//表示当前item项个数
      shoplist:[],
      result:[],
      isloading:false
    },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData
    ({
      query:options
    })
    this.getshoplist()
    
  },
  getshoplist()
  {
    //当页面加载完毕时停止继续发出请求
    if(this.data.i>this.data.result.length)
    {
      return wx.showToast({
        title: '数据加载完毕！',
        icon:'none'
      })
    }
    //防止多次下滑触底从而发出多次请求
    this.setData({isloading:true}),
    wx.showLoading({
      title: '数据加载中...',
    })
    this.data.shoplist=this.data.list.slice(this.data.i,this.data.i+10)
      this.setData({
        i:this.data.i + 10
        })
        this.data.result=this.data.result.concat(this.data.shoplist)
        this.setData({
          result:this.data.result
        })
        wx.hideLoading()
        this.setData({isloading:false})
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isloading) return
    this.getshoplist()
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})

{
  "usingComponents": {},
  "onReachBottomDistance": 200
}

<!--pages/shoplist/shoplist.wxml-->
<view wx:for="{{result}}" wx:key="id" class="shop-item">
     <image src="{{item.image}}" class="thumb"></image>
  <view class="shop-item-item">
     <view class="shop-title">商品名:{{item.name}}</view>
     <view>店铺地址:{{item.address}}</view>
     <view>联系电话:{{item.tel}}</view>
  </view>
</view>

/* pages/shoplist/shoplist.wxss */
.shop-item{
  display:flex;
  border: 1rpx solid rgb(216, 194, 194);
  border-radius: 50rpx;
  margin: 15rpx;
  box-shadow: 1rpx 1rpx 15rpx rgb(146, 102, 102);
}
.thumb
{
  width: 320rpx;
  height: 320rpx;
  display: block;
  margin-right: 15rpx;
  padding: 15rpx;
}
.shop-item-item
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 30rpx;
}
.shop-title
{
  font-weight: bold;
}