当前位置:首页 > uni-app

uniapp删除线

2026-02-05 22:20:18uni-app

在 uniapp 中实现删除线效果可以通过以下几种方式:

使用 CSS text-decoration 属性

通过 CSS 的 text-decoration 属性可以轻松实现删除线效果。在样式中添加以下代码:

.text-strikethrough {
  text-decoration: line-through;
}

在模板中使用:

<view class="text-strikethrough">这段文字将有删除线</view>

使用内联样式

如果希望直接在元素上应用样式,可以使用内联样式:

<view style="text-decoration: line-through;">这段文字将有删除线</view>

使用条件渲染

当需要根据条件动态显示删除线时,可以结合条件判断:

<view :style="{textDecoration: isDeleted ? 'line-through' : 'none'}">动态删除线</view>

使用 rich-text 组件

对于需要更复杂文本样式的情况,可以使用 rich-text 组件:

uniapp删除线

<rich-text :nodes="'<del>这段文字有删除线</del>'"></rich-text>

注意事项

  • 删除线颜色默认与文字颜色相同,可以通过 text-decoration-color 修改
  • 在某些平台(如小程序)上可能需要检查样式兼容性
  • 对于多行文本,删除线会贯穿每一行

标签: uniapp
分享给朋友:

相关文章

uniapp切片

uniapp切片

uniapp 切片实现方法 在 uniapp 中实现切片功能通常指的是对图片或数据进行分割处理。以下是几种常见的切片实现方式: 图片切片展示 通过 CSS 和 JavaScript 实现图片的网格化…

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

uniapp get

uniapp get

uniapp 获取数据的方法 在 uniapp 中获取数据可以通过多种方式实现,包括 API 请求、本地存储、页面传参等。以下是一些常见的方法: API 请求获取数据 使用 uni.request…

eeui uniapp

eeui uniapp

关于 EEUI 和 UniApp 的解析 EEUI 和 UniApp 是两个不同的跨平台开发框架,均用于快速构建多端应用。以下是它们的核心特点和对比分析: EEUI 框架特点 EEUI 是一个基于…

uniapp 3.0

uniapp 3.0

uniapp 3.0 核心特性 uniapp 3.0 是 DCloud 推出的跨端开发框架升级版本,支持一套代码编译到 iOS、Android、Web 及各类小程序平台。以下为关键特性与使用要点:…

uniapp 销售日报

uniapp 销售日报

实现销售日报功能的步骤 数据收集与整理 销售日报需要收集每日销售数据,包括销售额、订单数量、商品类别等。数据可以从后端API获取或本地数据库存储。使用uni.request调用接口获取数据,确保数据结…