uniapp 小程序实现抖音视频效果

效果图：

<template><view><view class="uni-padding-wrap"><view class="page-section swiper"><view class="page-section-spacing"><swiper class="swiper" @change="changefun" @animationfinish="animationfinishfun" :current="1" :circular="true":vertical="true"><swiper-item v-for="(item,index) in PayVideo"><view class="swiper-item uni-bg-red"><video :custom-cache="false" loop="true" class="video" :id="'id'+index" :enable-play-gesture="true":enable-progress-gesture="true" :controls="false" :src="item.video_path" :show-center-play-btn="false"></video></view></swiper-item></swiper></view></view></view><view v-if="is_active"><view class="left"><cover-view class="left_box"><cover-view class="ke"><cover-image src="../../static/video/4.png"></cover-image><cover-view> 我讲的Ps零基础教程</cover-view></cover-view><cover-view class="ren">@PS之光</cover-view><cover-view class="ke_context">PS水印去除技巧合集来了。技能我都给 出来了，下面就看你们自己发挥了。去 水印不求人啦~ </cover-view><cover-view class="auto"><cover-image src="../../static/video/10.png"></cover-image><cover-view> 光良 童话</cover-view></cover-view></cover-view></view><view class="right"><cover-view class="right_box  "><cover-view class="top1"><cover-image class="avatar_img" :src="PayVideo[index].avatar_url" mode=""></cover-image><cover-image class="add_img" src="../../static/video/1.png" mode=""></cover-image></cover-view><cover-view class="top2"><cover-image class="t_img" src="../../static/video/2.png" mode=""></cover-image><cover-view class="font_t">397</cover-view></cover-view><cover-view class="top2"><cover-image class="t_img" src="../../static/video/8.png" mode=""></cover-image><cover-view class="font_t">397</cover-view></cover-view><cover-view class="top2"><cover-image class="t_img" src="../../static/video/3.png" mode=""></cover-image><cover-view class="font_t">397</cover-view></cover-view><cover-view class="top2"><cover-image class="t_img" src="../../static/video/7.png" mode=""></cover-image><cover-view class="font_t">397</cover-view></cover-view></cover-view></view></view></view>
</template><script>export default {data() {return {data: [{"id": 16,"title": "","like_nums": 1,"user_id": 10004,"goods_id": 0,"nick_name": "测试3","avatar_url": "http://live.bjgs.top/default/avatar_url.png","islive": 0,"live_id": 0,"room_id": 0,"online_num": 0,"img_path": "http://live.bjgs.top/uploads/202006031018539ebae5959.png","video_path": "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461","distance": "1.8km"}, {"id": 38,"title": "清新的小女孩","like_nums": 0,"user_id": 10003,"goods_id": 0,"nick_name": "测试2","avatar_url": "http://live.bjgs.top/default/avatar_url.png","islive": 0,"live_id": 0,"room_id": 0,"online_num": 0,"img_path": "http://live.bjgs.top/uploads/20200604153424f43641439.jpg","video_path": "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851322674828.mp4?sign=185e46cba885c4303c7cf5f8658bea9b&t=1589851482","distance": "1.8km"}, {"id": 39,"title": "吴京","like_nums": 0,"user_id": 10050,"goods_id": 10020,"nick_name": "ee","avatar_url": "http://live.bjgs.top/default/avatar_url.png","islive": 0,"live_id": 0,"room_id": 0,"online_num": 0,"img_path": "http://live.bjgs.top/uploads/202006041707592f5593079.jpg","video_path": "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851312271309.mp4?sign=978660c42305ec67d4c3d603c2ae5a3d&t=1589851496","distance": "1.8km"}, {"id": 40,"title": "音乐","like_nums": 0,"user_id": 10002,"goods_id": 0,"nick_name": "测试1","avatar_url": "http://live.bjgs.top/default/avatar_url.png","islive": 0,"live_id": 0,"room_id": 0,"online_num": 0,"img_path": "http://live.bjgs.top/uploads/202006050905065d3a43812.jpg","video_path": "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851307588534.mp4?sign=43cf344e83089348eeeea38d26ba51bb&t=1589851514","distance": "1.8km"}, {"id": 41,"title": "好纠结","like_nums": 0,"user_id": 10002,"goods_id": 10073,"nick_name": "测试1","avatar_url": "http://live.bjgs.top/default/avatar_url.png","islive": 0,"live_id": 0,"room_id": 0,"online_num": 0,"img_path": "http://live.bjgs.top/uploads/20200605162614bad357185.jpg","video_path": "https://6e6f-normal-env-ta6pc-1300924598.tcb.qcloud.la/video-swiper/1589851354869410.mp4?sign=1f636557effa496e074332e3f4b9b8aa&t=1589851461","distance": "1.8km"}],index_: 1,index: '1',is_active: true,active: 2,PayVideo: [],current_i: 2,_arr: [],len: 0,}},computed: {},props: {ind: {type: Number,default: 0},},methods: {changefun(e) {this.is_active = falselet current = e.detail.currentlet {len,PayVideo,active,_arr,t,index_} = thisconsole.log(PayVideo, index_)let videoContext = uni.createVideoContext('id' + index_)videoContext.pause()this.PayVideo = PayVideo},animationfinishfun(e) {let {index_,len,PayVideo,active,_arr,t} = thislet current = e.detail.currentthis.is_active = truePayVideo[current]['istrue'] = truethis.PayVideo = PayVideolet videoContext = uni.createVideoContext('id' + index_)console.log(index_, 1555555555)videoContext.pause()videoContext = uni.createVideoContext('id' + current)videoContext.play()this.index_ = currentif (PayVideo.length == len) {return}this.PayVideo.push(_arr[active])this.active += 1}},mounted() {uni.setStorageSync('video', this.data);let ind = 1this.index = indconst video = uni.getStorageSync('video');const len = video.lengthlet b_arr = []let s_arr = []video.forEach((res, index) => {if (ind <= index) {b_arr.push(res)} else {s_arr.push(res)}})let _arr = b_arr.concat(s_arr.reverse())_arr = _arr.map(res => {res['istrue'] = falsereturn res})_arr[0]['istrue'] = trueconst PayVideo = [_arr[len - 1], _arr[0], _arr[1]]this.PayVideo = PayVideothis._arr = _arrthis.len = lenthis.$nextTick(function() {let videoContext = uni.createVideoContext('id1')videoContext.play()})}}
</script><style scoped lang="less">.circle {background: rgba(34, 34, 34, 0.4);border-radius: 50%;z-index: 2;height: 70px;width: 70px;position: fixed;top: 0;bottom: 441rpx;left: 31rpx;margin: auto;.red {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: 3;height: 35px;width: 35px;}}.swiper {height: 100vh;.swiper-item {height: 100vh;position: relative;}.uni-bg-red {background: red;}.uni-bg-green {background: green;}.uni-bg-blue {background: blue;}}.video {width: 100%;height: 100vh;position: relative;}.left_box {position: fixed;bottom: 60rpx;left: 24rpx;.ke_context {width: 516rpx;font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 1);word-break: break-all;word-wrap: break-word;white-space: pre-line;white-space: normal;text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}.ren {margin: 20rpx 0;font-size: 36rpx;font-family: PingFang SC;font-weight: bold;color: rgba(255, 255, 255, 1);text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}.auto {display: flex;align-items: center;width: 310rpx;height: 60rpx;margin-top: 24rpx;opacity: 1;border-radius: 8rpx;padding-left: 10rpx;cover-view {font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 1);line-height: 90px;text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}cover-image {margin-right: 10rpx;height: 28rpx;width: 26rpx;}}.ke {display: flex;align-items: center;width: 310rpx;height: 60rpx;background: rgba(0, 0, 0, 0.3);opacity: 1;border-radius: 8rpx;padding-left: 10rpx;cover-view {font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 1);line-height: 90px;text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);}cover-image {margin-right: 10rpx;height: 40rpx;width: 40rpx;}}}.H_T {z-index: 2;width: 100%;display: flex;box-sizing: border-box;position: absolute;padding: 0 30rpx;background: transparent;justify-content: space-between;.back {height: 48rpx;width: 48rpx;}.search {height: 48rpx;width: 48rpx;}}.right_box {width: 100rpx;position: absolute;z-index: 2;bottom: 60rpx;right: 12rpx;display: flex;flex-direction: column;.top1 {position: relative;height: 124rpx;.avatar_img {width: 98rpx;height: 98rpx;border-radius: 50%;}.add_img {position: absolute;z-index: 99;width: 48rpx;height: 48rpx;bottom: 10rpx;left: 0;right: 0;margin: 0 auto;}}.top2 {display: flex;flex-direction: column;align-items: center;margin-top: 37rpx;.t_img {height: 72rpx;width: 72rpx;margin-bottom: 10rpx;}.font_t {font-size: 26rpx;font-family: SF Pro Text;font-weight: 500;color: rgba(255, 255, 255, 1);text-shadow: 0px 1rpx 1rpx rgba(0, 0, 0, 0.4);text-align: center;}}}
</style>

