微信小程序实现本地分页加载
更新时间：2022年08月24日 15:44:53 作者：严定洲
这篇文章主要为大家详细介绍了微信小程序实现本地分页加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现本地分页加载的具体代码，供大家参考，具体内容如下
先看看效果图：
下面附上代码：（这些图片的地址记得改成自己的）
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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了JS批量替换内容中关键词为超链接，避开已存在的链接和alt、title中的关键词的方法。下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了JavaScript实现PC端横向轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
柯里化是将接受多个参数的函数转换成一系列只接受单个参数的函数的过程，而反柯里化是将柯里化函数转换成接受多个参数的函数的过程，本文将带大家理解 js 中的柯里化与反柯里化,需要的朋友可以参考下2023-07-07
这篇文章主要分享了JS回调函数应用的简单实例,比较实用，需要的朋友可以参考下2014-09-09
这篇文章主要介绍了使用js在layui中实现上传图片压缩，layui 是一款采用自身模块规范编写的前端 UI 框架,js上传图片压缩百度有很多方法，,需要的朋友可以参考下2019-06-06
今天小编就为大家分享一篇解决layui 表单元素radio不显示渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
我们都知道,动画其实是由一帧一帧图片组成,快递地播放一组图片就形成了动画,下面这篇文章主要给大家介绍了关于uniapp定义动画的几种方式,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了微信小程序实现侧边导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在做一些关于会员在线的问题时，往往我们要根据览器是否关闭来判断用户是否下线，然后再从session和application中将此用户移除，下面与大家分享下具体的捕捉方法2013-06-06
由于前端开发的火热和一些IT巨头公司 对 web前端开发人员的需求旺盛，让越来越多的人转入前端。今天就为大家分享了一份Web前端开发书单，希望大家喜欢2017-10-10
最新评论