时间问题把两个内容集合到一块了来个总结
- 先来个动图效果,如果觉得有用再继续看代码
注:图上的绿色方块内的线条即为canvas绘制
代码如下
<template>
<view>
<view :class="[box,width,height]" :style="{translate:`${translateX} ${translateY}`}"
@touchstart="handleTouchStart" @touchmove="handleTouchMove">
<view class="sky">
</view>
<view class="water">
</view>
<span class="fold" @click="show" v-show="floatingShow">
<img src="/rightArrows.svg" alt="" style="width: 100%;height: 100%;">
</span>
<span class="close" @click='hiden' v-show="floatingHiden">
<img src="/leftArrows.svg" alt="" style="width: 100%;height: 100%;">
</span>
<span class="rope">
<canvas canvas-id="myCanvas"
style="width:100%;height:100%;background-color: aquamarine;z-index: 2;"></canvas>
</span>
</view>
</view>
</template>
<script>
export default {
data() {
return {
startX: 0,
startY: 0,
deltaX: 0,
deltaY: 230,
maxX: 0, // 可视窗口的最大X值
maxY: 0, // 可视窗口的最大Y值
width: "150px",
height: "200px",
};
},
computed: {
translateX() {
return this.deltaX + 'px'
},
translateY() {
return this.deltaY + 'px'
},
},
watch: {
boxHidenAndShow(newValue, oldValue) {
console.log(newValue, "这个是监听的值")
if (!newValue) {
this.deltaX = 0
this.deltaY = 230
}
}
},
mounted() {
const {
windowWidth,
windowHeight
} = uni.getSystemInfoSync()
this.maxX = windowWidth - 150; // 200是元素的宽度
this.maxY = windowHeight - 200; // 200是元素的高度
console.log(this.maxX, this.maxY, "初始化获取设备视窗信息")
},
methods: {
handleTouchStart(event) {
// console.log(event, "这个是刚开始触发的")
const {
clientX,
clientY
} = event.touches[0];
this.startX = clientX;
this.startY = clientY;
},
handleTouchMove(event) {
if (this.boxHidenAndShow) {
const {
clientX,
clientY
} = event.touches[0];
if (this.translateX.slice(0, -2) < 0) {
return
}
let newDeltaX = this.deltaX + clientX - this.startX;
let newDeltaY = this.deltaY + clientY - this.startY;
if (newDeltaX < 0) {
newDeltaX = 0;
} else if (newDeltaX > this.maxX) {
newDeltaX = this.maxX;
}
if (newDeltaY < 0) {
newDeltaY = 0;
} else if (newDeltaY > this.maxY) {
newDeltaY = this.maxY;
}
this.deltaX = newDeltaX;
this.deltaY = newDeltaY;
this.startX = clientX;
this.startY = clientY;
}
},
show() {
this.initCanvas()
},
initCanvas() {
console.log("实现canvas")
const context = uni.createCanvasContext('myCanvas',this);//子组件创建实例时候记得在这里加上this哦
console.log(context, "这个是创建的")
context.setStrokeStyle('#000000'); // 设置线条颜色
context.setLineWidth(2); // 设置线条宽度
context.beginPath(); // 开始绘制路径
context.moveTo(10, 0); // 起点坐标
context.lineTo(10, 115); // 终点坐标
context.stroke(); // 绘制线条
context.draw()
}
},
}
</script>
<style lang="scss">
.box {
width: 20px;
height: 100px;
// width:150px;
// height: 200px;
background-color: white;
border-radius: 18rpx;
// position: absolute;
word-wrap: break-word;
transition: width 1s linear 0s;
transition: height 1s linear 0s;
}
// .boxHiden{
// width:20px;
// height: 200px;
// }
.sky {
// width: 150px;
height: 50%;
overflow: hidden;
}
.water {
width: 100%;
height: 30%;
margin-top: 26%;
border-radius: 0 0 18rpx 18rpx;
background-color: rgb(159, 206, 255);
}
.fold {
// display: block;
position: fixed;
z-index: 999;
top: 0px;
height: 100px;
width: 20px;
border-radius: 0 18rpx 18rpx 0;
background-color: rgb(153, 154, 154);
}
.hidenWidth {
width: 20px;
}
.hidenHeight {
height: 100px;
}
.showWidth {
width: 150px;
}
.showHeight {
height: 200px;
}
.close {
position: fixed;
top: 50px;
left: 130px;
width: 20px;
height: 100px;
background-color: black;
// text-align: center;
// line-height: 30px;
width: 20;
border-radius: 18rpx 0 0 18rpx;
// overflow: hidden;
}
.rope {
position: fixed;
top: 50px;
width: 20px;
height: 120px;
left: 66px;
overflow: hidden;
background-color: hotpink;
text-align: center;
}
</style>
如有疑问请私信以及评论区联系