scroll-view实现滑动列表
猪痞恶霸 人气:2滑动列表是每个应用必不可少的部分,而实现也是一件复杂的事情,根据上面的动图实现一个滑动列表,需要考虑到如下几点。
- 列表的滑动区域
- 列表的下拉刷新
- 列表的触底加载
下面我将从这三点来带大家具体如何实现一个完整的滑动列表
滑动区域
使用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,即滚动时默认不使用动画过渡。
总结
加载全部内容