美文网首页让前端飞Web前端之路微信小程序开发
【小程序】用scroll-view实现展开与收缩的效果,让ios

【小程序】用scroll-view实现展开与收缩的效果,让ios

作者: Fernweh_Nancy | 来源:发表于2019-06-06 22:01 被阅读0次

    前言

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

    效果图

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

    既然半容器而且数据要分页加载,那就肯定要到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>
    

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

    相关文章

      网友评论

        本文标题:【小程序】用scroll-view实现展开与收缩的效果,让ios

        本文链接:https://www.haomeiwen.com/subject/igfpxctx.html