用易语言做网站,计算机前端和后端,重庆专业的网站建设公司,上海房产网官网文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点#xff08;本文章不写#xff0c;只写核心代码#xff09; 1. 实现效果 2. 精简版核心代码
使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现
templatediv :style{width: width px,overflo… 文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点本文章不写只写核心代码 1. 实现效果 2. 精简版核心代码
使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现
templatediv :style{width: width px,overflow: hidden,} classcontainervan-swipe :looptrue vertical :heightheight :widthwidth :show-indicatorsfalse changeonChange:style{ height: height px }van-swipe-item v-for(item, index) in videoList :keyindex classswiper-slide-itemdiv clickonVideoClick(item, index) z-index1 classswiperItemVideovideo classvideoPlayer :idvideoPlayer_ index refplayer :keyindex :posteritem.poster:srcitem.src :widthwidth autoplay :mutedmuteding loop x5-video-player-typeh5webkit-playsinlinetrue x-webkit-airplaytrue x5-video-orientationportraintplaysInlinetrue x5-video-player-fullscreenportraint x5-video-ignore-metadatatrue/videovan-image v-if!playing classplay w-[40px] h-[40px] :srcgetAssetsFile(icon/play.png) //divShortsBottom refbottomRef :itemitem //van-swipe-item/van-swipe/div
/template
script setup langts nameSetting
import {getAssetsFile
} from /utils/tool
const player ref(null);
const currentIndex ref(0);
const playing ref(true);
const muteding ref(true)
const width ref(window.innerWidth);
const height ref(window.innerHeight);
let bottomRef ref(null)
let bottomHeight ref(0);
const currentVideoInfo ref({videoId: ,
});/*** 切换视频*/
const onChange (index) {console.log(index, index)currentVideoInfo.value {videoId: };const preVideoId videoPlayer_ currentIndex.value;const preVideo: any document.getElementById(preVideoId);if (preVideo) preVideo.pause();const nextVideoId videoPlayer_ index;const nextVideo: any document.getElementById(nextVideoId);if (nextVideo) nextVideo.play();currentIndex.value index;player.value nextVideo;playing.value trueif (index videoList.length - 1) {console.log(没有更多了)}
};
/*** 播放|暂停*/
const onVideoClick (item, index) {const video: any document.getElementById(videoPlayer_ index);if (video playing.value) {video.pause();playing.value false;} else {video.play();playing.value true;}
};onMounted(() {if (bottomRef.value) {console.log(bottomRef.value[0].bottomHeight, 1)bottomHeight.value bottomRef.value[0].bottomHeight}const index currentIndex.value;const videos: any document.querySelectorAll(video);for (const video of videos) {let videoId videoPlayer_ index;if (video video.id video.id ! videoId) {video.pause();} else {player.value video;}}
});onBeforeUnmount(() {const videos: any document.querySelectorAll(video);for (const video of videos) {if (video video.id) {video.pause();}}
});/*** 短视频列表*/
const videoList [{videoId: Date.now() 1,title: 抖音美女主播JK超短裙学生妆美女跳舞展示爱了爱了。,poster: http://img01.sogoucdn.com/app/a/201023/27e5400e26fbef1ea32f9aff60c0b015,src: https://txmov2.a.yximgs.com/upic/2020/11/08/19/BMjAyMDExMDgxOTQxNTlfNTIzNDczMzQ0XzM4OTQ1MDk5MTI4XzFfMw_b_Bc770a92f0cf153407d60a2eddffeae2a.mp4,uploadTime: 2023-11-08 19:41,ipLocation: 上海,author: {authorId: 101,avatar: https://i02piccdn.sogoucdn.com/4f85fc70df81d04a,nickName: 陌路,genderName: 男}
},
{videoId: Date.now() 2,title: 御姐美女抖音作品来个自拍视频把好美啊。,poster: http://img02.sogoucdn.com/app/a/201023/0866f6a339e58d647eb476f72045e980,src: https://txmov2.a.yximgs.com/upic/2020/10/02/09/BMjAyMDEwMDIwOTAwMDlfMTIyMjc0NTk0Ml8zNjk3Mjg0NjcxOF8xXzM_b_B28a4518e86e2cf6155a6c1fc9cf79c6d.mp4,uploadTime: 2023-10-02 09:41,ipLocation: 贵州,author: {authorId: 102,avatar: http://img02.sogoucdn.com/app/a/201023/0866f6a339e58d647eb476f72045e980,nickName: 御姐呀,genderName: 女}
},
{videoId: Date.now() 3,title: 抖音主播可爱妹子新学的舞蹈超可爱的美女主播。,poster: https://i02piccdn.sogoucdn.com/2acf176d90718d73,src: https://txmov6.a.yximgs.com/upic/2020/08/23/00/BMjAyMDA4MjMwMDMyNDRfMTYzMzY5MDA0XzM0ODI4MDcyMzQ5XzFfMw_b_B9a1c9d4e3a090bb2815994d7f33a906a.mp4,uploadTime: 2023-08-23 00:41,ipLocation: 广州,author: {authorId: 103,avatar: https://i02piccdn.sogoucdn.com/2acf176d90718d73,nickName: 野花猫,genderName: 女}
},
{videoId: Date.now() 4,title: 多个美女带着遮阳帽出去散步自拍视频好好看。,poster: https://i02piccdn.sogoucdn.com/45c34c84c106bbb7,src: https://alimov2.a.yximgs.com/upic/2020/07/02/14/BMjAyMDA3MDIxNDUyMDlfOTExMjIyMjRfMzE1OTEwNjAxNTRfMV8z_b_Bf3005d42ce9c01c0687147428c28d7e6.mp4,uploadTime: 2023-07-02 14:41,ipLocation: 山西,author: {authorId: 104,avatar: https://i02piccdn.sogoucdn.com/45c34c84c106bbb7,nickName: 蓝姬,genderName: 女}
},
];
/script
style langless scoped
.container {display: flex;flex-direction: column;overflow: hidden;.swiper-wrapper {flex: 1;}.swiper-slide-item {display: flex;flex-direction: column;width: 100%;.swiperItemVideo {z-index: 1;flex: 1;overflow-y: auto;width: 100%;position: relative;.play {position: absolute;z-index: 2;content: ;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: move 0.3s linear alternate;}}.videoPlayer {background: #000;height: 100%;z-index: 2;}}
}keyframes move {0% {transform: translate(-50%, -50%) scale(2);opacity: 0;}100% {transform: translate(-50%, -50%) scale(1);opacity: 1;}
}
/styleShortsBottom 组件代码
templatediv classvideoInfo refbottomRefdiv classtop mb-[8px]van-image classlogo w-[40px] h-[40px] mr-[8px] round :srcgetAssetsFile(logo.png) /span classnickName mr-[12px]{{ item.author.nickName }}/spandiv classbtn-content clickFollowvan-button typeprimary sizesmall classbtnFollow/van-button/divdiv classcloseSoundvan-image classlogo w-[16px] h-[16px] :srcgetAssetsFile(icon/closeSound.png) //div/divvan-text-ellipsis classtitle :contentitem.title //div
/template
script setup langtsimport { ref, onMounted } from vue;import { getAssetsFile } from /utils/toolinterface Props {item : any;}const props withDefaults(definePropsProps(), {item: {},});let bottomRef ref(null)let bottomHeight ref(0)const Follow (){console.log(关注)}onMounted(() {if (bottomRef.value) {bottomHeight.value bottomRef.value.offsetHeight}});defineExpose({ bottomHeight })//暴露子组件的方法或者数据
/scriptstyle langless scoped.videoInfo {background: #161616;color: #f5f5f5;padding: 16px 20px 34px 16px;text-align: left;position: relative;::after {position: absolute;display: block;content: ;bottom: 0px;left: 0;width: 100%;height: 0px;background: red;z-index: 1;}.top {display: flex;justify-content: flex-start;align-items: center;.nickName {font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;font-weight: 700;font-size: 14px;color: #FFFFFF;line-height: 14px;}.closeSound {margin-left: auto;width: 32px;height: 32px;padding: 8px;border-radius: 50%;background: rgba(255, 255, 255, 0.1);}}.title {font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;font-weight: 400;font-size: 14px;color: #FFFFFF;line-height: 14px;}}
/style3. 完整功能点本文章不写只写核心代码
视频点赞视频分享视频用户基础信息视频暂停/播放视频声音控制上下切换视频视频封面图设置
