当前位置：首页 > uni-app

uniapp图文

2026-01-13 20:45:51uni-app

图文混排实现方式

在uniapp中实现图文混排通常采用<rich-text>组件或自定义样式布局。<rich-text>支持解析HTML字符串，适合动态内容渲染。

<template>
  <view>
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '<div style="color: #333;"><p>这是一段文字</p><img src="https://example.com/image.jpg" style="width:100%"/></div>'
    }
  }
}
</script>

自定义布局方案

通过flex布局手动控制图文位置：

<view class="content-box">
  <image src="/static/logo.png" mode="aspectFit"></image>
  <text>文字内容与图片采用flex布局排列</text>
</view>

<style>
.content-box {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}
.content-box image {
  width: 100%;
  height: 300rpx;
}
</style>

富文本编辑器集成

使用第三方插件如uParse解析复杂HTML：

安装插件：
```
npm install mp-html
```

页面中使用：


<template>
<mp-html :content="htmlContent" />
</template>

import mpHtml from 'mp-html' export default { components: { mpHtml }, data() { return { htmlContent: '

标题

' } } } ```

图文列表渲染

循环渲染图文数据时建议使用v-for：

<view v-for="(item,index) in list" :key="index">
  <image :src="item.imgUrl"></image>
  <text>{{item.text}}</text>
</view>

性能优化建议

图片加载使用懒加载模式：

<image lazy-load src="..."></image>

对于长列表图文，建议使用<recycle-list>组件提升渲染性能：

<recycle-list :data="longList">
  <template v-slot="{item}">
    <image :src="item.img"/>
    <text>{{item.desc}}</text>
  </template>
</recycle-list>