前言

項(xiàng)目有一個(gè)功能，就是在頁(yè)面上能夠彈出一個(gè)分頁(yè)加載的數(shù)據(jù)，滑到頂部時(shí)就收縮的容器。效果圖如下：

效果圖

效果圖的關(guān)鍵功能點(diǎn)：能分頁(yè)加載的半容器，滑到頂部就收縮

既然半容器而且數(shù)據(jù)要分頁(yè)加載，那就肯定要到scroll-view，用view不能實(shí)現(xiàn)上拉加載。利用scroll-view組件的bindscrolltoupper（用來(lái)實(shí)現(xiàn)滑到頂部就收縮的效果），bindscrolltolower（用來(lái)實(shí)現(xiàn)分頁(yè)加載的功能），就這么愉快的開工～

開工后，就屁顛屁顛的向老大展示效果～

測(cè)試幾回后，老大說(shuō)Android和IOS不太一樣誒，安卓有點(diǎn)怪的...哈？我測(cè)試對(duì)比后，發(fā)現(xiàn)安卓首先要上滑，再下滑就能收縮的。蘋果直接下滑就能收縮的。然后老大說(shuō)這安卓的用戶體驗(yàn)不太好，最好直接下滑就收縮的，你再研究下吧～

WechatIMG38.jpeg

bindscrolltoupper用不了，那我用啥呢？誒，不是還有touchstart，touchmove，touchend？想了想，感覺這個(gè)可以呢，于是進(jìn)行“手術(shù)”～

果然可以哈，但有點(diǎn)問題，就是滑的太快時(shí)，還沒到頂部就收縮的，emmm，再看文檔，發(fā)現(xiàn)事件對(duì)象有個(gè)target，官方文檔說(shuō)法是"觸發(fā)事件的組件的一些屬性值集合"，就是說(shuō)會(huì)記錄下該組件的屬性，比如距離top多遠(yuǎn)呢，就打印這個(gè)出來(lái)看看，果然有offsetTop(離外容器的頂部距離），用這個(gè)來(lái)判斷，如果0，那就是到頂部了，然后就可以收縮的。為了體驗(yàn)好點(diǎn)的，我就用200來(lái)作為判斷的條件。叨嘮就到此了，該上代碼了～

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">

    <!-- 更多的數(shù)據(jù) -->
    <view class="more-box" hidden="{{!isShowMore}}" @tap="showTap"> 
      點(diǎn)擊查看更多結(jié)果
    </view>

    <!-- 顯示的數(shù)據(jù) -->
    <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必須要有的，因?yàn)槭湛s時(shí)會(huì)有滾動(dòng)的現(xiàn)象
• Tip: isShowMore: 要來(lái)切換數(shù)據(jù)列表和點(diǎn)擊更多結(jié)果的顯示

js:

<script>
import wepy from 'wepy';

export default class index extends wepy.page{
  config={
    navigationBarTitleText:'scroll-view',
  }

  data={
    dataList:['無(wú)可奈何花落去','莊生曉夢(mèng)迷蝴蝶','天涯何處無(wú)芳草','此情可待成追憶','人面不知何處','心悅君兮君不知'],
    dataHei:180,//scroll-view的高度
    isScroll:false,//是否開啟滾動(dòng)
    isShowMore:true,//是否顯示更多結(jié)果
    startY:0,//滑動(dòng)開始的坐標(biāo)Y
    endY:0,//滑動(dòng)結(jié)束的坐標(biāo)Y
  }

  methods={
    showTap(){
      this.dataHei=750;
      this.setMoreData();
    },

    //滑動(dòng)的開始事件
    startTap(e){
      this.startY=this.endY=e.touches[0].pageY;
    },

    //滑動(dòng)的過程事件
    moveTap(e){
      this.endY=e.touches[0].pageY;
    },

    //滑動(dòng)的結(jié)束事件
    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>

就這樣了～這方案可能很小白的，如果有其他更好的方案，不妨提出來(lái)哈～小弟就是要向你們看齊的～