一、需求场景
二、需求分析
三、技术方案
四、技术知识点简介
4.1 下拉刷新（onPullDownRefresh）
{
"pages": [
{
"path": "pages/list/testPulldownRefreshReachBottom",
"style": {
"navigationBarTitleText": "产品列表",
"enablePullDownRefresh": true,
"app-plus": {
"bounce": "vertical"
}
}
}
]
}
{
"pages": [
{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#ff3333",
"style": "default",
"contentdown": {
"caption": "下拉可刷新自定义文本"
},
"contentover": {
"caption": "释放可刷新自定义文本"
},
"contentrefresh": {
"caption": "正在刷新自定义文本"
}
}
}
}
}
]
}
4.2 页面滚动到底部的事件（onReachBottom）
4.3 监听页面滚动（onPageScroll）
onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
console.log("滚动距离为：" + e.scrollTop);
},
4.4 uni.pageScrollTo(OBJECT)
五、实例效果图
六、实例代码
testPulldownRefreshReachBottom.vue文件代码
<template>
<view class="content-root">
<view class="content-wrap">
<view v-if="productList && productList.length > 0">
<view class="list-item" v-for="(item, index) in productList" :key="index">
<text class="itme-name">{{ item.name }}</text>
<text class="itme-desc">{{ item.desc }}</text>
</view>
</view>
<view class="no-data" v-else>暂无数据</view>
<view class="no-more-data" v-if="noMoreData">
<text>没有更多数据了</text>
</view>
</view>
<view class="go-top" v-if="showGoToTop" @click="goToTop">
<text>回到</text>
<text>顶部</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
productType: 1,
currentPage: 1,
lastPage: 1,
lastPostion: 0,
pageSize: 30,
total: 0,
noMoreData: false,
productList: [],
showGoToTop: false
}
},
onLoad(option) {
this.productType = option.productType
this.getProductList(true)
},
onPageScroll(e) {
this.lastPostion = e.scrollTop
console.log(`当前滚动位置 this.lastPostion = ${this.lastPostion} , this.showGoToTop = ${this.showGoToTop}`)
if (this.lastPostion > 300) {
this.showGoToTop = true
} else if (this.showGoToTop) {
this.showGoToTop = false
}
},
onPullDownRefresh() {
this.lastPage = this.currentPage
this.currentPage = 1
this.getProductList(true)
setTimeout(() => {
uni.stopPullDownRefresh()
}, 600);
},
onReachBottom() {
if (this.noMoreData) {
return
}
this.lastPage = this.currentPage
this.currentPage++
this.getProductList(false)
},
methods: {
//回到顶部
goToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 0,
})
},
//获取商品列表
async getProductList(refresh) {
//let result = await getProductList() // 网络请求
setTimeout(() => {// 模拟网络请求
if (refresh) {
this.iniLocalData()
return
}
this.loadMoreData()
}, 500);
},
iniLocalData() {
this.noMoreData = false
this.productList = [
{
productId: "1234567890",
name: "西蓝花",
desc: "有机蔬菜，安全健康",
skuType: [
{
id: "1",
price: "9.99",
txt: ""
}
]
},
{
productId: "3234567890",
name: "西红柿",
desc: "有机蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "9.00",
txt: ""
}
]
},
{
productId: "4234567890",
name: "洋葱",
desc: "洋葱可生吃，安全健康;",
skuType: [
{
id: "1",
price: "5.00",
txt: ""
}
]
},
{
productId: "1734567890",
name: "小青菜",
desc: "有机蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "3.00",
txt: ""
}
]
},
{
productId: "1234467890",
name: "上海青",
desc: "蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "3.00",
txt: ""
}
]
},
{
productId: "1234567390",
name: "上海青",
desc: "蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "3.00",
txt: ""
}
]
},
{
productId: "1239567390",
name: "娃娃菜",
desc: "蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "8.00",
txt: ""
}
]
},
{
productId: "1239567390",
name: "胡萝卜",
desc: "有机蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "5.00",
txt: ""
}
]
},
{
productId: "1239567390",
name: "西葫芦",
desc: "蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "8.00",
txt: ""
}
]
},
{
productId: "1239567390",
name: "紫甘蓝",
desc: "蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "5.00",
txt: ""
}
]
},
{
productId: "1239567390",
name: "大白菜",
desc: "蔬菜，安全健康;",
skuType: [
{
id: "1",
price: "3.00",
txt: ""
}
]
}
]
},
loadMoreData() {
if (this.noMoreData) {
return
}
let result = [
{
productId: "2239567390",
name: "牛腱",
desc: "新鲜牛肉;",
skuType: [
{
id: "1",
price: "109.00",
txt: ""
}
]
},
{
productId: "2239567391",
name: "牛腿肉",
desc: "新鲜牛肉;",
skuType: [
{
id: "1",
price: "99.00",
txt: ""
}
]
},
{
productId: "2239567392",
name: "牛腩",
desc: "新鲜牛肉;",
skuType: [
{
id: "1",
price: "89.00",
txt: ""
}
]
},
{
productId: "2339567390",
name: "排骨",
desc: "新鲜猪肉;",
skuType: [
{
id: "1",
price: "29.00",
txt: ""
}
]
},
{
productId: "2339567391",
name: "后退肉",
desc: "新鲜猪肉;",
skuType: [
{
id: "1",
price: "18.00",
txt: ""
}
]
},
{
productId: "2339567390",
name: "五花肉",
desc: "新鲜猪肉;",
skuType: [
{
id: "1",
price: "24.00",
txt: ""
}
]
}
]
this.productList = [...this.productList, ...result]
this.noMoreData = true // 这个逻辑在实际项目开发中以接口返回的总数量为准
}
}
}
</script>
<style scoped>
.content-root {
height: 100%;
background-color: #f5f5f5;
padding: 32rpx;
}
.content-wrap {
background-color: #f5f5f5;
padding-bottom: 80rpx;
}
.list-item {
display: flex;
padding: 16rpx 20rpx;
flex-direction: column;
background-color: #ffffff;
border-radius: 16rpx;
color: #000;
margin-bottom: 32rpx;
}
.itme-name {
font-size: 32rpx;
}
.itme-desc {
font-size: 24rpx;
}
.no-data {
height: 100%;
text-align: center;
margin-top: 400rpx;
color: #000;
font-size: 28rpx;
}
.no-more-data {
width: 100%;
height: 50rpx;
color: #000;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
text-align: center;
}
.go-top {
z-index: 99;
position: fixed;
display: flex;
flex-flow: column;
right: 0;
bottom: 0;
margin-right: 32rpx;
margin-bottom: 200rpx;
width: 80rpx;
height: 80rpx;
align-items: center;
background-color: #eeeeee;
border-radius: 50%;
font-size: 20rpx;
font-family: PingFangSC-Medium, PingFang SC;
text-align: center;
}
</style>