partnerApp/pages/tools/messageReminder/messageReminder.vue

<template>
		<view class="aui-news-box">
			<!-- 公共组件-每个页面必须引入 -->
			<public-module></public-module>
			<uni-swipe-action>
				<!-- 基础用法 -->
				<uni-swipe-action-item v-for="(list, index) in lists" :key="index" :right-options="swipeOptions"   @click="swipeClick($event, index)">
					<view class="aui-news-item">
						<view class="aui-news-item-hd">
							<image :src="list.img" mode="widthFix" lazy-load class="img"/>
						</view>
						<view class="aui-news-item-bd">
							<view class="title">
								<h4>{{list.tit1}}</h4>
								<span>{{list.time}}</span>
							</view>
							<view class="content">
								<p>{{list.tit2}}</p>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				swipeOptions: [
					{text: '删除',value:'1', style: {backgroundColor: '#dd524d'}}
				],
				
				lists: [{
						"tit1": "系统消息",
						"tit2": "七月要增员？为您献上增员神器",
						"time": "08:48",
						"img": '/static/image/messageIcon/icon-item-001.png'
					},
					{
						"tit1": "服务消息",
						"tit2": "暂无消息",
						"time": "08:48",
						"img": '/static/image/messageIcon/icon-item-002.png'
					},
					{
						"tit1": "订单进度",
						"tit2": "订单号6565413164546已撤销",
						"time": "昨天",
						"img": '/static/image/messageIcon/icon-item-003.png'
					},
					{
						"tit1": "保单提醒",
						"tit2": "您有一条保单消息，请及时查看",
						"time": "星期六",
						"img": '/static/image/messageIcon/icon-item-004.png'
					},
					{
						"tit1": "佣金消息",
						"tit2": "您有一条佣金消息，请及时查看",
						"time": "星期六",
						"img": '/static/image/messageIcon/icon-item-005.png'
					},{
						"tit1": "增员服务",
						"tit2": "你有一条增员记录",
						"time": "星期五",
						"img": '/static/image/messageIcon/icon-item-001.png'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			swipeClick(e,index) {
				uni.showToast({
					title: '点击了第'+(index+1)+'条数据的'+ e.content.text + '按钮',
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.aui-news-box {
	    margin-top: 8px;
	    background: #fff;
	}
	.aui-news-item {
	    padding: 30upx;
	    position: relative;
	    display: flex;
	    align-items: center;
	}
	.aui-news-item-hd {
	    margin-right: 30upx;
		width: 110upx;
		display: flex;
		flex-shrink: 0;
	    background: #fff;
	    border-radius: 30upx;
	}
	.aui-news-item-hd .img {
	    width: 100%;
	}
	
	.aui-news-item-bd {
		display: flex;
		flex-direction: column;
		width: 550upx;
	}
	.aui-news-item-bd .title{
		display: flex;
		justify-content: space-between;
	    padding-bottom: 10upx;
	}
	.aui-news-item-bd .title h4 {
	    font-weight: 400;
	    font-size: 32upx;
		line-height: 50upx;
	    width: 250upx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    color: #333;
	}
	.aui-news-item-bd .title span{
		color: #848689;
	}
	.aui-news-item-bd p {
		width: 100%;
	    color: #848689;
	    overflow: hidden;
	    text-overflow: ellipsis;
		white-space: nowrap;
	}
	.aui-news-item:before {
	    content: '';
	    position: absolute;
	    z-index: 2;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 1px;
	    border-bottom: 1px solid #d8d8d8;
	    transform: scaleY(0.5);
	}
</style>