uniapp实现触底加载以及搜索，附后台代码

分页跟搜索调用的是同一个接口，在mapper.xml中的SQL写搜索条件

Controller层

	@PostMapping("/List")
    public PageResult<ListDto> getList(@RequestBody ListVo listVo) {
        return service.getList(listVo);
    }

Service层

PageResult<ListDto> getList(ListVo listVo);

实现层

	//ListVo继承BaseEntity 
	@Override
    public PageResult<ListDto> getList(ListVo listVo) {
        if (listVo.getParams().get("pageSize") != null) {
        	//Params是分页参数
            PageUtil.pageParamConver(listVo.getParams(), true);
        }
        Integer total = Mapper.selectListByStoreidTotal(listVo);
        List<ListDto> listDtos = Mapper.selectListByStoreid(listVo);
        if (null == listDtos || listDtos.size() == 0) {
            return null;
        }
        return PageResult.<ListDto>builder().data(ListDtos).count((long) total).code(0).build();
    }

BaseEntity

@Data
public class BaseEntity implements Serializable{
    private static final long serialVersionUID = 1L;

    /** 搜索值 */
    private String searchValue;

    /** 创建者 */
    private String createBy;

    /** 创建时间 */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date createTime;

    /** 更新者 */
    private String updateBy;

    /** 更新时间 */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date updateTime;

    /** 备注 */
    private String remark;

    /** 请求参数 */
    private Map<String, Object> params;
    
    public Map<String, Object> getParams()
    {
        if (params == null)
        {
            params = new HashMap<>();
        }
        return params;
    }

    public void setParams(Map<String, Object> params)
    {
        this.params = params;
    }
}

PageResult 可根据自己的项目封装不同的集合数据、分页

@Data
public class PageResult<T> implements Serializable {
    private static final long serialVersionUID = -275582248840137346L;
    private Long total;
    private int code;
    private List<T> rows;
    
	public static <T> PageResultBuilder<T> builder() {
        return new PageResultBuilder();
    }

	public static class PageResultBuilder<T> {
        private Long total;
        private int code;
        private List<T> rows;

        PageResultBuilder() {
        }

        public PageResultBuilder<T> count(Long total) {
            this.total = total;
            return this;
        }

        public PageResultBuilder<T> code(int code) {
            this.code = code;
            return this;
        }

        public PageResultBuilder<T> data(List<T> rows) {
            this.rows = rows;
            return this;
        }

        public PageResult<T> build() {
            return new PageResult(this.total, this.code, this.rows);
        }

        public String toString() {
            return "PageResult.PageResultBuilder(total=" + this.total + ", code=" + this.code + ", rows=" + this.rows + ")";
        }
    }

PageResult并重写equals 和hashCode方法

页面

<view class="diygw-search">
	<view class="flex1 flex padding-xs solid radius-lg">
	    <text style="color: #555 !important" class="diy-icon-search"></text>
	     <input class="flex1"  confirm-type="search" maxlength="30" bindinput='wxSearchInput':value="this.customerName" @input="onIn" bindconfirm='wxSearchFn'bindfocus="wxSerchFocus"bindblur="wxSearchBlur" placeholder='请输入搜索内容' />
	 </view>
     <button class='search' bindtap="wxSearchFn" hover-class='button-hover' @click="getSearch()">搜索</button></view>

<view class="diygw-absolute viplist_0">
  <view v-for="(item,index) in Data" :key="index" class="flex flex-wrap diygw-col-24 text-clz white flex1-clz">

	<view class="flex diygw-col-3">
	     <view class="diygw-avatar vippic-avatar radius bg-none" @click="getInfo(item.customerId)">
	     <!-- 设置头像  并且判断头像是否为空  为空设置默认图片 -->
	     <image mode="aspectFit" class="diygw-avatar-img radius" :src="item.avatar !=( null&&'') ? item.avatar : '/static/logo.png'"></image>
	</view>
</view>

		<view class=" vipName-clz" style="width: 13.5%;" @click="getInfo(item.customerId)"> {{item.Name}} </view>
	    <view class="diygw-col-14 text1-clz" @click="phone(item)"> {{item.phonenumber}} </view>
	</view>
</view>

<script>
	export default {
		data() {
			return {
				Name:'',
				pageNum: 1,
				pageSize: 20,
				Data: [],
				flag: true //是否显示没有更多数据了
			};
		},
		onShareAppMessage: function() {},
		onLoad(option) {
			this.getList();
		},
		mounted() {},
		onReachBottom() { //触底加载滚动到底翻页 
			var that = this
			var pageNums = that.pageNum
			that.pageNum = ++pageNums
			
			this.getList();
		},
		methods: {
			onIn(e){
				this.customerName = e.target.value;
			},
			async init() {}, //获取所有数据
			getList() {
				let that = this
				
				uni.request({
					url: "https://unidemo.dcloud.net.cn/api/news",					
					method: 'get',
					dataType: 'json',
					//此处根据项目改为data接收
					// //从缓存中获取用户id查询信息
					id:this.$session.getUser().Data.id,
					//分页参数
					params: {
						pageNum: that.pageNum,
						pageSize: that.pageSize
					},
					//搜索
					Name: this.Name
					success: (r) => {
					console.log(r)
					//根据后端接口返回数据接收返回值
					if (r.data.code == 0) {
					that.total = r.data.total
						that.Data = [...that.Data, ...r.data.rows]
					}
					if (r.data.rows) {
						that.flag = false
					}
				})
			},//搜索
			getSearch(){
				uni.request({
				    url: 'https://xxxx/xxxx', //仅为示例，并非真实接口地址。
				    data: {
				    //从缓存中获取用户id
				        id: this.$session.getUser().Data.id,
					params: {
						pageNum: that.pageNum,
						pageSize: that.pageSize
					},
					Name: this.Name
				    },
				    header: {
				        'custom-header': 'hello' //自定义请求头信息
				    },
				    success: (r) => {
				        console.log(res.data);
					if (r.data) {
						that.vipData = r.data.rows
					} else {
						that.vipData = []
					}
					if (r.data.rows) {
						that.flag = false
					}				    
				}
			});
		}
	};
</script>