转载于：https://ext.dcloud.net.cn/plugin?id=1980

uniapp 小程序实现抖音视频效果相关推荐

微信小程序实现抖音视频效果
当我们进行开发的时候可能会遇到需要实现抖音视频效果的需求,并且网上该效果的开源代码少,找到的开源代码代码量大,很难进行二次开发对此我将自己的代码进行简化,仅留下可动性高的代码模块以上是实现效果与此 ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
小程序类似抖音视频整屏切换
更新现在已经更新了github地址和效果gif,可在文章最后查看.如果我的代码对你有用,请帮我随手star一下. 需求最近在项目中需要加一个功能,在小程序中将已有的短视频功能,按照抖音的方式来浏览 ...
uniapp小程序仿抖音切换内容
前言: 1,思路和方法参考站里一位大佬,但是链接找不到了. 2,使用swiper实现,只渲染3个swiper-item,每次切换时计算前后的item内容. template: swiper的高度设置为 ...
微信小程序仿抖音视频--整屏上下切换功能
效果演示: WXML: <view class="video_box"><view bindtouchend="touchEnd" id=&q ...
android仿抖音上下切换视频,微信小程序仿抖音视频之整屏上下切换功能的实现代码...
Page({ /** * 页面的初始数据 */ data: { video_list:[ {video_src:}, {video_src:}, {video_src:}, {video_src:}, ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
小程序模仿抖音上下滑动视频
前景知识要实现小程序类似抖音上下滑动预览视频,就我了解的,方案可以分为两种 1.利用原生组件swiper(据说很卡,我也试过,好像是有点不流畅) 2.自己实现一个上下滑动效果(只需要监听一组事件,判 ...
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...

uniapp 小程序实现抖音视频效果

uniapp 小程序实现抖音视频效果相关推荐

最新文章

热门文章