小程序
小游戏
企业微信
微信支付
扫描小程序码分享
看了微信开发文档,video不能嵌套在scroll-view,swiper里。
又看了其它大大的提问,好像也不支持touchmove之类的:https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000c04500f8690584fb60e5c456800&highline=%E6%8A%96%E9%9F%B3
请问短视频的上划切换的类似效果要怎样实现呀?
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
video是定位吗。。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
刚做完这个功能,我的实现方案是:video全屏,与之同层级放一个透明的cover-view,专门处理touch手势进行切换video
你好,感谢回复~
新手一枚,还是不知道具体touch怎么操作。可否提供片段代码?万分感谢了!
你好,你是指touch事件的js代码么
嗯,touch事件和touch事件如何进行切换video 的代码..
//绑定事件---滑动
handletouchmove:
function
(event) {
console.log(
"handletouchmove: "
, event)
if
(
this
.data.flag !==
0
) {
return
}
let currentX = event.touches[
].pageX;
let currentY = event.touches[
].pageY;
let tx = currentX -
.data.lastX;
let ty = currentY -
.data.lastY;
let text =
""
;
//左右方向滑动
(Math.abs(tx) > Math.abs(ty)) {
(tx <
text =
"向左滑动"
.data.flag =
1
else
(tx >
"向右滑动"
2
//上下方向滑动
{
(ty <
"向上滑动"
3
(ty >
"向下滑动"
4
console.log(text);
switch
(text) {
case
'向上滑动'
:
.upSlider();
break
'向下滑动'
.downSlider();
'向左滑动'
'向右滑动'
//将当前坐标进行保存以进行下一次计算
.data.lastX = currentX;
.data.lastY = currentY;
.setData({
text: text
});
},
//绑定事件---开始滑动
handletouchstart:
"handletouchstart: "
.data.lastX = event.touches[
.data.lastY = event.touches[
//绑定事件---滑动完毕
handletouchend:
"handletouchend: "
text:
"没有滑动"
,
//上滑
upSlider:
() {
var
that =
sl = setInterval(
(that.data.videoheight > -
100
that.setData({
videoheight: that.data.videoheight -
that.requestSliderData(
false
)
clearInterval(sl);
);
//下滑
downSlider:
(that.data.videoheight <
videoheight: that.data.videoheight +
true
请问cover-view上绑定的哪个事件啊?
不支持bindtouchmove
另外videoheight反映在html里是改变的哪个值呢(页面的布局我也不太清楚)
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
video是定位吗。。
刚做完这个功能,我的实现方案是:video全屏,与之同层级放一个透明的cover-view,专门处理touch手势进行切换video
你好,感谢回复~
新手一枚,还是不知道具体touch怎么操作。可否提供片段代码?万分感谢了!
你好,你是指touch事件的js代码么
嗯,touch事件和touch事件如何进行切换video 的代码..
//绑定事件---滑动
handletouchmove:
function
(event) {
console.log(
"handletouchmove: "
, event)
if
(
this
.data.flag !==
0
) {
return
}
let currentX = event.touches[
0
].pageX;
let currentY = event.touches[
0
].pageY;
let tx = currentX -
this
.data.lastX;
let ty = currentY -
this
.data.lastY;
let text =
""
;
//左右方向滑动
if
(Math.abs(tx) > Math.abs(ty)) {
if
(tx <
0
) {
text =
"向左滑动"
;
this
.data.flag =
1
;
}
else
if
(tx >
0
) {
text =
"向右滑动"
;
this
.data.flag =
2
}
}
//上下方向滑动
else
{
if
(ty <
0
) {
text =
"向上滑动"
;
this
.data.flag =
3
}
else
if
(ty >
0
) {
text =
"向下滑动"
;
this
.data.flag =
4
}
}
console.log(text);
switch
(text) {
case
'向上滑动'
:
this
.upSlider();
break
;
case
'向下滑动'
:
this
.downSlider();
break
;
case
'向左滑动'
:
break
;
case
'向右滑动'
:
break
;
}
//将当前坐标进行保存以进行下一次计算
this
.data.lastX = currentX;
this
.data.lastY = currentY;
this
.setData({
text: text
});
},
//绑定事件---开始滑动
handletouchstart:
function
(event) {
console.log(
"handletouchstart: "
, event)
this
.data.lastX = event.touches[
0
].pageX;
this
.data.lastY = event.touches[
0
].pageY;
},
//绑定事件---滑动完毕
handletouchend:
function
(event) {
console.log(
"handletouchend: "
, event)
this
.data.flag =
0
this
.setData({
text:
"没有滑动"
,
});
},
//上滑
upSlider:
function
() {
var
that =
this
;
var
sl = setInterval(
function
() {
if
(that.data.videoheight > -
100
) {
that.setData({
videoheight: that.data.videoheight -
2
});
}
else
{
that.requestSliderData(
false
)
clearInterval(sl);
}
},
1
);
},
//下滑
downSlider:
function
() {
var
that =
this
;
var
sl = setInterval(
function
() {
if
(that.data.videoheight <
100
) {
that.setData({
videoheight: that.data.videoheight +
2
});
}
else
{
that.requestSliderData(
true
)
clearInterval(sl);
}
},
1
);
}
请问cover-view上绑定的哪个事件啊?
不支持bindtouchmove
另外videoheight反映在html里是改变的哪个值呢(页面的布局我也不太清楚)