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>