多平台统一管理软件接口,如何实现多平台统一管理软件接口
303
2023-03-11
基于vue2实现左滑删除功能
左滑删除,很多UI框架里有,比如Mint-UI, Muse-UI等,一开始我们就是用的这两个,但是我们需求是要:左滑的时候出现img然后来实现点击删除,如下:
因为用UI框架,还得改底层代码= =所以,我们小组就直接写了一个- -,心累……此组件多地方使用,所以建议还是放到common下。。
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
:style="txtStyle">
export default {
props: {
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
// 滑动http://过程中实时计算滑动距离
this.disX = this.startX - this.moveX;
// console.log('disX==>',this.disX)
// 如果是向右滑动或者只是点击,不改变滑动位置
if(this.disX < 0 || this.disX == 0) {
// console.log('没有移动');
this.txtStyle = "transform:trhttp://anslateX(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);
}
}
}
.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;
}
然后哪个页面需要,哪个页面引入就好。比如myCollect页面需要,那么如下:
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',
props: {
item: Object,
index: Number
},
components: {
Financial,
LeftSlider
},
data() {
return {
}
},
created() {
this.getCollectionList();
},
methods: {
},
computed: {
...mapGetters([
'getContextPathSrc',
'sessionId',
'token'
]),
},
methods: {
// 删除
deleteItem: function(index) {
api.commonApi('后台接口,请求数据')//此处api是封装的axios,详情看文章:vue2+vuex+axios即可
.then(res => {
console.debug("REQ_ADD_STORE.res.data.result -> " + res.data.result);
this.collectionList.splice(index, 1);
});
}
},
mounted() {
}
}
然后就完成了。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~