Divider 分割线

用于区隔内容的分割线。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Divider",
  3. "usingComponents": {
  4. "wux-divider": "../../dist/divider/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Divider</view>
  4. <view class="page__desc">分割线</view>
  5. </view>
  6. <view class="page__bd">
  7. <wux-divider show-text="{{ false }}" />
  8. <wux-divider show-text="{{ false }}" dashed />
  9. <wux-divider position="left" text="Wux Weapp" />
  10. <wux-divider text="Wux Weapp" />
  11. <wux-divider position="right" text="Wux Weapp" />
  12. <wux-divider dashed position="left" text="Wux Weapp" />
  13. <wux-divider dashed text="Wux Weapp" />
  14. <wux-divider dashed position="right" text="Wux Weapp" />
  15. <wux-divider>
  16. <view class="loadmore">
  17. <view class="loading"></view>
  18. <text class="text">正在加载</text>
  19. </view>
  20. </wux-divider>
  21. </view>
  22. </view>

视频演示

Divider

API

Divider props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-divider
position string 分割线文字的位置,可选值为 left、center、right center
dashed boolean 是否显示虚线 false
text string 文字 -
showText boolean 是否显示文字 true

Divider slot

名称 描述
- 自定义内容

Divider externalClasses

名称 描述
wux-class 根节点样式类