在pages.json页面配置文件中，
在需要下拉刷新的页面，开启"enablePullDownRefresh":true
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "列表"
}
}
,{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText": "我的"
}
}
,{
"path" : "pages/shopcart/shopcart",
"style" :
{
"navigationBarTitleText": "購物車"
}
}
,{
"path" : "pages/order/order",
"style" :
{
"navigationBarTitleText": "訂單",
// 开启下拉刷新
"enablePullDownRefresh":true
}
}
,{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText": "詳情頁"
}
}
,{
"path" : "pages/play/play",
"style" :
{
"navigationBarTitleText": "遊戲頁"
}
}
],
// 配置全局外观
"globalStyle": {
// 顶部导航栏字体颜色
"navigationBarTextStyle": "white",
// 顶部导航栏标题内容
"navigationBarTitleText": "uni-app",
// 顶部导航栏背景颜色
"navigationBarBackgroundColor": "#FFDEAD",
"backgroundColor": "#F8F8F8"
},
// 配置底部导航栏
"tabBar":{
"color":"#383838",
"selectedColor":"#FFDEAD",
"backgroundColor":"#FFF8DC",
"list":[
{
"pagePath":"pages/index/index",
"text":"首頁",
"iconPath":"static/icon/home1.png",
"selectedIconPath":"static/icon/home.png"
}, {
"pagePath":"pages/list/list",
"text":"列表",
"iconPath":"static/icon/list1.png",
"selectedIconPath":"static/icon/list.png"
}, {
"pagePath":"pages/order/order",
"text":"訂單",
"iconPath":"static/icon/oder1.png",
"selectedIconPath":"static/icon/order.png"
},{
"pagePath":"pages/shopcart/shopcart",
"text":"購物車",
"iconPath":"static/icon/shopcart1.png",
"selectedIconPath":"static/icon/shopcart.png"
},{
"pagePath":"pages/mine/mine",
"text":"我的",
"iconPath":"static/icon/mine1.png",
"selectedIconPath":"static/icon/mine.png"
}
]
}
}
在页面中需要写下拉刷新方法onPullDownRefresh，和上拉触底方法onReachBottom
在小程序中下拉刷新默认3秒自动关闭，
在h5中下拉刷新不会自动关闭，需要我们设置定时器关闭
uni.stopPullDownRefresh
<template>
<view class="box">
//定位搜索框
<view class="search">
<input type="text" class="txt" v-model="title" />
<view class="btn">
搜索
</view>
</view>
//页面显示内容
<view class="content">
<navigator url="'../detail/detail'+item.Id">
<view class="item2" v-for="(item,index) in subjects" :key="item.Id">
<view class="tit">
{{item.Title}}
</view>
<view class="time">
<view class="kc">
{{item.Section.Name}}
</view>
<view class="sj">
{{formatDate(item.Createtime)}}
</view>
</view>
</view>
</navigator>
</view>
</template>
<script>
export default {
data() {
return {
subjects:[],
pageIndex:1
}
},
// 页面加载方法
onLoad() {
this.getAllSubject()
},
// 下拉刷新方法
onPullDownRefresh() {
this.pageIndex=1
this.subjects=[]
this.getAllSubject()
// 小程序是默认刷新3秒关闭
// h5是需要我们设置定时器关闭
setTimeout(()=>{
uni.stopPullDownRefresh()
},1500)
},
// 上拉触底方法
onReachBottom() {
this.pageIndex++
this.getAllSubject()
},
methods: {
async getAllSubject(){
let r=await uni.$get('/Subject/GetSubjects',{
pageIndex:this.pageIndex,
pageSize:10
})
if(r.length===0){
uni.$msg('没有更多')
return
}
this.subjects.push(...r)
}
}
}
</script>
<style lang="scss" scoped>
.box {
width: 100vw;
font-size: 28rpx;
box-sizing: border-box;
// 搜索框居中fixed定位，减去顶部高度
.search {
width: 90%;
padding: 10rpx;
box-sizing: border-box;
background-color: #eee;
display: flex;
justify-content: space-between;
left: 0;
right: 0;
margin: 0 auto;
position: fixed;
top: var(--window-top);
.txt {
flex: 1;
}
.btn {
background-color: $bg_color2;
}
}
.content {
// 亮出搜索框的高度
margin-top: 60rpx;
.item2 {
padding: 20rpx 10rpx;
border-bottom: 1rpx solid #ccc;
.tit {
font-weight: bold;
font-size: 30rpx;
margin: 10rpx 0;
}
.time {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 15rpx;
font-size: 28rpx;
}
}
}
}
</style>
