uniapp上滑数据加载跟下拉刷新，配合若依移动端使用，后台使用若依vue前后端分离版，或者能返回数据即可
uniapp上滑数据加载跟下拉刷新，配合搜索框使用
·
一、简介：
当页面出现需要加载大量数据的时候，页面不可能一下把数据全部返回，在页面中进行上滑操作，触底则进行数据加载，类似于一般的分页，只是在uniapp中将list数据拼接，效果如下图所示，刷新也是一样，在代码中，将上拉加载跟下拉刷新结合，再配合搜索使用，就对一般的使用场景都包含了。
本组件可配合若依移动端uniapp跟若依vue后端使用，其getlist方法可以直接调用若依vue前后端分离版接口
要实现上拉加载跟下拉刷新，首先要在page.json当中设置
“onReachBottomDistance”: 150, //上拉距离多少加载
“enablePullDownRefresh” :true, //开启上拉刷新
“backgroundColor” :“#F8F8F8” //下拉背景色
{
"path" : "pages/car/carlist",
"style" :
{
"navigationBarTitleText": "列表",
"style" :{
"onReachBottomDistance": 150,
"enablePullDownRefresh" :true,
"backgroundColor" :"#F8F8F8"
}
}
},
二、代码
1.前端vue
<template>
<view>
<!-- 搜索框 -->
<uni-search-bar class="uni-mt-10" @confirm="search" placeholder="点击搜索姓名" :focus="false" v-model="searchValue" @input="input"
@cancel="cancel" @clear="clear">
</uni-search-bar>
<!-- 分割栏 菜单-->
<view class="divider"/>
<uni-row class="menu" :width="nvueWidth" >
<uni-col :span="10" class="uni-mt-5">
<button type="primary" size="mini" @click="add">新增</button>
</uni-col>
</uni-row>
<!-- 分割栏 -->
<view class="divider"/>
<!-- 列表 -->
<uni-section title="用户列表" type="line">
<uni-collapse v-for="(item ,index) in carLicenseList" :key="index" accordion >
<uni-collapse-item note="描述信息" :title="item.carUserName" showArrow :key="index"
thumb="../static/user.png">
<uni-row :gutter="10">
<uni-col :span="5">
<image class="image" src="../static/car.png"></image>
</uni-col>
<uni-col :span="11">
<uni-row class="a">
<uni-col :span="10" >
<span >车牌：</span>
</uni-col>
<uni-col :span="14" >
<uni-tag :text="item.carNumber" type="primary" />
</uni-col>
</uni-row>
<uni-row class="b">
<uni-col :span="10">
<span>电话号码：</span>
</uni-col>
<uni-col :span="14">
<uni-tag :text="item.phone" type="success" />
</uni-col>
</uni-row>
</uni-col>
<uni-col :span="7">
<uni-row class="menuitem">
<button type="primary" size="mini" plain="true" @click="edit(item)">修改</button>
</uni-row>
<uni-row class="menuitem">
<button type="warn" size="mini" @click="handleDelete(item)">删除</button>
</uni-row>
</uni-col>
</uni-row>
</uni-collapse-item>
</uni-collapse>
</uni-section>
<!-- 触底显示加载状态 -->
<uni-load-more :status="status"> </uni-load-more>
</view>
</template>
2.js
<script>
import {listCarLicense,delCarLicense} from '@/api/car/car'
export default {
data() {
return {
nvueWidth: 730,
accordionVal:'1',
searchValue: '',
queryParams:{
pageNum: 1,
pageSize: 20,
parkId: null,
carUserName: ''
},
// carLicense列表数据
carLicenseList: [],
loading: false,
status: "loading",
// 总条数
total: 0,
}
},
//触底函数
onReachBottom() {
//判断 如果每页显示个数*总页数>返回的总数，则显示底部加载状态为没有更多数据了，否则显示转圈，正在加载
if(this.queryParams.pageNum * this.queryParams.pageSize >= this.total){
this.status="noMore"
return ;
}else{
this.status="loading"
}
if(this.loading) return
this.queryParams.pageNum += 1
// console.log('我到地步了')
this.getList()
},
// 上拉动态刷新函数
onPullDownRefresh(){
// 1，重置数据
this.queryParams.pageNum = 1
this.total = 0
this.loading = false
this.carLicenseList = []
//2 发起请求
this.getList(() => uni.stopPullDownRefresh())
},
//页面进来首先进行加载数据，调用searchList（）方法
created() {
this.searchList();
},
methods: {
/** 查询carLicense列表 */
async getList(cb) {
this.loading = true;
listCarLicense(this.queryParams).then(response => {
this.loading = false;
cb && cb()
//当前数据与后台传过来的数据进行合并
this.carLicenseList =[...this.carLicenseList,...response.rows] ;
this.total = response.total;
});
},
searchList(){
this.loading = true;
listCarLicense(this.queryParams).then(response => {
this.loading = false;
this.carLicenseList =[...this.carLicenseList,...response.rows] ;
this.total = response.total;
});
},
//搜索框函数
search(res) {
uni.showToast({
title: '搜索：' + res.value,
icon: 'none'
})
this.queryParams.carUserName=res.value
this.queryParams.pageNum = 1;
this.carLicenseList=[]
this.searchList()
this.status="noMore"
},
//搜索框动态搜索显示查到的列表
input(res) {
console.log('----input:', res)
this.queryParams.carUserName=res
this.queryParams.pageNum = 1
this.total=0
this.carLicenseList=[]
this.loading=true
this.status="noMore"
this.searchList()
},
//搜索框清空函数
clear(res) {
this.queryParams.carUserName=''
this.queryParams.pageNum = 1
this.total=0
this.carLicenseList=[]
this.searchList()
this.loading=false
},
//搜索框点击取消函数
cancel(res) {
// uni.showToast({
// title: '点击取消，输入值为：' + res.value,
// icon: 'none'
// })
this.queryParams.carUserName=''
this.queryParams.pageNum = 1
this.total=0
this.carLicenseList=[]
this.getList()
},
//下面的方法为本程序的特有的逻辑代码，可忽略
add() {
this.$tab.navigateTo("/pages/car/addCar");
},
edit(item){
this.$tab.navigateTo("/pages/car/editCar?item="+ encodeURIComponent(JSON.stringify(item)));
},
/** 删除按钮操作 */
handleDelete(item) {
const id = item.id;
this.$modal.confirm('是否确认删除姓名为"' + item.carUserName + '"的数据项？').then(function() {
return delCarLicense(id);
}).then(() => {
this.$modal.msgSuccess("删除成功,请下拉刷新页面");
this.onPullDownRefresh();
}).catch(() => {});
},
}
}
</script>
3.css
<style lang="scss">
.uni-mt-10 {
//margin-top: 10px;
background-color: white;
}
.uni-mt-5 {
margin-top: 7px;
margin-left: 14px;
}
.tag-view {
margin-right: 10px;
margin-left: 14px;
margin-top: 10px;
height: 50px;
vertical-align: center;
}
.menu{
background-color: white;
height: 40px;
vertical-align: center;
border-radius: 10px;
}
.divider{
background: #E0E3DA;
width: 100%;
height: 5rpx;
}
.demo-uni-col {
height: 50px;
border-radius: 3px;
margin-left: 14px;
}
.image{
height: 50px;
width: 50px;
margin-left: 14px;
}
.demo-uni-col1 {
height: 50px;
border-radius: 3px;
}
.dark {
background-color: #d3dce6;
vertical-align: center;
}
.spanname {
width: 100px;
}
.a {
margin-top: 5px;
}
.b {
margin-top: 8px;
}
.menuitem {
float: right;
margin-bottom: 0px;
}
</style>
4.后台请求的文件
import request from '@/utils/request'
// 查询carLicense列表
export function listCarLicense(query) {
return request({
url: '/carLicense/carLicense/list',
method: 'get',
data: query
})
}
快速构建 Web 应用程序
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)