html
<movable-view direction="horizontal" class="moveItem" :x="item.x" @touchstart="touchstart($event)"
@touchend="touchend($event, item, index)">
<view class="left">
<img :src="item.thumb" alt="" class="msgIcon" />
</view>
<view class="middle">
<view class="middleTop">
<view class="title">
{{ item.title }}
</view>
<view class="time">
{{ item.rightText }}
</view>
</view>
<view class="middleBottom">
{{ item.note }}
</view>
</view>
<view class="right">
<view class="toTop" @click.stop="goTop(item, index)">
<text class="text">置顶</text>
</view>
<view class="remove" @click.stop="goRemove(item.id, index)">
<text class="text">删除</text>
</view>
</view>
</movable-view>
</movable-area>script
export default {
data() {
return {
animation: true,
startX: null,
startY: null,
keyword: "",
options: [{
text: "置顶",
style: {
backgroundColor: "#3c9cff",
},
},
{
text: "删除",
style: {
backgroundColor: "#f56c6c",
},
},
],
msgList: [{
id: 0,
title: "审批",
note: "待办任务提醒：您有一条来自财务会计部采购部李宁远的订单",
thumb: "/static/img/fang@2x.png",
rightText: "2022/3/1",
badgeText: "12",
x: 0,
old: {
x: 0.1,
},
},
{
id: 1,
title: "附件夹",
note: "待办任务提醒：您有一条来自财务会计部采购部李宁远的待审批订单",
thumb: "/static/img/xiang@2x.png",
rightText: "2022/3/2",
badgeText: "1",
x: 0,
old: {
x: 0.1,
},
},
{
id: 2,
title: "尽调",
note: "您的收到一条拍卖消息",
thumb: "/static/img/tong@2x.png",
rightText: "2022/3/3",
x: 0,
old: {
x: 0.1,
},
},
{
id: 3,
title: "审批证照章",
note: "您的收到一条私息",
thumb: "/static/img/baojia@2x.png",
rightText: "2022/3/4",
x: 0,
old: {
x: 0.1,
},
},
{
id: 4,
title: "资产公示",
note: "您的收到一条私息",
thumb: "/static/img/tui@2x.png",
rightText: "2022/3/5",
x: 0,
old: {
x: 0.1,
},
},
{
id: 5,
title: "转让通知",
note: "您的收到一条私息",
thumb: "/static/img/zichan@2x.png",
rightText: "2022/3/6",
x: 0,
old: {
x: 0.1,
},
},
{
id: 6,
title: "系统提醒",
note: "您的收到一条私息",
thumb: "/static/img/fang@2x.png",
rightText: "2022/3/7",
x: 0,
old: {
x: 0.1,
},
},
{
id: 7,
title: "系统提醒",
note: "您的收到一条私息",
thumb: "/static/img/fang@2x.png",
rightText: "2022/3/8",
x: 0,
old: {
x: 0.1,
},
}
],
};
},
methods: {
touchstart(e) {
// 保存按下的x距离
e.preventDefault();
this.startX = e.touches[0].pageX;
this.startY = e.touches[0].pageY;
},
touchend(e, item, index) {
let endX = e.changedTouches[0].pageX;
let endY = e.changedTouches[0].pageY;
let X = endX - this.startX;
let Y = endY - this.startY;
// console.log(X, Y);
// 左滑
if (Math.abs(X) > Math.abs(Y) && X < 0) {
if (endX - this.startX <= -84) {
this.$nextTick(() => {
item.x = -145;
// 关闭其他滑动
this.msgList.forEach((v, i) => (i != index ? (v.x = 0) : ""));
});
// 左滑未超过蓝色置顶按钮，隐藏两个按钮
} else {
this.$nextTick(() => (item.x = item.x == 0 ? 0.01 : 0));
}
} else if (Math.abs(X) > Math.abs(Y) && X > 0) //右滑
{
if (endX - this.startX >= 60) {
this.$nextTick(() => (item.x = item.x == 0 ? 0.01 : 0));
// 右滑未超过红色删除按钮，显示两个按钮
} else {
this.$nextTick(() => (item.x = item.x == -145 ? -145.01 : -145));
}
}else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
// console.log('上下');
} else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
// console.log('下上');
} else {
// console.log('点击');
}
},
//信息置顶方法
goTop(item, index) {
// 根据数组下标判断当前数据是否已置顶，如果是给出弹窗提示
if (index == 0) {
uni.showToast({
icon: "none", // success / none / loading 3个有效参数
title: "已经置顶啦~",
duration: 2000,
});
this.$nextTick(()=>{
console.log(item.x);
item.x = item.old.x
console.log(item.x);
item.x = 0
console.log(item.x);
// item.x = item.x == 0 ? 0.1 : 0;
})
return;
}
//被置顶的隐藏左滑
this.$nextTick(() => {
console.log(item.x);
item.x = item.old.x
console.log(item.x);
item.x = 0
console.log(item.x);
// item.x = item.x == 0 ? 0.1 : 0;
let newList = this.msgList;
//置顶后让页面滚动到最上边，api框架不支持
// setTimeout(() => {
// uni.pageScrollTo({scrollTop: 0});
// }, 10);
//置顶操作，将当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
newList.unshift(newList[index]);
newList.splice(index + 1, 1);
this.msgList = newList;
// setTimeout(() => {
// //将原数组复制一份操作
// let newList = this.msgList;
// //置顶后让页面滚动到最上边，api框架不支持
// // setTimeout(() => {
// // uni.pageScrollTo({scrollTop: 0});
// // }, 10);
// //置顶操作，将当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
// newList.unshift(newList[index]);
// newList.splice(index + 1, 1);
// this.msgList = newList;
// }, 200);
});
},
goRemove(id, index) {
console.log("点击了删除");
uni.showModal({
title: "温馨提示",
content: "确定要删除吗？",
success: (res) => {
if (res.confirm) {
//通过filter过滤出当前点击那一行数据并将数据重新赋值给原数组
this.msgList = this.msgList.filter((item) => {
return item.id !== id;
});
}
},
});
},
msgHandler(e, id, index) {
//判断点击的是置顶还是删除，目前条件是置顶
if (e.index === 0) {
// 根据数组下标判断当前数据是否已置顶，如果是给出弹窗提示
if (index == 0) {
uni.showToast({
icon: "none", // success / none / loading 3个有效参数
title: "已经置顶啦~",
duration: 2000,
});
return;
}
//将原数组复制一份操作
let newList = this.msgList;
//置顶操作，将当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
newList.unshift(newList[index]);
newList.splice(index + 1, 1);
this.msgList = newList;
//目前条件是删除
} else {
uni.showModal({
title: "温馨提示",
content: "确定要删除吗？",
success: (res) => {
if (res.confirm) {
//通过filter过滤出当前点击那一行数据并将数据重新赋值给原数组
this.msgList = this.msgList.filter((item) => {
return item.id !== id;
});
}
},
});
}
},
},
};css
<style lang="less">
.inforMain{
background:#FFFFFF;
.moveArea {
width: 100vw-30px;
height: 90px;
// margin-left: 16px;
.moveItem {
padding: 0 16px;
width: 100vw;
height: 90px;
display: flex;
align-items: center;
border-bottom: 1px solid #f5f5f5;
.left {
margin-right: 12px;
.msgIcon {
width: 52px;
height: 52px;
border-radius: 50%;
}
}
.middle {
width: 75%;
.middleTop {
display: flex;
justify-content: space-between;
margin-bottom: 6;
.title {
font-size: 16px;
color: #000000;
font-weight: 600;
}
.time {
font-size: 13px;
color: #999999;
font-weight: 400;
}
}
.middleBottom {
font-size: 13px;
font-weight: 400;
color: #333333;
}
}
.right {
position: fixed;
right: -112px;
width: 120px;
display: flex;
.toTop {
width: 60px;
height: 90px;
background-color: #006aff;
border: none;
display: flex;
align-items: center;
justify-content: center;
.text {
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
}
.remove {
border: none;
width: 60px;
height: 90px;
background-color: #d9583c;
display: flex;
align-items: center;
justify-content: center;
.text {
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
}
}
}
}
/deep/ .uni-badge--success {
background-color: red !important;
}
/deep/ .uni-badge--x {
position: absolute !important;
top: -50px !important;
right: 2px !important;
}
/deep/ .uni-list-item__extra {
position: absolute !important;
bottom: 4px !important;
right: 4px !important;
}
/deep/ .uni-list-item__container {
height: 80px !important;
width: 365px;
}
/deep/ .uni-swipe {
border-bottom: 1px solid #f7f7f7 !important;
}
.search {
background-color: #ffffff;
padding: 0 34rpx 10rpx 34rpx;
align-items: center;
display: flex;
// 加号图标
.add {
width: 60rpx;
height: 60rpx;
margin-left: 2px;
}
}
}
</style>
0 个回复