更新记录
1.0.0(2020-04-19) 下载此版本
v1.0.0 手势监听动作功能
平台兼容性
uni-app
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
-
将组件放到项目components目录下
-
引用组件
import Gesture from '@/components/gesture/gesture'
-
在需要使用的地方应用
<view> <gesture @slideLeft="slideLeft" @slideRight="slideRight"> <live-player :src="liveUrl" autoplay object-fit="fillCrop" @statechange="statechange" @error="error" :style="playerWindowSize" /> </gesture> </view>
-
在最外层套一个限定监听手势范围的div,设定其监听的屏幕范围
-
监听gesture组件提交的事件,暂时支持
slideUp
、slideDown
、slideRight
、slideLeft
方向,其他的方向监听,只需要在touchEnd
事件里判断手势类型然后emit对应事件就行了,后面更新slideLeft() { console.log('左滑===>下一页') }, slideRight() { console.log('右滑===>上一页') this.currentSwiperItemId = 'stage-main'; },