移动端页面上下滑动效果

html-css08

移动端页面上下滑动效果,第1张

简单的做法:

首先设置元素出状态 top (js 的 clientHeight)

利用 css3 transition,(例:transition: top .2s ease)

然后通过事件改变 top 的值,达到滑动的效果(top: client页面高度 ->top: 0)

(以上仅为参考,该元素需要 position: fixed)

复杂的可以再去上网寻找下各种例子,甚至是尝试模仿一些app的效果自己做点东西出来

运行条件

HBuilder X 2.2.2

安装后,从插件市场导入,即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app),可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式,在 manifest.json 的源码视图里配置是切换模式, manifest.json ->app-plus ->nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差,不建议导入过多视频。

项目效果

h5在线地址