前言
项目有一个功能,就是在页面上能够弹出一个分页加载的数据,滑到顶部时就收缩的容器。效果图如下:
效果图效果图的关键功能点:能分页加载的半容器,滑到顶部就收缩
既然半容器而且数据要分页加载,那就肯定要到scroll-view,用view不能实现上拉加载。利用scroll-view组件的bindscrolltoupper(用来实现滑到顶部就收缩的效果),bindscrolltolower(用来实现分页加载的功能),就这么愉快的开工~
开工后,就屁颠屁颠的向老大展示效果~
测试几回后,老大说Android和IOS不太一样诶,安卓有点怪的...哈?我测试对比后,发现安卓首先要上滑,再下滑就能收缩的。苹果直接下滑就能收缩的。然后老大说这安卓的用户体验不太好,最好直接下滑就收缩的,你再研究下吧~
WechatIMG38.jpegbindscrolltoupper用不了,那我用啥呢?诶,不是还有touchstart,touchmove,touchend?想了想,感觉这个可以呢,于是进行“手术”~
果然可以哈,但有点问题,就是滑的太快时,还没到顶部就收缩的,emmm,再看文档,发现事件对象有个target,官方文档说法是"触发事件的组件的一些属性值集合",就是说会记录下该组件的属性,比如距离top多远呢,就打印这个出来看看,果然有offsetTop(离外容器的顶部距离),用这个来判断,如果0,那就是到顶部了,然后就可以收缩的。为了体验好点的,我就用200来作为判断的条件。叨唠就到此了,该上代码了~
wxml:
<template>
<scroll-view class="data-box" style="height: {{dataHei+'rpx'}};" scroll-y="{{isScroll}}" @scrolltolower="loadMore" @touchstart="startTap" @touchmove="moveTap" @touchend="endTap" scroll-with-animation="true">
<!-- 更多的数据 -->
<view class="more-box" hidden="{{!isShowMore}}" @tap="showTap">
点击查看更多结果
</view>
<!-- 显示的数据 -->
<view class="data-item" hidden="{{isShowMore}}">
<block wx:for="{{dataList}}" wx:key="{{index}}">
<view class="item">{{item}}</view>
</block>
</view>
</scroll-view>
</template>
- Tip: isScroll必须要有的,因为收缩时会有滚动的现象
- Tip: isShowMore: 要来切换数据列表和点击更多结果的显示
js:
<script>
import wepy from 'wepy';
export default class index extends wepy.page{
config={
navigationBarTitleText:'scroll-view',
}
data={
dataList:['无可奈何花落去','庄生晓梦迷蝴蝶','天涯何处无芳草','此情可待成追忆','人面不知何处','心悦君兮君不知'],
dataHei:180,//scroll-view的高度
isScroll:false,//是否开启滚动
isShowMore:true,//是否显示更多结果
startY:0,//滑动开始的坐标Y
endY:0,//滑动结束的坐标Y
}
methods={
showTap(){
this.dataHei=750;
this.setMoreData();
},
//滑动的开始事件
startTap(e){
this.startY=this.endY=e.touches[0].pageY;
},
//滑动的过程事件
moveTap(e){
this.endY=e.touches[0].pageY;
},
//滑动的结束事件
endTap(e){
this.endY=e.changedTouches[0].pageY;
let top=e.target.offsetTop;
//判断是不是下滑,并且下滑的距离是不是超过120和top要小于200,否则就不能下滑
if((this.endY>this.startY && Math.abs(this.endY-this.startY)>120 && top<200)){
this.dataHei=180;
// this.isScroll=false;
this.setMoreData();
return;
}
},
loadMore(){
this.dataList=this.dataList.concat(this.dataList);
}
}
setMoreData(){
if(this.dataHei===750){
this.isScroll=true;
this.isShowMore=false;
}else{
this.isScroll=false;
this.isShowMore=true;
}
}
}
</script>
wxss:
<style lang="less" scoped>
.data-box{
background: #f5f5f5;
overflow: hidden;
transition: height 0.2s;
position: fixed;
bottom: 0;
left: 0;
right: 0;
.more-box{
width: 530rpx;
height: 100rpx;
line-height: 100rpx;
margin: 40rpx auto;
background: #FD9727;
color: #fff;
font-size: 34rpx;
text-align: center;
border-radius: 50rpx;
}
.data-item{
.item{
border-bottom: 1px solid #ccc;
font-size: 34rpx;
color: #333;
height: 150rpx;
line-height: 150rpx;
text-align: center;
}
}
}
</style>
就这样了~这方案可能很小白的,如果有其他更好的方案,不妨提出来哈~小弟就是要向你们看齐的~
网友评论