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

文章目录

• 1、index.wxml
• 2、index.js
• 3、detail.detail
• • • [为什么 `.rich-text-style` 样式可以生效？](#为什么 .rich-text-style 样式可以生效？)
    • • [1. `<rich-text>` 组件的特殊性](#1. <rich-text> 组件的特殊性)
      • [2. 类选择器的作用范围](#2. 类选择器的作用范围)
      • [3. 样式优先级](#3. 样式优先级)
      • [4. `line-height: 0` 的作用](#4. line-height: 0 的作用)
      • [5. 为什么直接使用 `rich-text` 选择器无效？](#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?.dataset
    this.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 是一种常见的技巧，用于消除行内元素之间的空隙，从而使图片完全拼接在一起。
• 类选择器通常比标签选择器具有更高的优先级，因此使用类选择器可以确保样式优先应用。