normal video.mp4 (2.74MB)

解析

思路
1.由于要兼容H5使用c3动画去实现
2.计算自动滚动高度

动画
所使用的动画效果是是一个向上弹跳进入动画，根据实际情况去调整所需要的值

  1. //animation
  2.     动画name,动画时长,延迟执行时间,运动效果，规定动画在播放之前或之后其动画效果是否可见
  4. #animation{
  5.   -webkit-animation:bounceInUp 1s .2s ease both;
  6.     -moz-animation:bounceInUp 1s .2s ease both;
  7. }
  8. @-webkit-keyframes bounceInUp{
  9.   0%{
  10.     opacity:0;
  11.     -webkit-transform:translateY(2000px)
  12.     }
  13.     60%{
  14.     opacity:1;
  15.     -webkit-transform:translateY(-30px)
  16.     }
  17.   80%{
  18.     -webkit-transform:translateY(10px)
  19.     }
  20.   100%{
  21.     -webkit-transform:translateY(0)}
  22.     }
  23. @-moz-keyframes bounceInUp{
  24.   0%{
  25.     opacity:0;
  26.     -moz-transform:translateY(2000px)
  27.     }
  28.     60%{
  29.     opacity:1;-moz-transform:translateY(-30px)
  30.     }
  31.   80%{
  32.     -moz-transform:translateY(10px)
  33.     }
  34.   100%{
  35.     -moz-transform:translateY(0)}
  36.     }

计算高度

  1. 注:由于导航栏为自定义需要计算statusBarHeight与headerHeight的高度。
  3. <scroll-view
  4.             scroll-y="true"
  5.             :show-scrollbar="false"
  6.             :scroll-top="top"
  7.             :scroll-with-animation="true"
  8.             class="container-scroll"
  9.         >
  10.             <view class="container-wrap">
  11.         //...
  12.       </view>
  13. </scroll-view>
  15. this.$nextTick(()=>{
  16.   let view = uni.createSelectorQuery().in(this).select(".container-wrap");
  17.   view.boundingClientRect(data => {
  18.     this.top = data.height + this.statusBarHeight + this.headerHeight - this.windowHeight - 20;
  19.   }).exec();
  20. })