【小程序】用scroll-view实现展开与收缩的效果，让ios和安卓统一的效果

前言

项目有一个功能，就是在页面上能够弹出一个分页加载的数据，滑到顶部时就收缩的容器。效果图如下：

效果图的关键功能点：能分页加载的半容器，滑到顶部就收缩

既然半容器而且数据要分页加载，那就肯定要到scroll-view，用view不能实现上拉加载。利用scroll-view组件的bindscrolltoupper（用来实现滑到顶部就收缩的效果），bindscrolltolower（用来实现分页加载的功能），就这么愉快的开工～

开工后，就屁颠屁颠的向老大展示效果～

测试几回后，老大说Android和IOS不太一样诶，安卓有点怪的...哈？我测试对比后，发现安卓首先要上滑，再下滑就能收缩的。苹果直接下滑就能收缩的。然后老大说这安卓的用户体验不太好，最好直接下滑就收缩的，你再研究下吧～

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>
复制代码

就这样了～这方案可能很小白的，如果有其他更好的方案，不妨提出来哈～小弟就是要向你们看齐的～