个人中心 | 微信开放社区

video组件上下滑动切换视频iphone无效

video组件上下滑动切换视频，安卓显示没问题，iphone无效？？？怎么解决？？iphone上下滑动直接出现背景了！ [代码]<[代码][代码]view[代码][代码]>[代码][代码] [代码][代码]<[代码][代码]video[代码] [代码]id[代码][代码]=[代码][代码]"myVideo"[代码] [代码]src[代码][代码]=[代码][代码]"{{url}}"[代码] [代码]controls[代码][代码]=[代码][代码]"{{false}}"[代码] [代码]autoplay[代码][代码]=[代码][代码]"true"[代码] [代码]objectFit[代码][代码]=[代码][代码]"fill"[代码] [代码]bindtouchmove[代码][代码]=[代码][代码]"handletouchmove"[代码] [代码]bindtouchstart[代码][代码]=[代码][代码]"handletouchstart"[代码] [代码]bindtouchend[代码][代码]=[代码][代码]"handletouchend"[代码] [代码]style[代码][代码]=[代码][代码]'top:{{videoheight}}%;'[代码][代码]></[代码][代码]video[代码][代码]>[代码][代码]</[代码][代码]view[代码][代码]>[代码][代码]page{[代码][代码] [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]background-color[代码][代码]: [代码][代码]#000[代码][代码];[代码][代码]}[代码][代码]view{[代码][代码] [代码][代码]position[代码][代码]: [代码][代码]absolute[代码][代码];[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码]; [代码][代码] [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码] [代码][代码]overflow[代码][代码]: [代码][代码]hidden[代码][代码];[代码][代码] [代码][代码]z-index[代码][代码]:[代码][代码]1000[代码][代码];[代码][代码]}[代码][代码]video{[代码][代码] [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码]; [代码][代码] [代码][代码]height[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]}[代码][代码]Page({[代码][代码] [代码][代码]/**[代码][代码] [代码][代码]* 页面的初始数据[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]url:[代码][代码]'http://183.56.149.27/vhot2.qqvideo.tc.qq.com/A-aSuPQ2kL0oTeaLLAzX4JDIsc0rjb9G7dY5AYgtEtHY/p0695s87sjw.mp4?sdtfrom=v1010&guid=84bd1b079f916dc8aeb403bb38aeeda4&vkey=D3E47BA1117752D7801052EF47C846DFE72CDFD66A0431CC1F41B8431129DEB73C334747045738B50E90DF8CE2E41110C45190AD77C5B340945AF17A73942DF3E132B8C974441BA0012EF3D7651C5783C14FDFF9327FCAE44B5E9CDA0A6776F52404EA1EFB876DD85D88E35FF83F76F2A3A462C93CDD3777'[代码][代码],[代码][代码] [代码][代码]videoheight:0,[代码][代码] [代码][代码]flag: 0,[代码][代码] [代码][代码]text: [代码][代码]''[代码][代码],[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]/*[代码][代码] [代码][代码]滑动[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]handletouchmove: [代码][代码]function[代码] [代码](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[代码][代码].shang();[代码][代码] [代码][代码]break[代码][代码];[代码][代码] [代码][代码]case[代码] [代码]'向下滑动'[代码][代码]:[代码][代码] [代码][代码]this[代码][代码].xia();[代码][代码] [代码][代码]break[代码][代码];[代码][代码] [代码][代码]case[代码] [代码]'向左滑动'[代码][代码]:[代码][代码] [代码][代码]break[代码][代码];[代码][代码] [代码][代码]case[代码] [代码]'向右滑动'[代码][代码]:[代码][代码] [代码][代码]break[代码][代码];[代码][代码] [代码][代码]}[代码][代码] [代码][代码]//将当前坐标进行保存以进行下一次计算 [代码][代码] [代码][代码]this[代码][代码].data.lastX = currentX;[代码][代码] [代码][代码]this[代码][代码].data.lastY = currentY;[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]text: text,[代码][代码] [代码][代码]}); [代码][代码] [代码][代码]},[代码][代码] [代码][代码]/*[代码][代码] [代码][代码]开始滑动[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]handletouchstart: [代码][代码]function[代码] [代码](event){[代码][代码] [代码][代码]this[代码][代码].data.lastX = event.touches[0].pageX;[代码][代码] [代码][代码]this[代码][代码].data.lastY = event.touches[0].pageY; [代码][代码] [代码][代码]},[代码] [代码] [代码][代码]/*[代码][代码] [代码][代码]滑动完毕[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]handletouchend: [代码][代码]function[代码] [代码](event){[代码][代码] [代码][代码]this[代码][代码].data.flag = 0[代码][代码] [代码][代码]this[代码][代码].setData({[代码][代码] [代码][代码]text: [代码][代码]"没有滑动"[代码][代码],[代码][代码] [代码][代码]});[代码][代码] [代码][代码]},[代码][代码] [代码][代码]/*[代码][代码] [代码][代码]上滑特效[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]shang:[代码][代码]function[代码][代码](){[代码][代码] [代码][代码]console.log([代码][代码]'shang'[代码][代码]);[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]sl = setInterval([代码][代码]function[代码][代码](){[代码][代码] [代码][代码]if[代码] [代码](that.data.videoheight > -100){[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]videoheight: that.data.videoheight - 2[代码][代码] [代码][代码]});[代码][代码] [代码][代码]}[代码][代码]else[代码][代码]{[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]url:[代码][代码]'http://183.56.149.27/vhot2.qqvideo.tc.qq.com/A-aSuPQ2kL0oTeaLLAzX4JDIsc0rjb9G7dY5AYgtEtHY/p0695s87sjw.mp4?sdtfrom=v1010&guid=84bd1b079f916dc8aeb403bb38aeeda4&vkey=D3E47BA1117752D7801052EF47C846DFE72CDFD66A0431CC1F41B8431129DEB73C334747045738B50E90DF8CE2E41110C45190AD77C5B340945AF17A73942DF3E132B8C974441BA0012EF3D7651C5783C14FDFF9327FCAE44B5E9CDA0A6776F52404EA1EFB876DD85D88E35FF83F76F2A3A462C93CDD3777'[代码][代码],[代码][代码] [代码][代码]videoheight:0[代码][代码] [代码][代码]});[代码][代码] [代码][代码]clearInterval(sl);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},1);[代码][代码] [代码][代码]},[代码][代码] [代码][代码]/*[代码][代码] [代码][代码]下滑特效[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]xia: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]var[代码] [代码]that = [代码][代码]this[代码][代码];[代码][代码] [代码][代码]var[代码] [代码]sl = setInterval([代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]if[代码] [代码](that.data.videoheight < 100) {[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]videoheight: that.data.videoheight + 2[代码][代码] [代码][代码]});[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码] [代码][代码]that.setData({[代码][代码] [代码][代码]url: [代码][代码]'http://183.56.149.27/vhot2.qqvideo.tc.qq.com/A-aSuPQ2kL0oTeaLLAzX4JDIsc0rjb9G7dY5AYgtEtHY/p0695s87sjw.mp4?sdtfrom=v1010&guid=84bd1b079f916dc8aeb403bb38aeeda4&vkey=D3E47BA1117752D7801052EF47C846DFE72CDFD66A0431CC1F41B8431129DEB73C334747045738B50E90DF8CE2E41110C45190AD77C5B340945AF17A73942DF3E132B8C974441BA0012EF3D7651C5783C14FDFF9327FCAE44B5E9CDA0A6776F52404EA1EFB876DD85D88E35FF83F76F2A3A462C93CDD3777'[代码][代码],[代码][代码] [代码][代码]videoheight: 0[代码][代码] [代码][代码]});[代码][代码] [代码][代码]clearInterval(sl);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}, 1);[代码][代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 生命周期函数--监听页面加载[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 生命周期函数--监听页面初次渲染完成[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onReady: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 生命周期函数--监听页面显示[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onShow: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 生命周期函数--监听页面隐藏[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onHide: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 生命周期函数--监听页面卸载[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onUnload: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 页面相关事件处理函数--监听用户下拉动作[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onPullDownRefresh: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 页面上拉触底事件的处理函数[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onReachBottom: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]},[代码] [代码] [代码][代码]/**[代码][代码] [代码][代码]* 用户点击右上角分享[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]onShareAppMessage: [代码][代码]function[代码] [代码]() {[代码][代码] [代码] [代码] [代码][代码]}[代码][代码]})[代码]

GitHub账号

选择需要上架的开放服务

案例类型