小程序使用scroll-view实现一个滑动列表功能

滑动列表是每个应用必不可少的部分，而实现也是一件复杂的事情，根据上面的动图实现一个滑动列表，需要考虑到如下几点。

• 列表的滑动区域
• 列表的下拉刷新
• 列表的触底加载

下面我将从这三点来带大家具体如何实现一个完整的滑动列表

滑动区域

使用scroll-view来固定可视区域，但是有一个关键性问题就是需要明确可视区域的高度，为了使页面固定，用户在可视区域滑动，不会产生溢出而导致页面不固定的问题，就需要根据页面的元素计算可视觉区域的高度。

.home-page-info {
    height: calc(100vh - 508rpx);
    overflow:scroll
}

上面是针对我的场景计算的高度，具体计算掘友们可以根据实际元素高度，运用CSS变量运算，将100vh减去其他元素的高度，而需要注意的是这种情况是你不适应自定义tabbar如果使用自定义tabbar则需要去考虑到不同机型的问题。

下拉刷新

scroll-view的下拉刷新与页面的下拉刷新不同，需要在属性上开启刷新

<scroll-view class="home-page-info" scroll-y="true" refresher-enabled="true" refresher-triggered="{{isPull}}" bindrefresherrefresh="onPull"></scroll-view>

refresher-enabled可以开启自定义下拉刷新，refresher-triggered控制刷新状态，bindrefresherrefresh是触发刷新的函数

一般来讲是在开启自定义刷新后，通过刷新函数异步控制数据请求与刷新状态

onPull() {
        let count = this.data.count
        this.loadPresences(1,count)
},

上面是触发的请求函数，我将下面的代码放在了请求回调中，控制刷新状态。

this.setData({
                isPull: false
            })

这样完成了下拉刷新的功能，总结来看就是搭配refresher的几个属性来控制刷新的整个过程：开始刷新，刷新中请求数据，结束刷新

触底加载

scroll-view的触底加载和页面的触底加载也不同，是靠属性实现

<scroll-view class="home-page-info" scroll-y="true" refresher-enabled="true" refresher-triggered="{{isPull}}" bindrefresherrefresh="onPull" bindscrolltolower="onDown"></scroll-view>

bindscrolltolower是触底加载触发的函数，在内进行数据的请求，一般触底加载可以加动画来使交互更加舒服，而还需要注意的是触底加载需要考虑到重复请求的问题，当网络有延迟，你多次触底会触发多次请求，而触底加载一般是依靠分页和合并数组来实现数据的延续，重复请求相同数据会造成问题，所以一般可以加拦截器来校验重复请求

补充：scroll-view 组件有很多属性，常用的有：

• enable-flex，是否启用flex布局，只有启用，display:flex才会生效。布尔值，默认是false，即默认不启用flex布局。
• scroll-x，是否允许横向滚动。布尔值，默认是false，即默认不允许横向滚动。
• scroll-y，是否允许竖向滚动。布尔值，默认是false ，即默认不允许竖向滚动。使用竖向滚动时，需要给scroll-view设置一个固定的高度，即通过wxss设置height，单位是rpx或px。
• scroll-into-view，自动滚动到指定元素的位置上。它的值是scroll-view的子元素的id，id为字符串类型，且不能以数字开头。
• scroll-with-animation，滚动条滚动时是否使用动画过渡。布尔值，默认值是false，即滚动时默认不使用动画过渡。

总结

到此这篇关于小程序使用scroll-view实现一个滑动列表功能的文章就介绍到这了,更多相关scroll-view实现滑动列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论