uniappshell/pages/message/message.vue

<template>
	<view class="message-page custom_status_bar">
		<view class="nav">
			<view class="back" @click="back">
				<uni-icons type="back" size="20"></uni-icons>				
			</view>
			<view class="title">消息</view>
			<template>
				<view @click="clickRight" class="nav-right" v-if="status===0">
					<image class="icon" src="/static/message/nav1.png" mode="widthFix"></image>
					<text>清除未读</text>
				</view> 
				<view @click="clickRight" class="nav-right read" v-else>
					<image class="icon" src="/static/message/nav2.png" mode="widthFix"></image>
					<text>全部已读</text>
				</view> 
			</template>
		</view>	
		<view class="container">
			<uni-list-chat 
			v-for="(item,index) in items"
			:key="index"
			:avatar-circle="true" 
			title="uni-app"
			avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" 
			note="您收到一条新的消息" >
				<view class="chat-custom-right">
					<text class="chat-custom-text">20:20</text>
					<view >
						<uni-badge class="uni-badge-left-margin" text="112" />
					</view>
				</view>			
			</uni-list-chat>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:0,
				items:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			clickRight(){
				this.status=1
			},
			getData(){
				this.items=10
			}
		}
	}
</script>

<style lang="scss" scoped>
.message-page{
	/* #ifdef MP-WEIXIN */
	padding-top: 30px;
	/* #endif */
	background-color: rgba(243, 244, 247, 1);
	box-sizing: border-box;
	min-height: 100vh;
	.nav{
		height: 44px;		
	    display: flex;	
		align-items: center;
	    padding: 0 10px;
	    height: 44px;
	    font-size: 12px;	
		color: rgb(51, 51, 51);
		background-color: rgb(255, 255, 255);
		.back{
			width: 140rpx;
		}
		.title{
			flex: 1;
			text-align: center;
			font-size: 14px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.nav-right{
			display: flex;
			justify-items: center;
			align-items: center;
			color: rgba(151, 151, 151, 1);
			&.read{
				color: rgba(42, 91, 238, 1);
			}
			.icon{
				width: 44rpx;
			}
		}
	}	
	.container{
		margin-top: 16rpx;
		.chat-custom-text{
			font-size: 28rpx;
			color: rgba(151, 151, 151, 1);
		}
	}
}

</style>