uniapp开发中 Swiper 和 scroll-view 一起使用

swiper 

是我们uniapp开发中常用的轮播图组件 

文档地址: swiper | uni-app官网

scroll-view

可滚动视图区域。用于区域滚动。

文档地址: scroll-view | uni-app官网

需求:

最近写项目的时候,有一个需求类似轮播视频,但是轮播的第二个 item 是一个可滑动展示的区域不再是轮播(其实整体就是轮播,只不过第二项变成了可滑动的)

这里就要用到上面说到的技术了

解答:

主要文件:

<template>
  <view class="videoList">
    <view class="swiper-box">
      <swiper
        class="swiper"
        :vertical="true"
        @change="changeplay"
        @touchstart="touchStart"
        @touchend="touchEnd"
      >
        <swiper-item>
          <Video ref="videoComponents" style="width: 100%; height: 100%" />
        </swiper-item>
        <swiper-item style="overflow: visible">
          <scroll-view :scroll-x="false" :scroll-y="true" class="scroll">
            <MoreCommodity />
            1
            <MoreCommodity />
            1
            <MoreCommodity />
            1
            <view class="consultant">
				<image class="img" src="https://ushop.tengs.com.cn/static/uploads/images/2023/02/10/167601645763e5fb4937618.jpg"/>
			</view>
            1
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import Video from "../components/video/index.vue";
import MoreCommodity from "../components/moreCommodity/index.vue";
var time = null;
export default {
  components: {
    Video,
    MoreCommodity,
  },
  name: "videoList",
  data() {
    return {
      pageStatrY: 0, // 手指开始点击的位置
      pageEndY: 0, // 手指结束的位置
      page: 0, // 当前是视频(索引 0 )还是更多数据 (索引 1)
    };
  },
  methods: {
    //上下滑动触发事件
    changeplay(res) {
      clearTimeout(time);
      this.page = res.detail.current;
      time = setTimeout(() => {
        // 当开始的位置小于结束的位置 向上滑动
        if (this.pageStatrY < this.pageEndY) {
          console.log("向上滑动");
          setTimeout(() => {
            this.$refs.videoComponents.player(); // 从头播放
          }, 20);
          this.$refs.videoComponents.pause(); // 暂停视频

          // this.$refs.videoComponents[this.page+1].pause() // 暂停视频
          this.pageStatrY = 0;
          this.pageEndY = 0;
        } else {
          // 否则 向下滑动
          console.log("向下滑动");
          // setTimeout(()=>{
          // 	this.$refs.videoComponents[this.page].player()
          // },20)

          this.$refs.videoComponents.pause(); // 暂停视频
          this.pageStatrY = 0;
          this.pageEndY = 0;
        }
      }, 1);
    },
    //获取向下滑动的值
    touchStart(res) {
      this.pageStatrY = res.changedTouches[0].pageY;
      console.log(this.pageStatrY);
    },
    //获取向上滑动的值
    touchEnd(res) {
      this.pageEndY = res.changedTouches[0].pageY;
      console.log(this.pageEndY);
    },
  },
};
</script>

<style>
.videoList {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}
.swiper-box {
  height: 100%;
  width: 100%;
}
.swiper {
  height: 100%;
  width: 100%;
}
.swiper-item {
  height: 100%;
  width: 100%;
  z-index: 19;
}
.title {
  color: #ffffff;
}
/deep/.listleftbox {
  z-index: 20;
  position: absolute;
  bottom: 50px;
  left: 10px;
}
/deep/.listrightbox {
  z-index: 20;
  position: absolute;
  bottom: 50px;
  right: 10px;
  color: #ffffff;
}
.scroll {
  height: 100%;
}
.consultant{
	width: 100%;
	height: 600rpx;
}
.img{
		width: 100%;
		height: 100%;
	}
</style>

视频组件

<template>
  <!-- 
		object-fit					三个参数: contain(包含) , fill(填充) , cover(覆盖)
		autoplay 					是否自动播放
		loop 						是否循环播放
		controls 					是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
		enable-progress-gesture 	是否开启控制进度的手势
		show-play-btn				是否显示视频底部控制栏的播放按钮
		show-fullscreen-btn			是否显示全屏按钮
		@timeupdate					播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
		
	 -->
  <view class="bg_box">
    <video
      id="myVideo"
      src="https://1308732891.vod2.myqcloud.com/fbfc16acvodcq1308732891/75232c95243791579398876798/iYxUtxfvZTEA.mp4"
      object-fit="fill"
      :autoplay="true"
      loop="false"
      :enable-progress-gesture="false"
      :show-play-btn="false"
      :show-fullscreen-btn="false"
      :controls="false"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoContext: null,
    };
  },
  mounted() {
    this.videoContext = uni.createVideoContext("myVideo", this);
  },
  methods: {
    pause() {
      this.videoContext.pause();
    },
    player() {
      this.videoContext.seek(0);
      this.videoContext.play();
    },
  },
};
</script>

<style lang="scss" scoped>
.bg_box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}
.bg_box video {
  width: 100%;
  height: 100%;
}
</style>

第二个item的商品组件

<template>
  <view class="box">
    <block v-for="item in 2" :key="item">
      <view class="content">
        <view class="content_img">
          <image class="img" src="../../../static/17611B10302L2.jpg" />
        </view>
        <view class="content_text"> 精品上衣 </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 2rpx solid #eee;
  padding: 20rpx;
  box-sizing: border-box;
  .content {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	border: 2rpx solid #eee;

    .content_img {
      width: 300rpx;
      height: 400rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>

看效果图: