数据懒加载 – 分页和限制数据量
json服务器实现数据懒加载:
http://localhost:3000/goods?_page=1&_limit=5
1.page属性
实现数据分页，第几页
2.limit属性
限制每一页请求的数据量
wxss
1.大部分css样式是可以在wxss中使用的
2.支持行内样式
3.目前支持的选择器有：
(1) intro 选择所有拥有 class="intro" 的组件，类选择器
(2) #firstname 选择拥有 id="firstname" 的组件，id选择器
(3) view 选择所有 view 组件，元素选择器
(4) view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件，组选择器
(5) view::after 在 view 组件后边插入内容，伪元素选择器
(6) view::before 在 view 组件前边插入内容，伪元素选择器
注意
1.小程序中没有 window对象 和 document对象
2.一些基于DOM的库，在小程序中无法使用
3.Page下面的data:{}，里面放的状态都是跟视图相关的，放在data里是为了调用setData页面重新渲染
商品列表数据懒加载功能 – onReachBottom处理函数(小程序自带的)
onReachBottom -- 页面上拉触底事件的处理函数
wxml
<!-- --------------------商品列表------------------------- -->
<view wx:for="{{ shopList }}" wx:key="index" class="shopList">
<image src="{{ 'http://localhost:3000' + item.poster }}" mode="widthFix"></image>
<view>
{{ item.name }}
</view>
<!-- 支持行内样式 -->
<view style="color: red">
{{ item.price }}
</view>
<view>
好评率{{ item.goodcomment }}
</view>
</view>
<view style="text-align: center; height: 20px; backgrond-color: #ccc; font-size: 13px" hidden="{{ isHidden }}">到底了</view>
js
Page({
data: { // 跟视图相关
// 商品列表
shopList: [],
isHidden: true
},
currentPage: 1, // 当前商品页，外部全局的变量
TotalCount: 0, // 总数据长度
// 1.生命周期函数--监听页面加载
onLoad: function (options) {
// 请求商品列表的数据
wx.request({
url: 'http://localhost:3000/goods?_page=1&_limit=5',
data: {
},
success: (res) => {
this.TotalCount = res.header["X-Total-Count"] // 总数据长度
this.setData({
shopList: res.data
})
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// 判断是否到底，如果到底就return停止运行下面的代码，请求到的数据 >= 后端数据的长度
// 后端的长度被Mock服务器模拟在请求体中(res.header["X-Total-Count"])
if (this.data.shopList.length >= this.TotalCount) {
this.setData({
isHidden: false
})
return
}
// 每次到底，就让当前页+1
this.currentPage++
// 请求商品列表的数据
wx.request({
// limit不需要动态改变
url: `http://localhost:3000/goods?_page=${this.currentPage}&_limit=5`,
data: {
},
success: (res) => {
this.setData({
// 不能直接赋值，应该是合并展开操作或者concat
shopList: [...this.data.shopList, ...res.data]
})
}
})
}
})
wxss
/* 商品列表 */
.shopList {
overflow: hidden;
padding: 5px;
}
.shopList image {
float: left;
width: 200rpx;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4559.html
