Vue动态绑定class | 类似微信朋友圈功能的实现

Vue动态绑定class | 类似微信朋友圈功能的实现

一月 02, 2022
该文章更新于 2022.01.02

涉及知识点：

  • vue动态绑定class
  • 动态绑定class失效时使用行内样式
  • uvue的image图片不显示问题

源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<view class="gui-comments-imgs gui-flex gui-rows gui-wrap"
												v-if="item.enclosures">
												<!-- 根据动态图片集合长度动态改变图片显示大小 -->
												<!-- 判断图片数量绑定不一样的图片样式class -->
												<view
													:class="[{'gui-comments-image-gt1':(item.enclosures.length>1)},{'gui-comments-image-lt1':(item.enclosures.length==1)}]"
													v-for="(img, indexImg) in item.enclosures" :key="indexImg"
													@click.stop="showImgs(index, indexImg)">
													<!-- 图片数量大于1，给定image固定高度和margin，这里的行内样式其实我在class里面也写得有，但是不知道为啥绑定的没用，必须写行内 -->
													<image v-if="item.enclosures.length>1"
														style="height:180rpx; margin:5rpx;"
														class="gui-comments-image-pic-gt1"
														:src="img.url" mode="aspectFill"></image>
													<!-- 图片数量等于1，不需要固定高度和margin -->
													<image v-if="item.enclosures.length==1"
														class="gui-comments-image-pic-lt1"
														:src="img.url" mode="aspectFill"></image>
													<!-- 必须加一个view，给定宽度，不然图片会不显示，不知道这是什么bug -->
													<view style="width:190rpx;"></view>
												</view>

实现朋友圈功能时接触到的其他知识点：

  1. image的mode属性

    1
    2
    3
    4
    5
    6
    7
    8
    mode属性
        scaleToFill 缩放模式（默认属性），不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

        aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

        aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

        当时使用image实现图像自适应的时候，设置mode="aspectFill"

  2. CSS object-fit 属性

    1
    2
    3
    4
    5
    6
    7
    object-fit 属性可接受如下值：

    fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
    contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
    cover - 调整替class="gui-comments-image-pic-gt1"换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
    none - 不对替换的内容调整大小。
    scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）