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 - 调整内容大小就像没有指定内容或包含内容一样(将导致较小的具体对象尺寸)