- First look at html , which is divided into two parts, the main content part and the functional part. The functional part is positioned to the right of the main part in css
<view class="section" ref="box_center"
@touchstart="drawStart"
@touchmove="drawMove($event)"
@touchend="drawEnd($event)">
<view class="content">
<view class="setting">
这里放的是内容
</view>
</view>
<view class="function">
<view class="title">这里是功能</view>
<view class="edit flexCenter">编辑信息</view>
<view class="more flexCenter"><text>更多</text></view>
<view @click="restore()">收起</view>
</view>
</view>
- The logic part of the js code (note: when rendering multiple items of the same item, you need to add an index value to get the element this.$refs.box_center, and remember to bring the parameter when calling the method)
data() {
return {
clientX:0,
}
},
methods: {
// 开始触摸
drawStart(e) {
// 获取开始触摸时的位置
this.clientX = e.changedTouches[0].clientX
},
// 触摸过程
drawMove(e) {
//获取触摸过程中的结束位置
var endX = e.changedTouches[0].clientX;
//用结束位置-开始位置
let diff = endX - this.clientX
//如果diff小于0表示用户是左滑的
if (diff < 0) {
let box_center = this.$refs.box_center
//注意给个动画,小编在css上写过了,也可以在这里赋值
box_center.$el.style.left = '-110px'
}
},
// 结束触摸
drawEnd(e) {
var endX = e.changedTouches[0].clientX;
let diff = endX - this.clientX;
let box_center = this.$refs.box_center
// 防止误触 -- 给一个误差区间,防止用户误触
if (Math.abs(diff) > 20) {
if (diff < 0) {
box_center.$el.style.left = '-220rpx'
} else {
box_center.$el.style.left = '0'
}
}
},
// 点击恢复原来的位置
restore() {
let box_center = this.$refs.box_center
box_center.$el.style.left = '0'
},
}
- 3 finger touch events using uniapp
1. touchstart: triggered when the finger touches the screen
2. touchmove: refers to continuous triggering when sliding on the screen. During this event, calling the preventDefault() event can prevent scrolling.
3.touchend: Triggered when the finger leaves the screen
- renderings
-- first render
-- when swiping left
-- when swiping right
-- Click to close
- Finally, the sliding function of the app is realized
- The complete code is as follows: (The editor took the code from my own project. If it is useful to everyone, the css needs to be modified by myself!!)
<template>
<view>
<view class="section" ref="box_center"
@touchstart="drawStart"
@touchmove="drawMove($event)"
@touchend="drawEnd($event)">
<view class="content">
<view class="setting">
这里放的是内容
</view>
</view>
<view class="function">
<view class="title">这里是功能</view>
<view class="edit flexCenter">编辑信息</view>
<view class="more flexCenter"><text>更多</text></view>
<view @click="restore()">
收起
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
clientX:0,
}
},
methods: {
// 开始触摸
drawStart(e) {
// 获取开始触摸时的位置
this.clientX = e.changedTouches[0].clientX
},
// 触摸过程
drawMove(e) {
//获取触摸过程中的结束位置
var endX = e.changedTouches[0].clientX;
//用结束位置-开始位置
let diff = endX - this.clientX;
//如果diff小于0表示用户是左滑的
if (diff < 0) {
let box_center = this.$refs.box_center
//注意给个动画,小编在css上写过了,也可以在这里赋值
box_center.$el.style.left = '-110px'
}
},
// 结束触摸
drawEnd(e) {
var endX = e.changedTouches[0].clientX;
let diff = endX - this.clientX;
let box_center = this.$refs.box_center
// 防止误触 -- 给一个误差区间,防止用户误触
if (Math.abs(diff) > 20) {
if (diff < 0) {
box_center.$el.style.left = '-220rpx'
} else {
box_center.$el.style.left = '0'
}
}
},
// 点击恢复原来的位置
restore() {
let box_center = this.$refs.box_center
box_center.$el.style.left = '0'
},
}
}
</script>
<style scoped lang="scss">
.section {
min-height: 408rpx;
width: 100%;
margin-bottom: 16rpx;
position: relative;
min-height: 408rpx;
transition: all 0.5s linear;
box-shadow: 0 4rpx 8rpx rgba(67, 89, 201, 0.1);
left: 0;
.content {
width: 100%;
min-height: 408rpx;
background-color: #FFFFFF;
border-radius: 8rpx;
padding: 32rpx;
.setting {
width: 100%;
}
}
.function {
width: 204rpx;
height: 100%;
background-color: #fff;
border-radius: 8rpx;
position: absolute;
right: -220rpx;
top: 0;
padding: 8rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4rpx 8rpx rgba(67, 89, 201, 0.1);
align-items: center;
font-size: 24rpx;
margin-bottom: 16rpx;
text-align: center;
.title {
height: 80rpx;
line-height: 80rpx;
font-size: 28rpx;
color: #3B5BD2;
font-weight: bold;
text-align: center;
width: 100%;
border-bottom: 2rpx solid #E4E4E4;
}
.edit,
.more {
width: 152rpx;
height: 48rpx;
border-radius: 25rpx;
line-height: 48rpx;
color: #fff;
text {
display: block;
height: 100%;
width: 96rpx;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.edit,
.more {
background-color: #0B33FF;
margin: 10rpx auto 10rpx;
}
}
}
</style>