- 首先看html,分为两部分，主体内容部分和功能部分，功能部分在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>- js代码逻辑部分（注意：当渲染同一项多个时，获取元素this.$refs.box_center需要加索引值，调用方法时传参记得带上）
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'
},
}- 用到uniapp的3个手指触摸事件
1.touchstart：手指触摸屏幕时候触发
2.touchmove：指在屏幕上滑动的时候连续地触发，在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
3.touchend：手指从屏幕上离开的时候触发
- 效果图
-- 首次渲染
-- 左滑时
-- 右滑时
-- 点击收起
- 最终app的侧滑功能也就实现了
- 完整代码如下：（小编是从自己项目下摘下来的代码，如果对大家有用，css样子需要自己修改一下了!!）
<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>
