公告列表
公告列表
收藏
回答

小程序美拍的视频切换（类似抖音）如何实现？

看了微信开发文档，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 个回答

  • Flowcy🐳
    Flowcy🐳
    2018-07-10

    video是定位吗。。

    2018-07-10
    有用
    回复
  • 妮子
    妮子
    2018-07-10

    刚做完这个功能，我的实现方案是：video全屏，与之同层级放一个透明的cover-view，专门处理touch手势进行切换video

    2018-07-10
    有用
    回复 19
    • Flowcy🐳
      Flowcy🐳
      2018-07-10

      你好，感谢回复~

      新手一枚，还是不知道具体touch怎么操作。可否提供片段代码？万分感谢了！

      2018-07-10
      赞
      回复
    • 妮子
      妮子
      2018-07-10回复Flowcy🐳

      你好，你是指touch事件的js代码么

      2018-07-10
      赞
      回复
    • Flowcy🐳
      Flowcy🐳
      2018-07-10回复妮子

      嗯，touch事件和touch事件如何进行切换video 的代码..

      2018-07-10
      赞
      回复
    • 妮子
      妮子
      2018-07-10回复Flowcy🐳
        //绑定事件---滑动
        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);
        }


      2018-07-10
      赞
      回复
    • Flowcy🐳
      Flowcy🐳
      2018-07-10回复妮子

      请问cover-view上绑定的哪个事件啊？

      不支持bindtouchmove

      另外videoheight反映在html里是改变的哪个值呢（页面的布局我也不太清楚）


      2018-07-10
      赞
      回复
    查看更多(14)
请 登录 后发表内容
相关文档