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

前言

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

效果图

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 在我的人生之中,有幸认识了耶稣,认识了神,也许得到他的拯救早已是他命中注定了,我很感谢神,忘了第一次认识他是什么时...
    沐沐Y阅读 819评论 0 3
  • 香港两天的学习,专业知识吸收得很少很少,但是内心的感受是很多很多的。 走出去才知道外面的世界真的很大很精彩,优秀的...
    坚持成习惯阅读 183评论 0 3
  • 今天厂里比较忙,因为过两天展会,老板去其他工厂借三套沙发回来摆场,当然,这就需要我们去把它拉回来。室外应该36度高...
    郑胜杰阅读 214评论 0 0
  • 中国黄平平 一片叶子睡在树上, 一支树叉长在一棵树上。一棵树成长在沉甸甸的泥土里。一只鸟飞过来对...
    时间就是金钱_6abe阅读 477评论 0 0
  • 一番关怀的话语让我想走,一番揭露现实和残酷的话语反而让我想留。不同的人,不同的位置,站在不同的高度,同样的公司,形...
    红茶jl阅读 139评论 0 2