欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
天津小程序开发_基于vue2完成左滑删除功用
时间: 2021-01-11 11:36 浏览次数:
根据vue2完成左划删掉作用 本文关键为大伙儿详尽详细介绍了根据vue2完成左划删掉作用,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下左划删掉,许多UI架构里有
基于vue2实现左滑删除功能       这篇文章主要为大家详细介绍了基于vue2实现左滑删除功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

左滑删除,很多UI框架里有,比如Mint-UI, Muse-UI等,一开始我们就是用的这两个,但是我们需求是要:左滑的时候出现img然后来实现点击删除,如下:

因为用UI框架,还得改底层代码= =所以,我们小组就直接写了一个- -,心累……mon下。。

 template 
 div 
 div @touchstart="_touchStart"
 @touchmove="_touchMove"
 @touchend="_touchEnd"
 slot /slot 
 /div 
 div : @click.prevent="deleteItem(index)" /div 
 /div 
 /template 
 script 
 export default {
 pro凡科抠图: {
 index: Number
 data() {
 return {
 startX: 0, //触摸位置
 moveX: 0, //滑动时的位置
 disX: 0, //移动距离
 txtStyle: '',
 delWidth: 200,
 top: '',
 zIndex: 'z-index:-1',
 methods: {
 _touchStart: function(ev) {
 ev = ev || event;
 if(ev.touches.length == 1){
 // 手指按下的时候记录按下的位置
 this.startX = ev.touches[0].clientX;
 console.log(this.startX)
 _touchMove: function(ev) {
 ev = ev || event;
 if(ev.touches.length == 1) {
 // 滑动过程中的实时位置
 this.moveX = ev.touches[0].clientX
 // 滑动过程中实时计算滑动距离
 this.disX = this.startX - this.moveX;
 // console.log('disX== ',this.disX)
 // 如果是向右滑动或者只是点击,不改变滑动位置
 if(this.disX 0 || this.disX == 0) {
 // console.log('没有移动');
 this.txtStyle = "transform:translateX(0rem)";
 }else if (this.disX 0) {
如果是向左滑动,则实时给这个根元素一个向左的偏移-left,当偏移量到达固定值delWidth时,固定元素的偏移量为 delWidth
 this.txtStyle = "transform:translateX(-" + this.disX/100 + "rem)";
 if (this.disX = this.delWidth/100) {
 this.txtStyle = "transform:translateX(-" + this.delWidth/100 + "rem)";
 this.zIndex = "z-index:" + 10 + "rem";
 _touchEnd: function(ev) {
 if (event.changedTouches.length == 1) {
 this.startX = 0;
 this.zIndex = "z-index:" + -1 + "rem";
 console.log(event.changedTouches[0].clientX)
 // 手指移动结束后的水平位置
 let endX = event.changedTouches[0].clientX;
 // 触摸开始与结束,手指移动的距离
 this.disX = this.startX - endX;
 //如果距离小于删除按钮的1/2,不显示删除按钮
 deleteItem: function(index) {
 this.$emit('deleteItem', index);
 /script 
 style 
 .left-delete{
 width:100%;
 height:100%;
 position:relative;
 z-index:2;
 .move{
 position: relative;
 .deleteIcon{
 width: 2rem;
 height:100%;
 position: absolute;
 right:0;
 top:0;
 background:url(./../../assets/main/4.png) no-repeat;
 background-size: contain;
 /style 

然后哪个页面需要,哪个页面引入就好。比如myCollect页面需要,那么如下:

 template 
 section 
 section 
 div v-for="(item,index) in collectionList" 
 left-slider :index="index" @deleteItem="deleteItem" 
 Financial :item="item" :index="index" /Financial 
 /left-slider 
 /div 
 /section 
 /section 
 /template 
 script 
 import api from './../../fetch/api';
 import { mapGetters } from 'vuex';
 import Financial from './../common/financial.vue';
 import LeftSlider from './../common/leftSlider.vue';
 export default {
 name: 'MyCollect',
 pro凡科抠图: {
 item: Object,
 index: Number
 components: {
 Financial,
 LeftSlider
 data() {
 return {
 created() {
 this.getCollectionList();
 methods: {
 computed: {
 ...mapGetters([
 'getContextPathSrc',
 'sessionId',
 'token'
 methods: {
 // 删除
 deleteItem: function(index) {
 monApi('后台接口,请求数据')//此处api是封装的axios,详情看文章:vue2+vuex+axios即可
 .then(res = {
 console.debug("REQ_ADD_STORE.res.data.result - " + res.data.result);
 this.collectionList.splice(index, 1);
 mounted() {
 /script 

然后就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园