微信小程序从后端获取的图片，展示的时候上下没有完全拼接，有缝隙【已解决】

文章目录

1、index.wxml
2、index.js
3、detail.detail
- - 为什么 `.rich-text-style` 样式可以生效？
  - - 1. `<rich-text>` 组件的特殊性
    - 2. 类选择器的作用范围
    - 3. 样式优先级
    - 4. `line-height: 0` 的作用
    - 5. 为什么直接使用 `rich-text` 选择器无效？
  - 总结

上下两张图片，中间有一条白色缝隙，但是客户想要完全拼接。于是就开始分析代码。

1、index.wxml

<view class="marketing-materials-pannel-wrap"><view class="marketing-materials-pannel-box"><view class="marketing-materials-title-box"><view class="marketing-materials-item-title-box {{ currentIndex === index ? 'active-class': '' }}" wx:for="{{ detail.detailList }}" wx:key="item" data-index="{{ index }}" catch:tap="handleTitleClick">{{ item.active }}</view></view><view class="marketing-materials-item-value-box"><!-- <rich-text nodes="{{ detail.detailList[currentIndex].value || '' }}" /> --><rich-text nodes="{{ detail.detail }}" class="rich-text-style"/></view></view>
</view>

2、index.js

const properties = {detail: Object
}
const data = {currentIndex: 0
}
const observers = {}
const methodMap = {handleTitleClick(e) {const { index: currentIndex } = e?.currentTarget?.datasetthis.setData({ currentIndex })}
}
const customMethodMap = {}
const methods = {...customMethodMap,...methodMap
}
const behaviors = {}
const relations = {}
const externalClasses = []
const pageLifetimes = {show() {},hide() {},resize() {}
}
const lifetimes = {created() {},attached() {// 组件挂载到页面时调用console.log("Component attached, detail =", this.properties.detail);console.log("Component attached, detail.detail =", this.properties.detail.detail);},ready() {},moved() {},detached() {}
}Component({ properties, data, observers, methods, pageLifetimes, lifetimes, behaviors, relations, externalClasses })

3、detail.detail

<div><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_01_642681.jpg" style="max-width:100%;" contenteditable="false" /><p><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_02_311369.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_03_680880.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_04_504903.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_05_785733.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_06_138233.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_07_715648.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_08_281797.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_09_119610.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_10_517697.jpg" style="max-width:100%;" contenteditable="false" /><img src="https://www.crossbiog.com/product-detail/旭包鲜保鲜膜_11_238141.jpg" style="max-width:100%;" contenteditable="false" /></p>
</div>

为什么 `.rich-text-style` 样式可以生效？

你提到通过给 <rich-text> 组件添加一个自定义类名 class="rich-text-style"，并且使用 .rich-text-style 选择器来设置样式后，图片之间的空隙问题得到了解决。这背后的原因涉及到微信小程序中样式的优先级和作用范围。

1. `<rich-text>` 组件的特殊性

<rich-text> 是微信小程序中的一个内置组件，用于渲染 HTML 字符串。它的内部内容是通过 Shadow DOM 渲染的，这意味着外部样式文件中的样式默认情况下不会直接影响到 <rich-text> 内部的内容。然而，微信小程序提供了一种机制，允许你通过为 <rich-text> 添加自定义类名来影响其内部内容的样式。

2. 类选择器的作用范围

当你为 <rich-text> 组件添加一个自定义类名（如 class="rich-text-style"），并使用该类选择器（如 .rich-text-style）来设置样式时，微信小程序会将这些样式应用到 <rich-text> 的内部内容中。这是因为微信小程序的样式系统会将带有自定义类名的 <rich-text> 视为一个特殊的容器，允许你通过类选择器来影响其内部元素的样式。

<!-- WXML -->
<rich-text nodes="{{ detail.detail }}" class="rich-text-style"></rich-text>

/* WXSS */
.rich-text-style {line-height: 0;
}

在这种情况下，.rich-text-style 样式不仅会应用到 <rich-text> 组件本身，还会传递给其内部的 HTML 元素（如 img、p 等），从而有效地解决了图片之间的空隙问题。

3. 样式优先级

使用类选择器（如 .rich-text-style）通常比标签选择器（如 rich-text）具有更高的优先级。因此，即使有其他全局样式或默认样式存在，.rich-text-style 中的样式也会优先应用，确保 line-height: 0 等样式能够生效。

4. `line-height: 0` 的作用

line-height: 0 是一种常见的技巧，用于消除行内元素（如 img）之间的空隙。默认情况下，img 标签是行内元素，浏览器会在每个行内元素之间插入一个空白字符（类似空格），这会导致图片之间出现空隙。通过将 line-height 设置为 0，你可以有效地消除这些空白字符，从而使图片完全拼接在一起。

5. 为什么直接使用 `rich-text` 选择器无效？

如果你尝试直接使用 rich-text 选择器来设置样式，可能会遇到样式不生效的问题。原因如下：

Shadow DOM 的隔离性：<rich-text> 组件的内部内容是通过 Shadow DOM 渲染的，默认情况下外部样式文件中的样式无法直接影响到其内部元素。
样式优先级：如果没有使用类选择器，可能某些默认样式或全局样式会覆盖你设置的样式，导致 line-height: 0 等样式无法生效。

因此，使用自定义类名（如 class="rich-text-style"）并通过类选择器（如 .rich-text-style）来设置样式是一种更可靠的方式，可以确保样式能够正确应用到 <rich-text> 的内部内容中。

总结

<rich-text> 组件的内部内容是通过 Shadow DOM 渲染的，默认情况下外部样式无法直接影响其内部元素。
通过为 <rich-text> 添加自定义类名（如 class="rich-text-style"），并使用类选择器（如 .rich-text-style）来设置样式，可以有效地将样式应用到 <rich-text> 的内部内容中。
line-height: 0 是一种常见的技巧，用于消除行内元素之间的空隙，从而使图片完全拼接在一起。
类选择器通常比标签选择器具有更高的优先级，因此使用类选择器可以确保样式优先应用。

在这里插入图片描述