npm install better-scroll --save
<template><divclass="mapLine"><!-- 时间--><divclass="time-content"
v-show="timeShowFlag":class="['left-content','animate__animated',
timeFold?'animate__slideInUp':'animate__slideOutDown',]"><divclass="time-scroll" ref="timeScroll"><divclass="time-box" ref="timebox"><divclass="time-item"
v-for="(item, index) in timeList"
@click="timeClickHandle(index)":key="item">{{ item}}</div></div></div><divclass="close-btn" @click="closeClickHandle('time')"><iclass="el-icon-d-arrow-left"></i></div></div><!--缩略图--><divclass="img-content"
v-show="imgShowFlag":class="['left-content','animate__animated',
imgFold?'animate__zoomIn animate__slideInLeft':'animate__zoomOut animate__slideOutLeft',]"><divclass="img-scroll" ref="imgScroll"><divclass="image-box" ref="imgBox"><el-imageclass="el-img"
draggable="false"
fit="cover"
@click="handleImgClick(index)"
v-for="(item, index) in imgList":key="index":src="item"/></div></div><divclass="close-btn" @click="closeClickHandle('img')"><iclass="el-icon-d-arrow-left"></i></div></div><!--大图--><el-image-viewer
v-if="showViewer":on-close="closeViewer":url-list="viewerImgList"/></div></template><script>import ElImageViewerfrom"element-ui/packages/image/src/image-viewer";import Bscrollfrom"better-scroll";exportdefault{
components:{
ElImageViewer,},data(){return{
timeShowFlag:true,
timeFold:true,
imgShowFlag:false,
imgFold:false,
scroll:"",
imagescroll:"",
showViewer:false,
viewerImgList:[],
imgList:[//图片],
viewerVideoList:[],
videoList:[//视频],
timeList:[2000,111,1112],};},mounted(){},destroyed(){this.timeShowFlag=false;this.imgShowFlag=false;},
watch:{timeShowFlag(val){// console.log(val);},},
methods:{// 点击图片 显示时间轴showHand(val){if(val){if(this.timeList.length==0){this.$message({
message:"暂无图片！",
type:"warning",});returnfalse;}this.$nextTick(()=>{this.timeScroll();});}else{this.imgShowFlag=false;}this.timeShowFlag= val;},// 点击按钮 显示时间轴 获取图片时间轴timeShowHandle(objectid){this.timeList=["http://120.221.72.79:9090/picture/around-sea/upload/picture/4ef5156d2edc4f24a75bbb8daa840927.jpeg","http://120.221.72.79:9090/picture/around-sea/upload/picture/b0b769fc6e4b4852b2a54716df577f86.jpeg"];this.timeFold=true;this.$nextTick(()=>{this.timeScroll();});},// 初始化时间轴横向滚动timeScroll(){// 默认有六个li子元素，每个子元素的宽度为120pxlet i=this.timeList.length;let width= i*97;this.$refs.timebox.style.width= width+"px";// this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染this.$nextTick(()=>{if(!this.scroll){this.scroll=newBscroll(this.$refs.timeScroll,{
startX:0,
click:true,
scrollX:true,// 忽略竖直方向的滚动
scrollY:false,
eventPassthrough:"vertical",});}else{this.scroll.refresh();this.$refs.timebox.style.transform="translateX(0px)";}});},// 初始化图片横向滚动imgScroll(){// 默认有六个li子元素，每个子元素的宽度为120pxlet i=this.imgList.length;let j=this.videoList.length;let width= i*112+ j*300;this.$refs.imgBox.style.width= width+"px";// this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染this.$nextTick(()=>{if(!this.imagescroll){this.imagescroll=newBscroll(this.$refs.imgScroll,{
startX:0,
click:true,
scrollX:true,// 忽略竖直方向的滚动
scrollY:false,
eventPassthrough:"vertical",});}else{this.imagescroll.refresh();this.$refs.imgBox.style.transform="translateX(0px)";}});},// 点击时间轴timeClickHandle(i){for(let i=0; i<12; i++){if(i%2==0){this.imgList.push("http://120.221.72.79:9090/picture/around-sea/upload/picture/4ef5156d2edc4f24a75bbb8daa840927.jpeg")}else{this.imgList.push("http://120.221.72.79:9090/picture/around-sea/upload/picture/b0b769fc6e4b4852b2a54716df577f86.jpeg")}}this.imgFold=true;this.imgShowFlag=true;this.$nextTick(()=>{this.imgScroll();});},// 点击图片handleImgClick(index){this.showViewer=true;let tempImgList=[...this.imgList];let temp=[];for(let i=0; i< index; i++){
temp.push(tempImgList.shift());}this.viewerImgList= tempImgList.concat(temp);},// 点击视频handleVideoClick(index){// this.showViewer = true;// let tempImgList = [...this.videoList];// let temp = [];// for (let i = 0; i < index; i++) {// temp.push(tempImgList.shift());// }// this.viewerVideoList = tempImgList.concat(temp);},// 放大图片 关闭事件closeViewer(){this.showViewer=false;},// 点击关闭按钮closeClickHandle(type){if(type=="time"){this.timeFold=false;}elseif(type=="img"){this.imgFold=false;}},},};</script><style lang="scss">.mapLine{
position: relative;
top:200px;-moz-user-select:-moz-none;-moz-user-select: none;-o-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;
user-select: none;// 时间轴.time-content{
display: flex;
align-items: center;
position: absolute;
bottom:16px;
left:120px;
max-width:82%;
z-index:100;.time-scroll{
flex:1;
overflow: scroll;&::-webkit-scrollbar{
display: none;/* Chrome Safari */}.time-box{
display: flex;
align-items: center;.time-item{
color: #ffffff;
width:85px;
white-space: nowrap;
background-color:rgba(3,12,56,0.78);
border: solid1px #3cddff;
margin:06px;
padding:4px8px;
cursor: pointer;}}}}.close-btn{
width:25px;
line-height:100px;
background-color:rgba(3,12,56,0.78);
border: solid1px #3cddff;
cursor: pointer;
text-align: center;
margin-left:4px;
i{
color: #3cddff;}}.time-content{.close-btn{
line-height:25px;
i{
color: #ffffff;
transform:rotate(-90deg);}}}// 图片.img-content{
position: absolute;
bottom:60px;
left:116px;
max-width:88%;
display: flex;
align-items: center;
z-index:1000;.img-scroll{
flex:1;
overflow: scroll;&::-webkit-scrollbar{
display: none;/* Chrome Safari */}.image-box{
display: flex;
align-items: center;.el-img{
width:100px;
height:100px;// border: solid 1px #3cddff;
margin:010px;
cursor: pointer;
box-shadow:1px1px2pxrgba(255,255,255,0.8);}
video{
width:290px;
margin:05px;
height:180px;}}}}.el-image-viewer__wrapper{
z-index:9999999!important;}}</style>