Media 媒体对象

用于在一个内容块的左边或右边展示一个多媒体内容。

使用指南

在 page.json 中引入组件

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

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Media</view>
  4. <view class="page__desc">媒体对象</view>
  5. </view>
  6. <view class="page__bd">
  7. <view class="sub-title">Default</view>
  8. <wux-media title="标题一" label="由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。"></wux-media>
  9. <view class="sub-title">Thumb</view>
  10. <wux-media thumb="https://wux.cdn.cloverstd.com/logo.png" title="标题一" label="由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。"></wux-media>
  11. <view class="sub-title">Custom thumb style</view>
  12. <wux-media thumb="https://wux.cdn.cloverstd.com/logo.png" thumb-style="border-radius: 50%" title="标题一" label="由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。"></wux-media>
  13. <view class="sub-title">Nesting</view>
  14. <wux-media align="flex-start" thumb="https://wux.cdn.cloverstd.com/logo.png" title="标题一" label="由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。">
  15. <wux-media align="flex-start" thumb="https://wux.cdn.cloverstd.com/logo.png" title="标题一" label="由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。"></wux-media>
  16. </wux-media>
  17. </view>
  18. </view>

视频演示

Media

API

Media props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-media
title string 标题 -
thumb string 标题图片 -
thumbStyle string,object 标题图片样式 -
label string 标题辅助内容 -
align string 对齐方式,可选值为 start、center、end、baseline、stretch center

Media slot

名称 描述
- 自定义内容

Media externalClasses

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