我们先来看第一种简单的二维数组
来张效果图
实现代码
<template>
<view class="content unify-margin">
<view v-if="list.length !== 0">
<!-- 间隔 -->
<uni-interval height="8px"></uni-interval>
<view class="item unify-relative unify-padding unify-background-color unify-radius"
v-for="(item,index) in list" :key="index" @touchstart="drawStart" :data-index="index"
@touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+ 'rpx'">
<view class="item-nk unify-flex" @tap="tapCut(item)">
<image class="image unify-block unify-radius" :src="item.image || errorImage" mode=""></image>
<view class="right unify-relative unify-weight">
<view class="title unify-font-size-line-astrict">{{item.name}}</view>
<view class="right-data unify-flex unify-absolute">
<view class="right-score">
4.8分
<text class="right-appraise">| 66人评价</text>
</view>
<view class="right-distance">1km</view>
</view>
</view>
</view>
<view class="remove" @tap="tapDel(index)">删除</view>
</view>
<!-- 间隔 -->
<uni-interval height="30px"></uni-interval>
<!-- 加载更多 -->
<uni-loading-more :loadingType="loadingType" :contentText="contentText"></uni-loading-more>
<!-- 间隔 -->
<uni-interval height="30px"></uni-interval>
</view>
<!-- 没有数据 -->
<uni-null desc="没有收藏哦! 赶紧去收藏吧~" v-else></uni-null>
</view>
</template>
<script>
export default {
data() {
return {
errorImage: this.$mAssetsPath.errorImage, // 图片加载失败填充
list: [{
image: '',
name: '食悦阁中餐食补',
}],
delBtnWidth: 120, // 滑动距离
contentText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: '只有这么多了'
},
pageNum: 1, // 页码
pageSize: 10, // 每页显示数量
loadingType: 2, // 加载动画
}
},
methods: {
// 切换函数处理事件
tapCut(e) {
for (var index in this.list) { // 滑动初始化
this.$set(this.list[index], 'right', 0);
}
},
// 删除函数处理事件
tapDel(e) {
uni.showModal({
title: '提示',
content: '确认删除该收藏？',
confirmText: '确认',
success: res => {
if (res.confirm) {
let list = this.list;
list.forEach((item, index) => {
if (e === index) {
list.splice(index, 1)
}
})
this.list = list;
this.$mHelper.toast('删除成功')
}
}
})
},
//开始触摸滑动
drawStart(e) {
var touch = e.touches[0];
this.startX = touch.clientX;
},
//触摸滑动
drawMove(e) {
for (var index in this.list) {
this.$set(this.list[index], 'right', 0);
}
var touch = e.touches[0];
var item = this.list[e.currentTarget.dataset.index];
var disX = this.startX - touch.clientX;
if (disX >= 20) {
if (disX > this.delBtnWidth) {
disX = this.delBtnWidth;
}
this.$set(this.list[e.currentTarget.dataset.index], 'right', disX);
} else {
this.$set(this.list[e.currentTarget.dataset.index], 'right', 0);
}
},
//触摸滑动结束
drawEnd(e) {
var item = this.list[e.currentTarget.dataset.index];
if (item.right >= this.delBtnWidth / 2) {
this.$set(this.list[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
} else {
this.$set(this.list[e.currentTarget.dataset.index], 'right', 0);
}
},
}
}
</script>
<style lang="scss" scoped>
$image: 110rpx;
$text-size: 28rpx;
.content {
.item {
height: 142rpx;
margin-top: 9px;
.item-nk {
height: inherit;
align-items: center;
justify-content: space-between;
}
.image {
width: $image;
height: $image;
}
.right {
width: 78%;
height: $image;
.title {
font-size: $text-size;
}
.right-data {
width: 100%;
align-items: center;
justify-content: space-between;
bottom: 0;
.right-score {
font-size: $text-size;
color: $uni-text-color-orange;
.right-appraise {
font-size: 24rpx;
color: $uni-text-color-grey;
margin-left: 10rpx;
font-weight: 400;
}
}
.right-distance {
font-size: 24rpx;
color: $uni-text-color-grey;
font-weight: 400;
}
}
}
// 删除
.remove {
width: 108rpx;
text-align: center;
height: inherit;
background-color: #FF0000;
color: white;
position: absolute;
right: -154rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx 0 0 20rpx;
font-size: 24rpx;
top: 0;
bottom: 0;
margin: auto;
}
}
}
</style>
第二种三维数组
来张效果图
实现代码
<template>
<view class="content unify-margin">
<view v-if="list.length !== 0">
<view class="outer-sphere" v-for="(item1,index1) in list" :key="index1">
<!-- 时间 -->
<view class="time">{{item1.time}}</view>
<uni-interval height="5px"></uni-interval>
<view class="item unify-relative unify-padding unify-background-color unify-radius"
v-for="(item2,index2) in item1.array" :key="index2" @touchstart="drawStart" :data-index1="index1"
:data-index2="index2" @touchmove="drawMove" @touchend="drawEnd"
:style="'right:'+item2.right+ 'rpx'">
<view class="item-nk unify-flex" @tap="tapCut(item2)">
<image class="image unify-block unify-radius" :src="item2.image || errorImage" mode=""></image>
<view class="right unify-relative unify-weight">
<view class="title unify-font-size-line-astrict">{{item2.name}}</view>
<view class="right-data unify-flex unify-absolute">
<view class="right-score">
4.8分
<text class="right-appraise">| 66人评价</text>
</view>
<view class="right-distance">1km</view>
</view>
</view>
</view>
<view class="remove" @tap="tapDel(index2)">删除</view>
</view>
</view>
<!-- 间隔 -->
<uni-interval height="30px"></uni-interval>
<!-- 加载更多 -->
<uni-loading-more :loadingType="loadingType" :contentText="contentText"></uni-loading-more>
<!-- 间隔 -->
<uni-interval height="30px"></uni-interval>
</view>
<!-- 没有数据 -->
<uni-null desc="没有收藏哦! 赶紧去收藏吧~" v-else></uni-null>
</view>
</template>
<script>
export default {
data() {
return {
errorImage: this.$mAssetsPath.errorImage, // 图片加载失败填充
list: [{
time: '12-15',
array: [{
image: '',
name: '食悦阁中餐食补',
}, {
image: '',
name: '食悦阁中餐食补',
}, {
image: '',
name: '食悦阁中餐食补',
}]
}, {
time: '12-15',
array: [{
image: '',
name: '食悦阁中餐食补',
}, {
image: '',
name: '食悦阁中餐食补',
}, {
image: '',
name: '食悦阁中餐食补',
}]
}],
delBtnWidth: 120, // 滑动距离
contentText: {
contentdown: "上拉显示更多",
contentrefresh: "正在加载...",
contentnomore: '只有这么多了'
},
pageNum: 1, // 页码
pageSize: 10, // 每页显示数量
loadingType: 2, // 加载动画
}
},
methods: {
// 切换函数处理事件
tapCut(e) {
let list = this.list;
for (var index1 in list) { // 滑动初始化
for (var index2 in list[index1].array) {
this.$set(list[index1].array[index2], 'right', 0);
}
}
},
// 删除函数处理事件
tapDel(e) {
uni.showModal({
title: '提示',
content: '确认删除该收藏？',
confirmText: '确认',
success: res => {
if (res.confirm) {
let list = this.list;
list.forEach((item1, index1) => {
item1.array.forEach((item2, index2) => {
if (e === index2) {
item1.array.splice(index2, 1)
}
})
if (item1.array.length === 0) {
list.splice(index1, 1)
}
})
this.list = list;
this.$mHelper.toast('删除成功')
}
}
})
},
//开始触摸滑动
drawStart(e) {
var touch = e.touches[0];
this.startX = touch.clientX;
},
//触摸滑动
drawMove(e) {
for (var index1 in this.list) {
for (var index2 in this.list[index1].array) {
this.$set(this.list[index1].array[index2], 'right', 0);
}
}
var touch = e.touches[0];
var item = this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2];
var disX = this.startX - touch.clientX;
if (disX >= 20) {
if (disX > this.delBtnWidth) {
disX = this.delBtnWidth;
}
this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right',
disX);
} else {
this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right', 0);
}
},
//触摸滑动结束
drawEnd(e) {
var item = this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2];
if (item.right >= this.delBtnWidth / 2) {
this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right',
this.delBtnWidth);
} else {
this.$set(this.list[e.currentTarget.dataset.index1].array[e.currentTarget.dataset.index2], 'right', 0);
}
},
}
}
</script>
<style lang="scss" scoped>
$image: 110rpx;
$text-size: 28rpx;
.content {
.outer-sphere:first-child {
margin-top: 17px;
}
.outer-sphere {
margin-top: 26px;
}
.time {
font-size: $text-size;
color: $uni-text-color-grey;
}
.item {
height: 142rpx;
margin-top: 9px;
.item-nk {
height: inherit;
align-items: center;
justify-content: space-between;
}
.image {
width: $image;
height: $image;
}
.right {
width: 78%;
height: $image;
.title {
font-size: $text-size;
}
.right-data {
width: 100%;
align-items: center;
justify-content: space-between;
bottom: 0;
.right-score {
font-size: $text-size;
color: $uni-text-color-orange;
.right-appraise {
font-size: 24rpx;
color: $uni-text-color-grey;
margin-left: 10rpx;
font-weight: 400;
}
}
.right-distance {
font-size: 24rpx;
color: $uni-text-color-grey;
font-weight: 400;
}
}
}
// 删除
.remove {
width: 108rpx;
text-align: center;
height: inherit;
background-color: #FF0000;
color: white;
position: absolute;
right: -154rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20rpx 0 0 20rpx;
font-size: 24rpx;
top: 0;
bottom: 0;
margin: auto;
}
}
}
</style>
两种相差无异，只不过是取值不同
