web前端全系列 教程
1839个小节阅读:2244.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
掌握了基础的上拉加载之后,我们要做的就是真实的应用场景,我们通过网络请求获取数据,并渲染到页面上
json
文件配置
xxxxxxxxxx
{
"onReachBottomDistance":50
}
逻辑文件
xxxxxxxxxx
const { request } = require("../../utils/request.js")
Page({
data: {
list:[],
page:1
},
onLoad(options) {
this.http(this.data.page);
},
onReachBottom() {
this.setData({
page:this.data.page+=1
})
this.http(this.data.page)
},
http(page){
request("http://iwenwiki.com:3002/api/foods/list","GET",{
city:"北京",
page:page
}).then(res =>{
if(!res.msg){
this.setData({
list:this.data.list.concat(res.data.result)
})
}else{
wx.showToast({
title: res.msg,
})
}
})
}
})
页面渲染
xxxxxxxxxx
<view class="root">
<view class="item" wx:for="{{ list }}" wx:key="index">
<image src="{{ item.pic }}"></image>
<text>{{ item.name }}</text>
</view>
</view>
样式文件
xxxxxxxxxx
page{
background: #f1f1f1;
}
.root{
padding: 10px;
}
.item{
height: 80px;
margin: 5px 0;
background: #fff;
line-height: 100px;
padding: 10px;
}
image{
width: 80px;
height: 80px;
}
text{
height: 80px;
padding-left: 10px;
position: absolute;
line-height: 80px;
}