前言
项目有一个功能，就是在页面上能够弹出一个分页加载的数据，滑到顶部时就收缩的容器。效果图如下：
效果图
效果图的关键功能点：能分页加载的半容器，滑到顶部就收缩
既然半容器而且数据要分页加载，那就肯定要到scroll-view，用view不能实现上拉加载。利用scroll-view组件的bindscrolltoupper（用来实现滑到顶部就收缩的效果），bindscrolltolower（用来实现分页加载的功能），就这么愉快的开工～
开工后，就屁颠屁颠的向老大展示效果～
测试几回后，老大说Android和IOS不太一样诶，安卓有点怪的...哈？我测试对比后，发现安卓首先要上滑，再下滑就能收缩的。苹果直接下滑就能收缩的。然后老大说这安卓的用户体验不太好，最好直接下滑就收缩的，你再研究下吧～
WechatIMG38.jpeg
bindscrolltoupper用不了，那我用啥呢？诶，不是还有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>
就这样了～这方案可能很小白的，如果有其他更好的方案，不妨提出来哈～小弟就是要向你们看齐的～
