18 uniapp-个人中心页面开发（定制uni-list-item，浅谈vue的provide和inject)

18 个人中心页面开发（定制uni-list-item，浅谈vue的provide和inject)

纵览效果图：

一定制uniapp的列表组件，

1 定制有名插槽方便自己使用自己的图标。

2 去掉列表自带的上边线。

。。。
<view v-else-if="showExtraIcon" class="uni-list-item__icon">
					<slot name="myicon">
						<uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" class="uni-icon-wrapper" />
					</slot>
				</view>
。。。
/* #ifndef APP-NVUE */
	.uni-list-item__container:after {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		/* background-color: ; */ # 主石掉background-color
	}

3 找到注释掉

二完整代码：

<template>
	<view >
		
		<view class="flex px-2 py-3 align-center">
			<image src="/static/default.jpg" class="rounded-circle mr-2" style="height: 100rpx;width: 100rpx;" mode=""></image>
			<view class="flex-1 flex flex-column ">
				<text class="font-lg font-weight-bold">123123123123</text>
				<view class="font text-muted">
					<text class="mr-3 ">总帖子 1</text>
					<text>今日发帖 0</text>
				</view>
			</view>
			<text class="iconfont icon-jinru font-lg"></text>
		</view> 
		
		<view class="flex align-center px-2">
			<view class="flex-1 flex flex-column align-center justify-center"
			v-for="(item,index) in myData" :key="index">
				<text class="font-lg font-weight-bold">{{item.num}}</text>
				<text class="font text-muted">{{item.name}}</text>
			</view>
		</view>
		
		<!-- 广告栏 -->
		<view class="px-2 py-3">
			<image src="/static/demo/banner2.jpg" 
			class="w-100 rounded"
			style="height: 170rpx;" mode="aspectFill"></image>
		</view>
		
		<!-- 三个小列表 -->
		<uni-list-item :show-extra-icon="true"  title="浏览历史">
			<text slot="myicon" class="iconfont icon-liulan"></text>
		</uni-list-item>
		<uni-list-item :show-extra-icon="true"  title="社区认证">
			<text slot="myicon" class="iconfont icon-huiyuanvip"></text>
		</uni-list-item>
		<uni-list-item :show-extra-icon="true"  title="审核帖子">
			<text slot="myicon" class="iconfont icon-keyboard"></text>
		</uni-list-item>
		
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue'
	export default {
		components:{
			uniListItem
		},
		data() {
			return {
				myData:[{
					name:"帖子",
					num:1
				},{
					name:"动态",
					num:1
				},{
					name:"评论",
					num:2
				},{
					name:"粉丝",
					num:0
				}]
				
			}
		},
		// 监听导航条按钮
		onNavigationBarButtonTap(){
			uni.navigateTo({
				url:'../user-set/user-set'
			})
		},
		methods: {
			
		}
	}
</script>

<style>

</style>