1.使用场景

在使用<scroll-view>标签之前，我尝试在pages.json里面去设置enablePullDownRefresh 为true,并且设置距离底部多远时触发（单位为px）onReachBottomDistance的值为50，并且配合着使用 onReachBottom 的时候没有触发，据查证，如果页面有没有出现滚动条，没有就不会触发这个函数，因为 view 没有高度（百分百也不行），然后就调用不到 onReachBottom 这个钩子。

2.解决办法

使用uniapp内置组件<scroll-view>（可滚动视图区域，用于区域滚动。需注意在webview渲染的页面中，区域滚动的性能不及页面滚动）。在使用竖向滚动时，需要给 <scroll-view> 一个高度，这里我需求的高度是windowHeight - 搜索框的高度 - 自定义标题栏的高度

windowHeight获取方法

onLoad() {
        this.$nextTick(() => {
                uni.getSystemInfo({
                        success: (res) => {
                                this.windowHeight = res.windowHeight
                                // 这里的话我用的是自定义标题栏，所以使用的windowHeight
                                // 注意这里获得的高度宽度都是px，需要的话去转换rpx
                                // console.log(res.screenHeight); // 屏幕高度，包含导航栏
                                // console.log(res.screenWidth); // 屏幕宽度
                                // console.log(res.windowHeight); // 可使用窗口高度，不包含导航栏
                                // console.log(res.windowWidth); // 可使用窗口宽度
                        }
                })
        })
},

搜索框的高度与自定义标题栏的高度

这里需要借助 uni-app Api 元素节点操作-uni.createSelectorQuery()，这个方法。 这里可以大致省略，只需要给你想要计算的元素绑定class类，class="title-bar",class="search",下面会用到

// 自定义标题栏 HTML部分
<view class="title-bar" style="position: sticky;top: 0;left: 0;z-index: 999;">
        <cu-custom style="background-color: #1B6BF3; color: #FFFFFF;" :isBack="true">
                <block slot="content">风险点清单</block>
                <block slot="right">
                        <view style="margin-right: 20rpx;" @click="show = true">筛选
                        </view>
                </block>
        </cu-custom>
</view>
 //搜索框 HTML部分
<view class="search">
        <view class="cu-bar bg-white search">
                <view class="search-form round">
                        <text class="cuIcon-search"></text>
                        <input type="text" placeholder="请输入风险点清单关键字" confirm-type="search" v-model="dataForm.nameKey"></input>
                </view>
                <view class="action">
                        <button class="cu-btn shadow-blur round bg-blue" @click="getDataList()">搜索</button>
                </view>
        </view>
</view>

uni.createSelectorQuery()，看文档 uni.createSelectorQuery() | uni-app官网 (dcloud.net.cn)

// 自定义标题栏与搜索框高度 js部分
// 这里需要写在onReady钩子里，避免获取到null
// 这里.select后面绑定的是我们对应的dom
onReady() {
        // 获取自定义标题栏的高度
        let query = uni.createSelectorQuery();
        query.select('.title-bar').boundingClientRect(rect => {
                this.titleBarHeight = rect.height
                // console.log('titleBarHeight', this.titleBarHeight);
        }).exec()

        // 获取搜索框的高度
        let searchQuery = uni.createSelectorQuery();
        searchQuery.select('.search').boundingClientRect(rect => {
                this.searchHeight = rect.height
                // console.log('searchHeight', this.searchHeight);
        }).exec();
},

3.`<scroll-view>`标签

这里windowHeight - searchHeight - titleBarHeight就是我们需要得到的滚动区域的高度， <scroll-view>标签里面有一个内置的方法**@scrolltolower**

<scroll-view scroll-y="true" @scrolltolower="onreachBottom" :style="[{ height:  windowHeight - searchHeight - titleBarHeight +  'px'}]">
        <view class="card" v-for="(item, index) in dataList" :key="index">
                <view>
                        <view>
                                <text>{{item.name}}</text>
                        </view>
                        <view>
                                <text>管辖部门 :</text>
                                <text>{{item.deptName}}</text>
                        </view>
                </view>
        </view>
</scroll-view>

4.处理数据

// 下拉加载出发函数
onreachBottom() {
        if (this.dataList.length >= this.totalPage) {
                uni.showToast({
                        title: '已经到底了~',
                        icon: 'none'
                })
        } else {
                this.pageIndex++
                this.init()
        }
},
// 初始化接口
init() {
        Api.server.get(Api.url.getRiskPointList, {
                page: this.pageIndex,
                limit: this.pageSize,
                ...this.dataForm,
        }, res => {
                if (res.code == 0) {
                        this.dataList = this.dataList.concat(res.data.list)
                        // this.dataList = [...this.dataList, ...res.data.list]
                        this.totalPage = res.data.totalCount
                } else {
                        this.dataList = []
                        this.totalPage = 0
                }
        })
},

5. 总结

使用<scroll-view>标签辅助，并且使用内置方法@scrolltolower
通过uniapp原生api uni.createSelectorQuery() 计算需要滚动高度
处理接口返回回来的数据，使用es6方法concat

6.最后

作为前端开发的菜鸟🐦（目前4个月），还是想写一些东西来记录一下成长，如果有不对的地方可以指正一下，或者有不明白的的地方，可以评论，我会及时回复评论，谢谢！

uniapp，scroll-view滚动标签以及下拉刷新