1.详情介绍

1. 图片可以使用网络图片，根据请求过来的图片来获取高度要控制滑动的位置
2. 可以换成视频，要实现滑动播放视频的效果，并且可以在上面添加一些其他的功能、
3. 白色背景区域可以展示对应的数据
4. 具体效果看文章末尾

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系列知识，点击关注博主