- まず html を見てみましょう、これはメインコンテンツ部分と機能部分の 2 つの部分に分かれており、機能部分は 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: 指が画面から離れるとトリガーされます。
- レンダリング
-- 最初のレンダリング
-- 左にスワイプした場合
-- 右にスワイプした場合
-- クリックして閉じます
- ついにアプリのスライド機能が実現
- 完全なコードは次のとおりです: (エディターは私自身のプロジェクトからコードを取得しました。それが誰にとっても役立つ場合は、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>