uni-app对接抖音激励视频

文章开始之前先附上两个链接,对接前一定要看官方文档!
uni-app对接激励视频
抖音对接激励视频文档
在对接之前只要认真阅读文档,相信没有太大问题。这个对接相应来说还是比较简单的。首先分享两个在对接时遇到的尴尬问题。
1:在开发者工具上是无法显示激励视频的,在调用uni-app激励视频API时是undefind报错等,在真机测试是没有问题的。
2:在对接完毕之后千万不要玩了调用.show()去显示视频,因为视频在引入后默认是隐藏的。(刚开始不知情的我还以为是代码写的有问题,大家在开发的时候一定要注意)
下面废话不多说直接上代码
1:首先可以在data中定义一个数据然后将API赋值给他方便下边的操作。例如我在data中定义的数据字段名为rewardedVideoAd
在onLoad()中我就将其赋值

this.rewardedVideoAd = uni.createRewardedVideoAd({
    adUnitId: '你的对接ID' }
要实现仿视频滑动效果,你可以使用uni-app框架中的swiper组件结合相关的动画效果来实现。下面是一种可能的实现方式: 1. 在你的uni-app项目中,使用swiper组件创建一个滑动容器,设置为横向滑动。 ```html <swiper class="swiper" :autoplay="false" :indicator-dots="false" :circular="true"> <swiper-item v-for="(item, index) in videoList" :key="index"> <video :src="item.url" autoplay muted loop></video> </swiper-item> </swiper> ``` 2. 使用css样式来设置容器的布局和样式。 ```css .swiper { width: 100%; height: 100%; overflow: hidden; } .swiper-item { width: 100%; height: 100%; } video { width: 100%; height: 100%; object-fit: cover; } ``` 3. 使用JavaScript或者Vue的生命周期钩子函数来监听滑动事件,并根据滑动的距离和方向来实现动画效果。 ```javascript export default { data() { return { videoList: [...], // 视频列表数据 startX: 0, // 触摸起始点的X坐标 startY: 0, // 触摸起始点的Y坐标 moveX: 0, // 触摸移动中的X坐标 moveY: 0, // 触摸移动中的Y坐标 direction: '', // 滑动方向 currentIndex: 0 // 当前显示的视频索引 }; }, methods: { onTouchStart(e) { this.startX = e.changedTouches[0].pageX; this.startY = e.changedTouches[0].pageY; }, onTouchMove(e) { this.moveX = e.changedTouches[0].pageX; this.moveY = e.changedTouches[0].pageY; const offsetX = this.moveX - this.startX; const offsetY = this.moveY - this.startY; if (Math.abs(offsetY) < Math.abs(offsetX)) { // 水平滑动 if (offsetX > 0) { this.direction = 'right'; } else { this.direction = 'left'; } } else { // 垂直滑动 if (offsetY > 0) { this.direction = 'down'; } else { this.direction = 'up'; } } }, onTouchEnd() { if (this.direction === 'left') { // 向左滑动,切换到下一个视频 this.currentIndex++; if (this.currentIndex >= this.videoList.length) { this.currentIndex = 0; } } else if (this.direction === 'right') { // 向右滑动,切换到上一个视频 this.currentIndex--; if (this.currentIndex < 0) { this.currentIndex = this.videoList.length - 1; } } // 根据currentIndex更新swiper组件的activeIndex属性,实现视图切换 this.$refs.swiper.swiperRef.setActiveItem(this.currentIndex); } } }; ``` 上述代码中,通过监听触摸事件,根据滑动方向切换到对应的视频,并将视图更新到当前的视频。 这是一种简单的实现方式,你可以根据自己的需求进行扩展和优化。希望对你有帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值