15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 uinapp

基于uniapp的简单基础的滑动删除操作

苗成龙| 发布于 2021-11-01 00:16:58| 738阅读| 0点赞| 0评论
举报

基于uniapp的非常简单的左滑操作,可以自行改为组件方式。

基于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

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

苗成龙
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部