uniapp 打造自用组件库 (二) 详情页-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

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

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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章