Wepy 列表頁scroll-view上拉分頁實現
index.wpy文件
<view class="container">
<view class="m-top">
<!-- 應用的公共組件 -->
<Panel title="選擇菜單" class="panel">
<scroll-view class="scroll" scroll-y="true" @scrolltolower="scrollTolower" style="height:{{height}}px">
<view v-if="noData" class="tc tips pu40">暫無相關數據</view>
<radio-group>
<view class="item" v-for="item in listData" :key="item.index">
<radio :value="item" color="#5ca2fa" data-item="{{item}}" @tap="getCaseItem(item)"></radio>
<view class="item-right">
<!-- 編號 -->
<view class="title">{{item.bh}}</view>
<view class="content">水果名稱:{{item.sgmc}}</view>
<view class="content">價錢:{{item.jq}}</view>
<view class="content">進貨日期:{{item.jhrq}}</view>
<view class="content">進貨地點:{{item.jhdd}}</view>
<view class="content">貨主:{{item.hz}}</div>
</view>
</view>
</radio-group>
</scroll-view>
</Panel>
</view>
<view class="m-bot">
<button class="global-btn" @tap="submitTap">確定</button>
</view>
</view>
</template>
<script>
import wepy from '@wepy/core';
import api from '@/utils/fgRequest';
wepy.page({
data: {
params: {
userName: wx.getStorageSync('user').userInfo.userName, //登錄名,
pageNumber: 1,
pageSize: 5
},
listData: [],
height: "", //scroll高度
pageCount: 0
},
onShow(options) {
let self = this;
self.params.userName = wx.getStorageSync('user').userInfo.userName;
self.listData = []; //
self.calHeight();
self.pageInit();
},
methods: {
//計算scroll高度
<!-- 一定要把不是scroll-view的高度減掉，計算出scroll-view的高度，這一步是重點 -->
calHeight () {
let self = this;
let system = wx.getSystemInfoSync()
let query = wx.createSelectorQuery()
console.log(query);
query.select('.m-bot').boundingClientRect()
.exec(res => {
self.height = system.windowHeight - res[0].height - 46
})
},
pageInit(){
let self = this;
api.request('***/***', self.params , 'POST').then(res => {
if(res.data.code == "0"){
console.log(res.data.data.list);
self.listData.push(...res.data.data.list)
self.pageCount = res.data.data.pageCount
}else{
wx.showToast({
title: res.data.msg,
duration: 1500,
icon: 'none'
})
}
})
},
// 上拉加載
scrollTolower () {
let self = this;
if (self.params.pageNumber == self.pageCount) {
wx.showToast({
title: '已加載全部數據!',
})
} else {
self.params.pageNumber += 1;
self.pageInit()
}
}
});
</script>
<config>
{
"navigationBarTitleText":"水果商店",
"usingComponents":{
"Panel":"~@/components/panel"
}
}
</config>
<style lang="less">
page {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.m-top {
width: 100%;
flex: 1;
overflow: auto;
}
.scroll {
height: 100%;
display: block;
.item {
display: flex;
flex-direction: row;
align-items: baseline;
margin: 20rpx;
.item-right {
display: block;
.title {
padding: 10rpx;
font-size: 32rpx;
color: #0a162e;
}
.content {
padding: 5rpx 10rpx;
font-size: 26rpx;
color: #343d51;
}
}
}
}
.m-bot {
width: 100%;
// height: 100rpx;
}
</style>
雖然實現分頁的方法很多，但是這個也是實現分頁不錯辦法。這個是真實開發總結出來的，×××是我用來代替真實項目的一小部分，還有一小部分功能我刪除了，只保留了如何實現分頁，希望對開發小程序的你們帶來一點幫助。