首页 > 微信 > 详细

小程序11-rich-text组件

时间:2020-07-12 22:10:02      阅读:89      评论:0      收藏:0      [点我收藏+]

rich-text是富文本标签,可以将字符串解析成对应标签,类似vue中 v-html功能;其利用nodes属性接收输入的html值,nodes可以接收以下两种类型值:标签字符串 和 对象数组。

.wxml文件

<rich-text nodes="{{html1}}"></rich-text>
<rich-text nodes="{{html2}}"></rich-text>

.js文件

Page({
  data: {
    html1:`<h1>这里是h1标签,富文本会将元素当成HTML标签解析后输出--字符串格式</h1>`,
    html2:[
      {
        // 1 div标签 name属性来指定
        name:‘h1‘,
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class style
          class:‘my_h1‘,
          style:"color:red;"
        },
        // 2 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致
        children:[
          {
            name:"p",
            attrs:[],
            // 放文本
            children:[
              {
                type:"text",
                text:"这里是h1标签,富文本会将元素当成HTML标签解析后输出--数组格式"
              }
            ]
          }
        ]  
      }
    ]
  },
})

 

技术分享图片

 

小程序11-rich-text组件

原文:https://www.cnblogs.com/xufcs/p/13290170.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!