更新记录

1.00（2019-09-18）

提供完成的项目示例，下载扔到编辑器就可以跑起来。

平台兼容性

H5 宣传屏效果，全屏上下滑动带动画，极致流畅

• 提供完成的项目示例，下载扔到编辑器就可以跑起来。

• 使用 phy-touch 实现类型陌陌的APP宣传下载页效果。只需要4行代码即可成功配置加载！

配置说明

    <template>
      <div>
        <div id="fullpage" class="site__header">
          <div class="section bg1">
            <div class="section-main flex flex-v flex-align-center">
              <p class="p1">玩转自驾游</p>
              <p class="p2">一个app就够了</p>
              <p class="p3">小马在途APP下载</p>
              <image class="iphone" src="/static/dowapp/dow.png" @click="appdow"></image>
              <div class="bb flex flex-l flex-pack-center">
                <image class="sjpmzs" src="/static/dowapp/sjpmzs.png"></image>
                //data-delay 动画延时时间
                //data-show 动画显示效果
                //data-hide 动画隐藏效果
                //具体的效果可以前往这里预览 http://css3lib.alloyteam.com/uilib/animation/demo1/#cta
                <image class="animated" src="logo.png" data-show="fadeIn" data-hide="fadeOut" data-delay="200"></image>
              </div>
            </div>
            <image class="bgimg" src="/static/dowapp/bg1.png"></image>
            <image class="jt" src="/static/dowapp/jt.gif"></image>
          </div>
          bg2、bg3...
        </div>
      </div>
    </template>

    <script>
    import PhyTouch from '@/util/phy-touch'
    import Transform from '@/util/phy-touch/transform.js'
    import FullPage from '@/util/phy-touch/alloy_touch.full_page.js'
    window.Transform = Transform

    export default {
      data () {
        return {
          phyTouch: null,
        }
      },
      onReady () {
        this.phyTouch = new FullPage('#fullpage', {
          animationEnd: function () { },
          leavePage: function () { },
          beginToPage: function () { }
        })
      }
    }
    </script>