微信小程序实现本地分页加载

本文实例为大家分享了微信小程序实现本地分页加载的具体代码，供大家参考，具体内容如下

先看看效果图：

下面附上代码：（这些图片的地址记得改成自己的）

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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现本地分页加载的详细内容...