极品小程序布局,其他组件

在小程序中也有布局

属性类型默认值必填说明最低版本
hover-classstringnone指定按下去的样式类。当 hover-class="none" 时,没有点击态效果1.0.0
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timenumber50按住后多久出现点击态,单位毫秒1.0.0
hover-stay-timenumber400手指松开后点击态保留时间,单位毫秒1.0.0

横向布局

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
</view>

在这里插入图片描述
纵向布局

<view class="container">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

在这里插入图片描述
小程序中的媒体组件audio

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
属性类型默认值必填说明最低版本
idstringaudio 组件的唯一标识符1.0.0
srcstring要播放音频的资源地址1.0.0
loopbooleanfalse是否循环播放1.0.0
controlsbooleanfalse是否显示默认控件1.0.0
posterstring默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效1.0.0
namestring未知音频默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效1.0.0
authorstring未知作者默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效1.0.0
binderroreventhandle当发生错误时触发 error 事件,detail = {errMsg:MediaError.code}1.0.0
bindplayeventhandle当开始/继续播放时触发play事件1.0.0
bindpauseeventhandle当暂停播放时触发 pause 事件1.0.0
bindtimeupdateeventhandle当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}1.0.0
bindendedeventhandle当播放到末尾时触发 ended 事件1.0.0

小程序音频组件live-player

属性类型默认值必填说明最低版本
srcstring音视频地址。目前仅支持 flv, rtmp 格式1.7.0
modestringlive模式1.7.0
autoplaybooleanfalse自动播放1.7.0
mutedbooleanfalse是否静音1.7.0
orientationstringvertical画面方向1.7.0
object-fitstringcontain填充模式,可选值有 containfillCrop1.7.0
background-mutebooleanfalse进入后台时是否静音(已废弃,默认退后台静音)1.7.0
min-cachenumber1最小缓冲区,单位s(RTC 模式推荐 0.2s)1.7.0
max-cachenumber3最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。1.7.0
sound-modestringspeaker声音输出方式1.9.90
auto-pause-if-navigatebooleantrue当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放2.5.0
auto-pause-if-open-nativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放2.5.0
picture-in-picture-modestring/Array设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: [“push”, “pop”])2.10.3
bindstatechangeeventhandle播放状态变化事件,detail = {code}1.7.0
bindfullscreenchangeeventhandle全屏变化事件,detail = {direction, fullScreen}1.7.0
bindnetstatuseventhandle网络状态通知,detail = {info}1.9.0
bindaudiovolumenotifyeventhandler播放音量大小通知,detail = {}2.10.0
bindenterpictureinpictureeventhandler播放器进入小窗2.11.0
bindleavepictureinpictureeventhandler播放器退出小窗2.11.0
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值