微信小程序swiper轮播图 text文本 rich-text富文本

swiper 轮播图

语法:

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
<!--第一个轮播图-->
<swiper-item>
<view class="item">轮播图A</view>
</swiper-item>
<!--第二个轮播图-->
<swiper-item>
  <view class="item">轮播图B</view>
</swiper-item>
<!--第三个轮播图-->
<swiper-item>
  <view class="item">轮播图C</view>
</swiper-item>
</swiper>

常用属性

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点(小圆点)
indicator-color	color	rgba(0,0,0,3)	指示点(小圆点)颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动轮播
interval	number	5000(毫秒)	自动轮播的间隔时间
circular	boolean	false	是否采用衔接滑动(循环滑动:轮播图头尾相连)

text基础文本组件

<view>
手机号支持长按选中: 
<text user-select>13100000000</text>
</view>

常用属性

属性	类型	默认值	说明
user-select	boolean	false	文本是否可选，该属性会使文本节点显示为 inline-block(最低版本:2.12.1)
selectable	boolean	false	文本是否可选 (已废弃)

rich-text富文本组件

将nodes中的内容解析为html元素

• 传入HTML String

<rich-text nodes="<h1 style='color:blue;'>标题1</h1>"></rich-text>

• 传入array

Page({
  data: {
   nodes: [{
      name: 'h1',
      attrs: {
        style: 'color: red;'
      },
      children: [{
        type: 'text',
        text: '标题1'
      }]
    }]
  }
})

<view>
<rich-text nodes="{{nodes}}"></rich-text>
</view>

常用属性

属性	类型	默认值	说明
nodes	array/string	[]	节点列表/HTML String
user-select	boolean	false	文本是否可选，该属性会使文本节点显示为 block(最低版本:2.24.0)

注意事项

• nodes 不推荐使用 String 类型，性能会有所下降
• rich-text 组件内屏蔽所有节点的事件
• name 属性大小写不敏感
• 如果使用了不受信任的 HTML 节点，该节点及其所有子节点将会被移除(属性不支持id,支持class)
• img 标签仅支持网络图片
• 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效