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

前言

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

详情页

需求

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

效果展示

应用效果

应用代码

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