uniapp使用uView创建消息界面模板

效果展示

代码展示

<template>
	<view>
		<view v-for="(item, index) in goodsList" :key="index" @click="navToDetailPage(item)" style="margin-top: 20rpx;">
			<!-- 消息组件 -->
			<view style="margin-left: 25rpx;">
				<image :src="item.image" style="width: 125rpx;height: 125rpx;border-radius: 50%;" mode="aspectFill">
				</image>
			</view>
			<view style="margin-top: -130rpx;margin-left: 170rpx;">
				<text>{{item.title}}</text>
			</view>
			<view style="margin-top: -45rpx;margin-left: 560rpx;">
				<text style="color: #515151;">{{item.time}}</text>
			</view>
			<view style="margin-top: 30rpx;margin-left: 170rpx;">
				<text style="color: #515151;">{{item.news}}</text>
			</view>
			<view style="margin-top: -40rpx;margin-left: 680rpx;">
				<u-badge numberType="overflow" shape="circle" max="99" :value="item.noread" type="error"
					:absolute="true" :showZero="false"></u-badge>
			</view>
			<!-- 分割线 -->
			<view style="margin-top: 60rpx;">
				<u-divider lineColor="#7A9BFD"></u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [{
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 100
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 0
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}, {
					image: "http://demo.rageframe.com/attachment/images/2021/11/02/image_1635838346_MH3eD7HX.jpeg",
					title: "得力官方旗舰店",
					time: "2021-11-12",
					news: "这是一条消息",
					noread: 1
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">

</style>