1.详情介绍
- 图片可以使用网络图片，根据请求过来的图片来获取高度要控制滑动的位置
- 可以换成视频，要实现滑动播放视频的效果，并且可以在上面添加一些其他的功能、
- 白色背景区域可以展示对应的数据
- 具体效果看文章末尾
2.编码介绍
template部分
<template>
<div class="share-code" ref="shares">
<div class="swiper" id="box" ref="dragBox" @transitionend="animateEnd" @touchstart="touchstartHandle('dragBox',$event)" @touchmove="touchmoveHandle('dragBox',$event)" @touchend="toucendveHandle('dragBox',$event)">
<div class="swipe-item swipe-item-1" :style="{height:imgHeight+'px'}" style="position: relative">
<div class="img-item img-item-1" style="height:100%">
<img ref="imgs" src="../../assets/haidao.png" alt="" @load='imgOnError'>
<!-- 可以换视频 -->
<!-- <video ref="videos" width="414" height="700" src=""></video> -->
</div>
<div class="list" v-show="pageY==0">
<div class="titles">链接</div>
<div class="titles back">链接</div>
</div>
<div class="icons" @click="topClick" v-show="pageY!=0 && pageY!=2">
<van-icon name="arrow-down" color="#fff" />
</div>
<div ref="bgs" class="img-item img-item-1" :style="{height:imgHeight / 2 +'px'}" style="transition:all 0.5s">
<img src="../../assets/haidao1.png" alt="">
</div>
</div>
<div class="swipe-item" style="position: relative; top: -39px;z-index: 100;">
<div class="img-item" :style="{height:imgHeight+'px'}">
<img src="../../assets/share-bg-9.png" alt="">
</div>
</div>
</div>
</div>
</template>
js部分
<script>
export default {
name: "ShareCode",
data() {
return {
showView: true,
pageY: 1,
startY: 0, // 手指开始触摸位置
moveY: 0, // 手指移动距离
flag: true,
imgHeight: 700, //默认高度
};
},
computed: {
translateY() {
// 计算图片ul当前距离
if (this.pageY == 0) {
return 0;
} else if (this.pageY == 1) {
return -(this.imgHeight / 2);
} else if (this.pageY == 2) {
return -550;
}
},
},
watch: {
pageY(newNum) {
if (newNum == 0) {
this.$refs.dragBox.style.transform = `translateY(0px)`;
// this.$refs.videos.play();
} else if (newNum == 1) {
this.$refs.dragBox.style.transform = `translateY(-${
this.imgHeight / 2
}px)`;
// this.$refs.videos.pause();
} else if (newNum == 2) {
this.$refs.dragBox.style.transform = `translateY(-550px)`;
// this.$refs.videos.pause();
}
},
},
methods: {
animateEnd() {
this.flag = true; // 打开节流阀
if (this.pageY == 0) {
this.$refs.bgs.style.opacity = 0;
} else if (this.pageY == 1) {
this.$refs.bgs.style.opacity = 1;
}
},
//开始拖动
touchstartHandle(refName, e) {
console.log(1);
// e.preventDefault();
this.startY = e.targetTouches[0].clientY;
},
//正在拖动
touchmoveHandle(refName, e) {
e.preventDefault();
// console.log(e.targetTouches[0].pageY);
// 手指开始移动
if (this.flag) {
this.moveY = e.targetTouches[0].clientY - this.startY; // 手指移动位置
if (
(this.moveY < 0 && this.pageY == 2) ||
(this.moveY > 0 && this.pageY == 0)
) {
return;
}
//根据滑动距离来实现渐变
if (this.pageY == 1 && this.moveY > 0) {
let opitey = 100 - this.moveY;
this.$refs.bgs.style.opacity = opitey / 100;
}
this.$refs.dragBox.style.transition = "none"; // 图片ul跟随手指移动
this.$refs.dragBox.style.transform = `translateY(${
this.translateY + this.moveY
}px)`;
}
},
//结束拖动
toucendveHandle(refName, e) {
// 结束触摸
if (this.flag) {
if (this.moveY > 80) {
// 移动距离大于80，图片索引--
if (this.pageY == 0) {
return;
}
this.pageY--;
} else if (this.moveY < -80) {
this.$refs.bgs.style.opacity = 1;
// 移动距离小于-80，图片索引++
if (this.pageY == 2) {
this.$refs.bgs.style.opacity = 1;
return;
}
this.pageY++;
}
this.$refs.dragBox.style.transition = "all .5s"; // 展示当前索引图片
this.$refs.dragBox.style.transform = `translateY(${
this.translateY}px)`;
}
},
imgOnError(e) {
//网络图片可动态计算高度给滑动距离进行调整
console.log(this.$refs.imgs.height);
this.imgHeight = this.$refs.imgs.height;
初始化默认位置;
this.$refs.dragBox.style.transform = `translateY(-${
this.imgHeight / 2
}px)`;
},
// 点击按钮下拉
topClick() {
this.pageY = 0;
},
},
};
</script>
css部分
<style scoped>
.share-code {
height: 100vh;
overflow-y: scroll;
}
.list {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 7%;
z-index: 101;
transition: all 1s;
}
.icons {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 3%;
z-index: 101;
width: 55px;
height: 30px;
background: rgba(0, 0, 0, 0.5);
border-radius: 30px;
line-height: 30px;
text-align: center;
transition: all 1s;
}
.list .titles {
width: 143px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 20px;
border: 1px solid #ffffff;
color: #fff;
font-size: 16px;
}
.list .titles:last-child {
margin-top: 13px;
background: rgba(0, 0, 0, 0.2);
border: none;
}
.imgs {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.img-item {
width: 100vw;
height: 100%;
}
.img-item img {
width: 100%;
height: 100%;
}
.swiper {
position: relative;
/* top: -13.33vw; */
top: 0;
left: 0;
}
.img-item-1 {
width: 100%;
/* height: 350px; */
position: absolute;
bottom: 0;
background: #333333;
}
.swipe-item-1 {
position: relative;
height: 700px;
}
</style>
效果展示图
本篇文章就介绍到这里，如果想要学习更多vue系列知识，点击关注博主
