preface

The project has a feature that pops up a paged load of data on the page and shrinks the container when it slides to the top. The renderings are as follows:

Key function point of rendering: half container can be paginated load, slide to the top and shrink

So if you’re going to load a half container and you’re going to load it in pages, you’re going to have to go to an scroll view, and you can’t do that with a view. Using the Scroll View component of bindScrolltoupper (used to achieve the effect of sliding to the top of the shrinkage), Bindscrolltolower (used to achieve the function of page-loading), so happy to start ~

After work, fart pidianpidian to the boss to show the effect ~

After testing several times, the boss said that Android and IOS are not the same ah, Android is a little strange… Huh? When I tested the comparison, I found that Android first slides up, then slides down to shrink. Apples can shrink if they just slide down. Then the boss said that the user experience of Android is not very good, the best direct decline on the contraction, you study it again ~

Bindscrolltoupper doesn’t work, so what do I use? Oh, isn’t there touchStart, Touchmove, touchend? Want to think, feel this can, hence “operation” ~

So he can admire, but a bit of a problem, it is slippery too fast, haven’t to the top is shrinking, emmm, see documents, found a target event object, the official document is some of the properties of components “triggering event value set”, means that would record the component properties, such as how far from the top, just print this out and see, Sure enough, there’s offsetTop, and if you look at this, if it’s 0, you’re at the top, and you can shrink. In order to get a better experience, I’m going to use 200 as the criterion. That’s all for the nagging, it’s time for the code

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"> <! -- more data --> <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>
Copy the code
  • IsScroll is a must, because when you shrink, you scroll
  • Tip: isShowMore: Toggle data lists and click on more results to display

js:

<script>
import wepy from 'wepy';

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

  data={
    dataList:['I can't help the flowers fall'.'Zhuang Sheng knows dreams and is fascinated by butterflies'.'There are plenty of fish in the sea'.'This is a time to remember.'.'I don't know where I am'.'I don't know how happy I am.'], dataHei:180,//scroll view height isScroll:false// Whether to enable scrolling isShowMore:trueStartY :0,// start slide Y endY:0,// end slide Y} methods={showTap(){ this.dataHei=750; this.setMoreData(); }, // Slide the start event startTap(e){this.starty = this.endy = e.ouches [0].pagey; }, // Slide the process event moveTap(e){this.endy =e.touches[0].pagey; }, // Sliding end of the event endTap(e){this.endy = e.touches [0].lettop=e.target.offsetTop; // Determine if the slide is over 120 and top is less than 200, otherwise it cannot slideif((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>
Copy the code

wxss:

<style lang="less" scoped>
  .data-box{
    background: #f5f5f5;overflow: hidden; The transition: height 0.2 s; 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>
Copy the code

So ~ this plan may be very small, if there are other better plan, might as well put forward ha ~ younger brother is to look up to you ~