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>