uni-app自定义列表组件

电玩女神 2023-07-02 15:30 25阅读 0赞

### 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200131015532690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200131015559848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70