记录一次小程序卡片组件封装的实战

来分析一下我这次所做项目的需求，首先重要的是卡片内部的布局需要卡片组件需要应用在两个场景下，每个场景的部分文本内容有区别，所以需要进行文本控制，而又要考虑到文本长度的问题，所以需要对文本内容进行一些处理，整理一下得出以下三个点

• 卡片布局
• 内容控制
• 文本处理

卡片布局

卡片布局采用flex布局将内容划分为两个部分，图片与文本，文本又划分为三部分，对应着各自的信息与内容，完整的dom结构如下所示。

<view class="info-list" >
    <view class="info-list-img">
        <t-image src="" />
    </view>
    <view class="info-list-text">
        <view class="info-list-title">标题</view>
        <view class="info-list-tag active">
            <view class="tag">标签</view>
        </view>
        <view class="info-list-intro">介绍</view>
    </view>
</view>

通过padding与margin来控制内容的间距，通过flex控制盒子的左右，上下调整，完成卡片的整体布局。

内容控制

由于有两个场景同样的文本区域但是不同的文本内容，而且文本内容是死的，所以一般需要使用属性来控制不同场景下的显示

properties: {
        tag: {
            type:Boolean,
            value:false
        }
    },

在组件js文件属性中定义布尔值类型属性，在组件内通过wx:if来控制显示

<view class="info-list-text">
        <view class="info-list-title">标题</view>
        <view class="info-list-tag active" wx:if="{{tag}}">
            <view class="tag">标签_1</view>
        </view>
    <view class="info-list-tag active" wx:else="{{tag}}">
            <view class="tag">标签_2</view>
        </view>
        <view class="info-list-intro">介绍</view>
</view>

如上结构，由于含有两个类别的内容（而且数量也不一样），所以就可以使用定义好的属性来进行控制。

文本处理

文本处理分为两种情况，一种是多行文本，另一种是单行文本

单行文本

上面的代码块展现在标签内如何控制单行文本，因为一行是有限制的，如果标签内文本过长就需要对文本进行处理，搭配了white-space，text-overflow与overflow使用

• white-space：控制文本溢出不换行的属性
• text-overflow：以ellipsis为值的时候，其文本溢出使用省略号显示
• overflow：控制文本溢出

三个属性搭配完成单行文本的溢出处理，其实这个场景下的文本处理就是需要考虑溢出，溢出后的填充，是否换行这三个问题，其中有一个重要的点就是需要去限制盒子的宽度，因为盒子不设置宽度会随着文本长度而增加的，下面来看看多行文本的处理。

多行文本

如上代码块，文本被控制在了三行，其他内容省略，其主要应用-webkit-box属性值即流体盒来实现限制多行文本

• dispaly:-webkit-box;：设定流体盒模型
• -webkit-line-clamp：限制文本的行数
• -webkit-box-orient：规定内容以垂直形式排列

多行文本的处理在于设置流体盒对行数与排列进行限制，当然需要注意的是设定高度与字号，如果高度与字号还有设定的行数不匹配的话，仍会失效，会有文本溢出，但是省略不消失，这也是通过设定高度与设定overflow的原因。

特此声明：关于多行文本处理是我在网上查找的资料才cv实现的，虽然但是我还是去研究了一下午关于关于流体盒模型的问题，过几天整理一篇相关文章，感谢掘友们的支持。