仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5)

html-css010

仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5),第1张

运行条件

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在线地址

weex是基于vue搭建的,所以也遵循CommonJS的模块化规范,可以使用require来引用别的js文件,或者用ES6的import来引用js文件。

weex怎么引用外部css,我也不是很清楚......,一般是通过一个整体布局的html页面来集体引用样式文件。

1:上拉加载更多使用的函数

在最开始使用的是loading这个组件在短链接的情况下就会出现滑动就加载无论是否滑动到底部

在使用list中的loadmore这个函数的时候就会出现在短连接的情况下无法触发loadmore函数

是这样处理的兼容性

2:ref中的topnode是做的回到顶部的兼容

在短连接中使用dom.scrollToElement(el,{})这个方法是没有作用的,在长链接夏是正常的就使用window.scroll(0,0)做兼容处理

3:关于appear 和 disappear 方法的兼容

在短连接的情况下会直接执行appear函数无论是否可见disappear函数在短连接的情况下是不触发的

具体的处理方案长链接正常使用短连接的情况使用window.onscroll来解决

4:关于list中header组件的使用

使用header组件,在长链接的情况下实现滑动到该位置,该模块吸顶,但是在短连接的情况下是不行的

需要用正常的方式就行判断

5:底部定位遮盖的问题

这个空标签的使用是因为底部导航是固定定位一般咱的处理方式是要给遮盖的那部分模块父级设置margin或者padding但是在长短连接的还有安卓IOS的情况下会有不同的兼容问题

6:跳转以及数据请求的链接问题

数据请求问题还有跳转问题对于参数需要使用encodeURIComponent进行编码不要全部编码

7:关于IOS8对于弹性盒模型的兼容问题

实现上下左右居中

实现justify-content:space-around的效果

8:其他问题:

在IOS上如果你在CSS中设置了宽'width:0'你想要动态的改变这个元素的宽的话,该元素在IOS长链接的情况下,会首先闪一下变成你要设置的宽最后会再次变成0

还用对于行内元素使用动画设置高宽的时候无论是否设置display:block均会报错说style为not defind

9:轮播图指示器的问题

在现在的开发环境下,使用的为vue2.5.3版本的使用的时候就会报错具体原因不清楚但是使用行内样式但是不要写px单位就会正常