小程序---rich-text实现列表功能

最新推荐文章于 2024-08-06 14:34:05 发布
最新推荐文章于 2024-08-06 14:34:05 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： 微信小程序开发 文章标签： rich-text 小程序列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ariel_201311/article/details/81544592
版权
小程序不支持直接使用ul标签，但可以通过rich-text组件来模拟实现。在xxx.wxml中设置nodes数据结构，定义ul和li的层级及样式；在xxx.js中处理数据逻辑；在xxx.wxss中定义相关样式，以此创建列表功能。
摘要由CSDN通过智能技术生成

小程序不能直接使用ul标签，但它有提供一个组件rich-text，这个组件可以实现html很多节点元素，这里我就使用rich-text来实现ul列表功能。
在这里插入图片描述

xxx.wxml

<!--rich-text标签里的nodes属性定义节点 -->
 <rich-text nodes="{
    {nodes}}" class='nodes'>
最低0.47元/天 解锁文章
Ariel_ckr
关注
专栏目录
微信小程序组件之rich-text，转义显示富文本操作
阿里巴啦的博客
12-11 6926
小程序的rich-text组件使用： 接口获取的数控 数据转义后 wxml结构 &amp;amp;amp;amp;amp;amp;lt;view class='content'&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;view class='in'&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;vie
HTML表格边界不显示,rich-text解析table，不显示边框
weixin_32999397的博客
06-15 865
↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵表格4保持寄存器说明↵↵↵↵↵↵寄存器地址↵↵↵属性↵↵↵数值范围↵↵↵读写↵↵↵说明↵↵↵↵↵00↵↵↵产品代码↵↵↵0 ~ 65535↵↵↵R↵↵↵产品代码↵↵↵↵↵01↵↵↵生产日期↵↵↵0 ~ 65535↵↵↵R↵↵↵生产日期1923，19年第23周↵↵↵↵↵02↵↵↵硬件版本↵↵↵0 ~ 65535↵↵...
uniapp使用v-html微信小程序（rich-text）不显示
最新发布
weixin_52256715的博客
08-06 425
uniapp使用v-html微信小程序（rich-text）不显示
微信小程序图文混编
aaron9185的博客
11-13 4198
内容：图文混编 图片跟随 选择器选择而改变 view class="userdata"> view class="userdata-name">单排扣view> view class="userdata-symbol">view> picker bindchange="coatFatThinChange" value="{{coatFatTh
小程序rich-text解析表格边框失效？开箱即用
Mgf_Yzy的博客
03-08 1327
小程序rich-text标签解析边框失效
RichtextBox 行和列
weixin_30905981的博客
12-09 288
获得光标所在的行号 获得光标所在的列号 设置光标到指定行号 设置光标到指定列号 http://www.huifangseo.com/blog/6/7.html 获得光标所在的行号和列号 方法1 int SelStart = richTextBox1.SelectionStart; int Line = 1 + richTextB...
小程序rich-text组件如何改变内部img图片样式的方法
10-16
在探讨微信小程序中如何改变`rich-text`组件内部`img`图片样式的问题之前，我们先来了解`rich-text`组件的作用和限制。`rich-text`是微信小程序提供的一个组件，它能够将用户输入的富文本内容（如HTML格式的字符串）...
富文本解析-微信小程序 rich-text 组件
03-29
微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。 这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但...
微信小程序 rich-text的使用方法
08-29
在微信小程序中，`<rich-text>`组件是一个用于渲染富文本的组件，...总之，`<rich-text>`组件是微信小程序中处理富文本内容的重要工具，通过理解和熟练运用其属性和规则，可以创建出丰富多样的页面布局和内容展示效果。
居中问题
小利的博客
09-08 297
<div class="page"> <ul class=""page-list> <li></li> <li></li> </ul> </div> <style type="text/css"> .page{display:block;text-align:center;} .page-list{display:inline-block;} </style>这样无论ul多宽 都可以居中了，总的来
31.微信小程序（组件 -- 基础内容组件）
weixin_45582846的博客
07-28 1829
微信小程序（组件 – 基础内容组件） 前言 （1）icon图标组件 （2）progress进度条组件 （3）text文本组件 （4）拓展：富文本编辑器UE和UM （5）rich-text 富文本组件 基础内容组件 （1）icon图标组件 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px) type类型参数 （2）progress进度条组件 组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px) 基础展示属性 颜色属性 动画属性 （3）text文本组件 基础属性
小程序-列表块/类式ul-li格式（1）
weixin_33828101的博客
10-20 7258
摘要 目前列表能布局出来，但是目前我个人还没解决的问题是：如果每个列表块都有详情页怎么解决呢？ 1：我的效果图 2.正常的每个都能点击的html 注：上面的代码确实能够实现我的每个【menu2_view】都能点击成功进入每个对应的详情页。但是我个人认为还存在的问题是：相同的代码太多，相同列表一多，容易拖慢页面的加载。 2：小程序模块 <view class...
微信小程序最详细的rich-text使用方法
热门推荐
qq_41616604的博客
08-24 7万+
关于微信小程序rich-text的使用方法 近期开始写一个电商类型的微信小程序。其中在商品详情页，为了展示商品的图文不得不使用富文本编辑器。 这里简单的描述下小程序rich-text 这是一个前面代码构成，其中rich-text节点中nodes绑定的就是我们的内容 然后在page里面定义html这个参数（注意html类型为字符串） 最后通过在后端返回的数据，在...
微信小程序|组件-富文本rich-text
准提童子的专栏
09-17 2102
1. 效果图 2. wxml代码 &lt;!-- rich-text富文本，可渲染html --&gt; &lt;view class="page-body"&gt; &lt;view class="page-section"&gt; &lt;view class="page-section-title"&gt;传入html字符串&lt;/view&amp
小程序rich-text里多张图片自适应
暖栀的博客
04-19 1万+
&lt;rich-text nodes="{{detail_tb}}"&gt; &lt;/rich-text&gt;这个是wxml里&lt;rich-text&gt;富文本这个写在js里：var _that =this;_that.setData({ detail_tb: res.data.replace(/\&lt;img/gi, '&lt;img style="max-wid...
小程序rich-text 图片太大问题
Pinellia
05-25 1万+
wxml文件下 &lt;view class="find-content"&gt; &lt;rich-text nodes="{{weeklyDetail.content}}" type='text'&gt;&lt;/rich-text&gt;&lt;/view&gt;js文件下 f1.getWeeklyById(id, res =&gt; { let content = res.
微信小程序rich-text
07-27
你可以在小程序的wxml文件中添加rich-text组件，并在对应的js文件中设置content属性来指定要显示的富文本内容。 例如，在wxml文件中添加rich-text组件： ```html <rich-text nodes="{{content}}"></rich-text> ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值