uni-app自定義列表組件

filename: u-list.vue

<template>
	<view class="u-list-item u-f-ac u-f-jsb" hover-class="list-hover" @tap="clickevent" :class="{ 'u-list-item-first': isFirstChild }">
		<view class="u-f-ac">
			<template v-if="item.icon">
				<view class="iconfont" :class="item.icon" :style="{ color: item.iconcolor, fontSize: iconsize + 'rpx' }"></view>
			</template>
			<view :style="{ fontWeight: fontweight, fontSize: fontsize + 'rpx' }">{{ item.title }}</view>
		</view>
		<view class="iconfont icon-you-"></view>
	</view>
</template>

<script>
export default {
	inject: ['list'],
	data() {
		return {
			isFirstChild: false
		};
	},
	mounted() {
		if (!this.list.firstChildAppend) {
			this.list.firstChildAppend = true;
			this.isFirstChild = true;
		}
		// console.log(this.list);
	},
	props: {
		item: Object,
		iconsize: {
			type: String,
			default: '36'
		},
		fontweight: {
			type: String,
			default: 'blod'
		},
		fontsize: {
			type: String,
			default: '30'
		}
	},
	methods: {
		clickevent() {
			switch (this.item.clicktype){
				case 'navigateTo':
				if(this.item.url) {
					uni.navigateTo({
						url:this.item.url
					})
				}
					break;
			}
		}
	}
};
</script>

<style scoped>
.u-list-item {
	padding: 20rpx;
	border-top: solid #c0c0c0;
	/* border-bottom: solid #f2f2f2; */
	border-width: thin;
}
.u-list-item > view > view {
	padding-right: 10rpx;
}
.u-list-item > view:first-child {
	color: #353535;
}
.u-list-item > view:last-child {
	color: #666;
}
.list-hover {
	background-color: #eeeeee;
}

/* 判斷 */
.u-list-item-first {
	border-top: 0;
}
</style>

用到了inject，父組件需要用provide發送有關數據

filename: set-list

設置頁面搭建

<template>
	<view class="body">
		<block v-for="(item, index) in list" :key="index"><u-list :item="item"></u-list></block>
		<button type="default" class="logout-btn">退出登錄</button>
	</view>
</template>

<script>
import uList from '../../components/common/u-list.vue';
export default {
	components: { uList },
	data() {
		return {
			list: [
				{ title: '賬號與安全', clicktype: 'navigateTo', url: '../user-set-repassword/user-set-repassword' },
				{ title: '綁定郵箱', clicktype: 'navigateTo', url: '../paper/paper' },
				{ title: '資料編輯', clicktype: 'navigateTo', url: '' },
				{ title: '小紙條', clicktype: 'navigateTo', url: '' },
				{ title: '清除緩存', clicktype: 'navigateTo', url: '' },
				{ title: '一鍵反饋', clicktype: 'navigateTo', url: '' },
				{ title: '關於我們', clicktype: 'navigateTo', url: '' }
			]
		};
	},
	provide() {
		return {
			list: this
		};
	},
	created() {
		this.firstChildAppend = false;
	},
	methods: {
		d() {
			uni.navigateTo({
				url:"../paper/paper"
			})
		}
	}
};
</script>

<style scoped>
.body {
	padding: 0 20rpx;
}
.list-item {
	font-size: 50rpx;
	margin: 10rpx 0;
}
.logout-btn {
	margin: 20rpx 0;
	background-color: #ffe933;
}
</style>