微信小程序实现本地分页加载
本文实例为大家分享了微信小程序实现本地分页加载的具体代码，供大家参考，具体内容如下
先看看效果图：
下面附上代码：（这些图片的地址记得改成自己的）
1、js文件：
// 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() {
}
})
2、json文件
{
"usingComponents": {},
"onReachBottomDistance": 200
}
3、wxml文件
<!--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>
4、wxss文件
/* 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;
}
