root
/
agri-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

左滑删除

feasure
lld 2026-02-20 20:55:04 +08:00
parent 098156f558
commit 8920d6117b
1 changed files with 62 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
pages/index.vue
View File

@ -38,31 +38,32 @@
lower-threshold="50"
scroll-with-animation
>
<tn-swipe-action>
<tn-swipe-action-item
<uni-swipe-action>
<uni-swipe-action-item
v-for="(item, index) in listData"
:key="index"
:options="options"
:class="['list-item', { 'list-item-disabled': item.online === '离线' }]"
@tap="item.online !== '离线' && onItemTap(item)"
>
<view class="item-title">
<view class="title-text">{{ item.agriName }}</view>
<text :class="['tag','tag-status',{'tag-manual':item.workModeDesc==='手动模式'}]" v-if="item.workModeDesc">{{ item.workModeDesc }}</text>
<text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]" v-if="item.online">{{ item.online }}</text>
</view>
:right-options="options">
<view class="item-card"
@click="item.online !== '离线' && onItemTap(item)">
<view class="item-title">
<view class="title-text">{{ item.agriName }}</view>
<text :class="['tag','tag-status',{'tag-manual':item.workModeDesc==='手动模式'}]" v-if="item.workModeDesc">{{ item.workModeDesc }}</text>
<text :class="['tag','tag-online',{'tag-offline':item.online==='离线'}]" v-if="item.online">{{ item.online }}</text>
</view>
<view class="item-subtitle">
设备编号：{{ item.imei }}
</view>
<view class="item-subtitle">
设备编号：{{ item.imei }}
</view>
<view class="item-tags">
<text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
<text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
<text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
<text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
<view class="item-tags">
<text class="tag tag-temp1">温度1: {{ item.temp1 }}℃</text>
<text class="tag tag-temp2">温度2: {{ item.temp2 }}℃</text>
<text class="tag tag-temp3">温度3: {{ item.temp3 }}℃</text>
<text class="tag tag-temp4">温度4: {{ item.temp4 }}℃</text>
</view>
</view>
</tn-swipe-action-item>
</uni-swipe-action-item>
<view v-if="isLoading" class="loading-more">
<uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
@ -74,7 +75,7 @@
<image :src="imageSrc" :style="'width:'+80+'rpx;height:'+80+'rpx'"></image>
<text class="text">点击添加大棚</text>
</view>
</tn-swipe-action>
</uni-swipe-action>
</scroll-view>
</uni-section>
<!-- <uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"-->
@ -280,8 +281,17 @@ export default {
refresh() {
this.getListData();
},
onDeleteItem(item) {
console.info(`点击了${item.content.text}`)
},
// 点击列表项
onItemTap(item) {
onItemTap(item,index) {
console.info(item,index)
if (item.online==='离线') {
return;
}
console.info(item)
var agri = JSON.stringify(
{
imei:item.imei,
@ -368,18 +378,41 @@ page {
background-color: #e0e0e0;
border-radius: 2rpx;
}
.list-item {
padding: 14rpx 25rpx;
/* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
.item-card {
background-color: #FFFFFF;
border-radius: 12rpx;
box-shadow: 8rpx 5rpx 10rpx #999;
margin-bottom: 20rpx;
// #ifndef H5
//margin-right: 10rpx;
// #endif
}
/deep/ .uni-swipe {
// #ifdef MP-WEIXIN
height: 214rpx !important;
// #endif
}
/deep/ .uni-swipe_button {
// #ifdef MP-WEIXIN
height: 198rpx !important;
// #endif
margin-right: 10rpx;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 12rpx;
box-shadow: 8rpx 5rpx 10rpx #999;
}
.list-item,/deep/.tn-swipe-action-item {
height: 190rpx;
/* 移除border-bottom，改为margin-top，并且把列表项背景设为半透明白色 */
// #ifdef H5
margin-bottom: 20rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
/* 新增：点击态样式，双端统一 */
transition: all 0.2s ease;
overflow: hidden;
box-shadow: 8rpx 5rpx 10rpx #999;
pointer-events: auto !important;
// #endif
}
.list-item:active {
background-color: #F5F5F5;
@ -396,6 +429,7 @@ page {
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 14rpx 25rpx 0 25rpx;
}
.title-text {
overflow: hidden;
@ -428,13 +462,14 @@ page {
color: #666;
line-height: 52rpx;
display: block;
padding: 0 25rpx;
}
.item-tags {
display: flex;
gap: 8rpx;
flex-wrap: wrap; /* 新增：标签过多时换行，避免溢出 */
padding: 14rpx 0;
padding: 14rpx 25rpx 28rpx 25rpx;
}
.tag {
@ -513,7 +548,6 @@ page {
background-color: #fafafa;
/* 可选：添加透明度 */
opacity: 0.7;
pointer-events: none !important; /* 禁止所有交互 */
}
/* 禁用状态下的子元素也置灰 */
@ -567,7 +601,6 @@ page {
/* 可选：添加背景和圆角，和列表项风格统一 */
background-color: rgba(255, 255, 255, 0.85);
border-radius: 12rpx;
margin-top: 20rpx;
/* 点击态效果，和列表项保持一致 */
transition: all 0.2s ease;
}