uniapp 打造自用组件库 (二) 详情页

1,334 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

uniapp 打造自用组件库 (二) 详情页

前言

本文将带领读者使用uniapp封装一些常用组件,方便日后开发时重复使用,当然文中封装的组件不可能适配所有应用场景,但是我希望读者可以跟着我的思路实现出来,然后可以在此基础上优化改进为自己合适的,本人一个前端小菜鸡,希望大佬们可以不吝赐教,也是对我的技术水平的提升

详情页

需求

相信大家都遇到过如图这种大量展示数据的详情页面,每次都重复去写非常繁琐且无意义,我们可以通过封装组件的方式来处理这种详情页

image.png

效果展示

应用效果

image.png

应用代码
	<view>
		<Ytitle value='这是带数字标题' pieceColor='#007AFF' num='333'></Ytitle>
		<YinfoList :config="config" :data="data"></YinfoList>
	</view>
export default {
    data() {
	return {
            config: [{
			title: '用户名',
			key: 'username'
                    },
                    {
			title: '性别',
			key: 'sex'
                    },
                    {
			title: '手机号',
                        key: 'phone'
                    },
                    {
			title:'地址',
			key:'address'
                    },
                    {
			title:'出生日期',
			key:'birthday'
                    },
            ],
            data: {
                    username: '李大锤',
                    sex: '男',
                    phone: '15095111111',
                    address: '北京前门外前门大街',
                    birthday: '2000-10-01'
            }
	}
    }
}

实现思路

我们拿到后端数据一般是 {key:value,key1:value1}这种格式的数据,而我们展示的只有一个标题value,而value需要使用key来获取,所以我们写一个写一个配置json

[
  {
	  title:'用户名',
  	key:'username'
	},
  {
	  title:'性别',
  	key:'sex'
	},
]

这样,当我们去遍历这个json的时候,就可以展示出需要展示的所有字段标题了,同时每一个遍历项中都会拿到自己对应的key,此时我们把后端拿到的数据data传入

{
  username:'Alex',
  sex:'男'
}

这样在遍历项上使用data[item.key]就可以取到每一项对应的value

完整实现代码

<template>
	<view>
		<view class="list">
			<view class="item" @tap="tapitem(i)"  :style="{marginTop:i.top?i.top:'1rpx'}" v-for="i in config">
				<view class="view">{{i.title}}</view>
				<view class="text" v-if="data[i.key]">{{data[i.key]}}</view>
				<view class="text" v-if="!(data[i.key])"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Array,
				default: []
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				tapitem(info){
					console.log('info',info)
					this.$emit('')
				},
			};
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
	}

	.item {
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx;
		&:active{
			background-color: #f2f2f2;
		}
		
		.view {
			padding: 30rpx 0;
			font-size: 14px;
			flex: 1;
			color: #333333;
		}

		.text {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 0;
			overflow: hidden;
			font-size: 14px;
			color: #999;
		}
	}
</style>