基于uniapp的非常简单的左滑操作,可以自行改为组件方式。
<template>
<view class="content">
<view class="slipe-item">
<view class="slipe-background" @tap="clickSlipe">view>
<view class="slipe-content" :class="{'transform-splipe': is_transfrom}" :style="(moveX!=0) ?'transform: translateX('+moveX+'px);' : ''" @touchmove="touchMove" @touchend="touchEnd" @touchstart="touchStart">
<image src="../../static/logo.png" mode="aspectFill" class="image-main">image>
<view class="title">滑我view>
view>
view>
view>
template>
<script>
export default {
data() {
return {
is_transfrom: false,//偏移样式显示
translateX: 0,//开始滑动的距离
moveX: 0,//移动距离
}
},
onLoad() {
},
methods: {
/**
* 移动中
*/
touchMove(e){
let moveX = (e.changedTouches[0].clientX - this.translateX)
//可自定义设置滑动偏移量,移除this.is_transfrom判定可进行右滑操作
if((moveX<-10&&moveX>-70)||(moveX>10&&moveX<70&&this.is_transfrom)){
this.moveX = moveX
}
},
/**
* 停止移动
*/
touchEnd(e){
//可自定义设置滑动偏移量
if(this.moveX<-40){
this.is_transfrom = true
}else if(this.moveX>40){
this.is_transfrom = false
}
this.moveX = 0
},
/**
* 开始移动
*/
touchStart(e){
this.translateX = e.changedTouches[0].clientX
},
/**
* 点击按钮事件
*/
clickSlipe(e){
console.log('我点击删除了')
},
}
}
script>
<style lang="scss">
page{
width: 100%;
background: #f5f5f5;
}
.content {
width: 100%;
.slipe-item{
position: relative;
width: 100%;
height: auto;
box-sizing: border-box;
background: #fff;
border-raduis: 20rpx;
overflow: hidden;
.slipe-background{
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
/* 可以设置为图片,也可设置文字 */
background: url('~@/static/delet.png') no-repeat right;
background-size: 50rpx 50rpx;
background-position: calc(100% - 30rpx) 50%;
}
.slipe-content{
position: relative;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
background: #fff;
padding: 20rpx;
.image-main{
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
margin-right: 20rpx;
}
.title{
font-size: 26rpx;
}
}
.transform-splipe{
/*可自定义设置滑动偏移量*/
transform: translateX(-140rpx) !important;
}
}
}
style>
0条评论