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

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

xxx.wxml

 <rich-text nodes="{{nodes}}" class='nodes'>rich-text>

在nodes数据里面，我们可以看出层次关系，name定义节点为“ul”，attrs定义它的style样式，也可以通过绑定class名，在css里再定义样式。节点ul的子节点li定义在children数组里，li下如果还要书写文字内容，可以在li的chchildren数组里再定义一个children，它们都是通过写name，attrs这些属性来实现html页面的结构。

xxx.js

data: {
    nodes: [{
      name: "ul",
      attrs: {
        style: "",
        class: "nodes_ul"
      },
      children: [
        {
          name: "li",
          attrs: {
            style: "",
            class: "nodes_li"
          },
          children: [{
            type: "text",
            text: '礼品卡请在有效期内登录官网进行绑定使用'
          }],
        }, {
          name: "li",
          attrs: {
            style: "",
            class: "nodes_li"
          },
          children: [{
            type: "text",
            text: '流量包为当月有效，请及时使用'
          }],
        }]
    }],
  }

xxx.wxss

另外你可以在这里定义它们的样式

/* 定义ul的样式 */
.nodes_ul{
  
}
/* 定义li的样式 */
.nodes_li{

}