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>