uniapp搜索和分页的实现
uniapp搜索和分页的实现
·
1.在项目中导入uni-search-bar插件
2.直接使用
<template>
<view class="active">
<!-- 搜索框 -->
<view class="active__search">
<uni-search-bar class="search" placeholder="搜索" cancelButton="none" bgColor="#EEEEEE" @input="search" />
</view>
<view class="recommend">
<!-- 标题 -->
<!-- <view class="recommend__title">{{title}}</view> -->
<!-- 内容 -->
<view class="recommend__content" v-for="(item, index) in recommendList" :key="index" @click="lookInfo(item.Id)">
<view class="flex-space-between">
<view class="recommend__content__title">{{item.Name}}</view>
<view class="recommend__content__look" >{{item.Type}}</view>
</view>
<view class="time flex-space-between">
<view>{{dateFormat(item.PublishDate)}}</view>
<view>{{item.Office}}</view>
</view>
<!-- <view v-if="index === recommendList.length - 1" style="margin: 45rpx 10rpx 0;"></view>
<u-divider v-else style="margin: 0 10rpx 0;"></u-divider> -->
</view>
</view>
<!-- 没有更多 -->
<view class="hint" v-if="showmore">
没有更多..
</view>
<!-- 暂无 -->
<view class="empty" v-if="recommendList.length <= 0">
<image src="../static/sk/null.png" style="width: 414rpx; height: 254rpx;"></image>
<view>
暂无更多
</view>
</view>
</view>
</template>
<script>
import apiutl from '@/common/operate.js'
export default {
data() {
return {
imghosts: apiutl.imghost,
pageindex: 1, //页号
pagesize: 10, //分页大小 后台默认10条,不用更改
total: 0, //数据总条数
isloading: false, // 是否正在请求数据
showmore: false, // 没有更多
title:'',
recommendList:[],
keyword:'',
id:'',
}
},
onLoad(options) {
this.id = options.id
this.search(this.keyword)
},
methods: {
//前往详情
lookInfo(e){
uni.navigateTo({
url: '/pages/control/lawsDetails?id='+e+'&flag='+this.id
})
},
search(keyword) {
// uni.showToast({
// title: '搜索:' + keyword,
// icon: 'none'
// })
//打开节流阀
this.isloading = true;
if(this.id==1){
this.recommendList = [],
this.$api.GetSafeLaw({
SeachKey:keyword,
PageIndex:this.pageindex,//分页
}).then(res => {
if (res) {
this.recommendList=[...this.recommendList,...res.data];
this.total = res.count;
return;
}
});
}else if(this.id==2){
this.recommendList = [],
this.$api.GetSafeNationalStandards({
SeachKey:keyword,
PageIndex:this.pageindex,//分页
}).then(res => {
if (res) {
this.recommendList=[...this.recommendList,...res.data];
this.total = res.count;
return;
}
});
}else if(this.id==3){
this.recommendList = [],
this.$api.GetSafeNationalStandard({
SeachKey:keyword,
PageIndex:this.pageindex,//分页
}).then(res => {
if (res) {
this.recommendList=[...this.recommendList,...res.data];
this.total = res.count;
return;
}
});
}
//关闭节流阀
this.isloading = false;
},
// 触底的事件
onReachBottom() {
console.log("触底的事件")
// 判断是否还有下一页数据
if (this.pageindex * this.pagesize >= this.total){
if(this.total > 0){
this.showmore = true;
uni.showToast({
title: '没有更多数据了',
icon: 'none'
});
}
return;
}
// 判断是否正在请求其它数据,如果是,则不发起额外的请求
if (this.isloading) {
return;
}
// 让页码值自增 +1
this.pageindex += 1
// 重新获取列表数据
this.search(this.keyword)
},
//日期格式化处理
dateFormat(data) {
if (data) {
let date = new Date(data.replace(/-/g, '/'));
let year = date.getFullYear();
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return year + "-" + month + "-" + day;
}
},
},
}
</script>
<style lang="scss">
.active {
background: #FAFAFA;
// padding-top: 30rpx;
min-height: 100vh;
overflow-x: hidden;
&__search{
background: #FFFFFF;
.search {
margin: 0 30rpx;
}
}
.recommend{
margin: 28rpx 0;
border-radius: 8px 8px 8px 8px;
opacity: 1;
&__content{
margin-top: 30rpx;
padding: 30rpx 24rpx 10rpx;
background: #FFFFFF;
&__title{
margin-bottom: 40rpx;
width: 480rpx;
overflow: hidden; /*隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /* 超出部分省略号 */
}
&__look{
background: #52C46D;
border-radius: 0px 0px 0px 20px;
padding: 12rpx 36rpx;
font-size: 26rpx;
font-weight: 400;
color: #FFFFFF;
margin-right: -30rpx;
margin-top: -80rpx;
}
.time{
font-size: 26rpx;
font-weight: 400;
color: #999999;
margin-bottom: 20rpx;
}
}
}
.hint {
padding: 20rpx 0;
line-height: 120rpx;
text-align: center;
font-size: 24rpx;
color: #999;
}
.empty {
padding: 250rpx 0;
// width: 690rpx;
text-align: center;
font-size: 32rpx;
color: #999;
}
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)