Python-微信小程序(组件)

视图容器

  • view

    • 简介
      视图容器,类似于 div 标签
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      hover-class string none 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 1.0.0
      hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
      hover-start-time number 50 按住后多久出现点击态,单位毫秒 1.0.0
      hover-stay-time number 400 手指松开后点击态保留时间,单位毫秒 1.0.0

基础内容

  • icon

    • 简介
      图标。组件属性的长度单位默认为 px,2.4.0起支持传入单位 (rpx/px)。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      type string icon 的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear 1.0.0
      size number/string 23 icon 的大小 1.0.0
      color string icon 的颜色,同 css 的 color 1.0.0
  • progress

    • 简介
      • 进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
      • 基础库 1.0.0 开始支持,低版本需做兼容处理
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      percent number 百分比0~100 1.0.0
      show-info boolean false 在进度条右侧显示百分比 1.0.0
      border-radius number/string 0 圆角大小 2.3.1
      font-size number/string 16 右侧百分比字体大小 2.3.1
      stroke-width number/string 6 进度条线的宽度 1.0.0
      color string #09BB07 进度条颜色(请使用activeColor) 1.0.0
      activeColor string #09BB07 已选择的进度条的颜色 1.0.0
      backgroundColor string #EBEBEB 未选择的进度条的颜色 1.0.0
      active boolean false 进度条从左往右的动画 1.0.0
      active-mode string backwards backwards: 动画从头播;forwards:动画从上次结束点接着播 1.7.0
      duration number 30 进度增加1%所需毫秒数 2.8.2
    • 示例
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <view class="progress-box">
      <progress percent="20" show-info stroke-width="3"/>
      </view>

      <view class="progress-box">
      <progress percent="40" active stroke-width="3" />
      <icon class="progress-cancel" type="cancel"></icon>
      </view>

      <view class="progress-box">
      <progress percent="60" active stroke-width="3" />
      </view>

      <view class="progress-box">
      <progress percent="80" color="#10AEFF" active stroke-width="3" />
      </view>
  • text

    • 简介
      文本。编写文本信息,类似于 span 标签。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      selectable boolean false 文本是否可选 (已废弃) 1.1.0
      user-select boolean false 文本是否可选,该属性会使文本节点显示为 inline-block 2.12.1
      space string 显示连续空格 1.4.0
      decode boolean false 是否解码 1.4.0
    • space 参数
      说明
      ensp 中文字符空格一半大小
      emsp 中文字符空格大小
      nbsp 根据字体设置的空格大小

表单组件

  • button

    • 简介
      按钮。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      size string default 按钮的大小 1.0.0
      type string default 按钮的样式类型 1.0.0
      plain boolean false 按钮是否镂空,背景色透明 1.0.0
      disabled boolean false 是否禁用 1.0.0
      loading boolean false 名称前是否带 loading 图标 1.0.0
      form-type string 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件 1.0.0
      open-type string 微信开放能力 1.1.0
      hover-class string button-hover 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果 1.0.0
      hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
      hover-start-time number 20 按住后多久出现点击态,单位毫秒 1.0.0
      hover-stay-time number 70 手指松开后点击态保留时间,单位毫秒 1.0.0
      lang string en 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 1.3.0
      session-from string 会话来源,open-type=”contact” 时有效 1.4.0
      send-message-title string 当前标题 会话内消息卡片标题,open-type=”contact” 时有效 1.5.0
      send-message-path string 当前分享路径 会话内消息卡片点击跳转小程序路径,open-type=”contact” 时有效 1.5.0
      send-message-img string 截图 会话内消息卡片图片,open-type=”contact” 时有效 1.5.0
      app-parameter string 打开 APP 时,向 APP 传递的参数,open-type=launchApp 时有效 1.9.5
      show-message-card boolean false 是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示” 可能要发送的小程序” 提示,用户点击后可以快速发送小程序消息,open-type=”contact” 时有效 1.5.0
      bindgetuserinfo eventhandle 用户点击该按钮时,会返回获取到的用户信息,回调的 detail 数据与 wx.getUserInfo返回的一致,open-type=”getUserInfo” 时有效 1.3.0
      bindcontact eventhandle 客服消息回调,open-type=”contact” 时有效 1.5.0
      bindgetphonenumber eventhandle 获取用户手机号回调,open-type=getPhoneNumber 时有效 1.2.0
      binderror eventhandle 当使用开放能力时,发生错误的回调,open-type=launchApp 时有效 1.9.5
      bindopensetting eventhandle 在打开授权设置页后回调,open-type=openSetting 时有效 2.0.7
      bindlaunchapp eventhandle 打开 APP 成功的回调,open-type=launchApp 时有效 2.4.4
    • size 参数
      说明
      default 默认大小
      mini 小尺寸
    • type 参数
      | 值 | 说明 |
      | ------- | ---- |
      | primary | 绿色 |
      | default | 白色 |
      | warn | 红色 |
    • form-type 参数
      | 值 | 说明 |
      | ------ | -------- |
      | submit | 提交表单 |
      | reset | 重置表单 |
    • open-type 参数
      | 值 | 说明 | 最低版本 |
      | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
      | contact | 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明小程序插件中不能使用) | 1.1.0 |
      | share | 触发用户转发,使用前建议先阅读使用指引 | 1.2.0 |
      | getPhoneNumber | 获取用户手机号,可以从 bindgetphonenumber 回调中获取到用户信息,具体说明小程序插件中不能使用) | 1.2.0 |
      | getUserInfo | 获取用户信息,可以从 bindgetuserinfo 回调中获取到用户信息 (小程序插件中不能使用) | 1.3.0 |
      | launchApp | 打开 APP,可以通过 app-parameter 属性设定向 APP 传的参数具体说明 | 1.9.5 |
      | openSetting | 打开授权设置页 | 2.0.7 |
      | feedback | 打开 “意见反馈” 页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单 “客服反馈” 页面获取到反馈内容 | 2.1.0 |
    • lang 参数
      说明
      en 英文
      zh_CN 简体中文
      zh_TW 繁体中文
  • checkbox

    • 简介
      多选项目。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      value string checkbox标识,选中时触发 checkbox-group的 change 事件,并携带 checkbox 的 value 1.0.0
      disabled boolean false 是否禁用 1.0.0
      checked boolean false 当前是否选中,可用来设置默认选中 1.0.0
      color string #09BB07 checkbox 的颜色,同 css 的 color 1.0.0
  • editor

    • 简介
      • 富文本编辑器,可以对图片、文字进行编辑。
      • 编辑器导出内容支持带标签的 html 和纯文本的 text,编辑器内部采用 delta 格式进行存储。
      • 通过 setContents 接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过 delta 进行插入。
      • 富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的 html 时,需要额外引入 [这段样式](data:application/zip;base64,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),并维护 <ql-container><ql-editor></ql-editor></ql-container> 的结构。
      • 图片控件仅初始化时设置有效。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      read-only boolean false 设置编辑器为只读 2.7.0
      placeholder string 提示信息 2.7.0
      show-img-size boolean false 点击图片时显示图片大小控件 2.7.0
      show-img-toolbar boolean false 点击图片时显示工具栏控件 2.7.0
      show-img-resize boolean false 点击图片时显示修改尺寸控件 2.7.0
      bindready eventhandle 编辑器初始化完成时触发 2.7.0
      bindfocus eventhandle 编辑器聚焦时触发,event.detail = {html, text, delta} 2.7.0
      bindblur eventhandle 编辑器失去焦点时触发,detail = {html, text, delta} 2.7.0
      bindinput eventhandle 编辑器内容改变时触发,detail = {html, text, delta} 2.7.0
      bindstatuschange eventhandle 通过 Context 方法改变编辑器内样式时触发,返回选区已设置的样式 2.7.0
  • form

    • 简介
      • 表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。
      • 当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      report-submit boolean false 是否返回 formId 用于发送模板消息 1.0.0
      report-submit-timeout number 0 等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。如果失败,将返回 requestFormId:fail 开头的 formId 2.6.2
      bindsubmit eventhandle 携带 form 中的数据触发 submit 事件,event.detail = {value : {‘name’: ‘value’} , formId: ‘’} 1.0.0
      bindreset eventhandle 表单重置时会触发 reset 事件 1.0.0
  • input

    • 简介
      输入框。该组件是原生组件,使用时请注意相关限制

    • 参数

      属性 类型 默认值 必填 说明 最低版本
      value string 输入框的初始内容 1.0.0
      type string text input 的类型 1.0.0
      password boolean false 是否是密码类型 1.0.0
      placeholder string 输入框为空时占位符 1.0.0
      placeholder-style string 指定 placeholder 的样式 1.0.0
      placeholder-class string input-placeholder 指定 placeholder 的样式类 1.0.0
      disabled boolean false 是否禁用 1.0.0
      maxlength number 140 最大输入长度,设置为 -1 的时候不限制最大长度 1.0.0
      cursor-spacing number 0 指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 1.0.0
      auto-focus boolean false (即将废弃,请直接使用 focus) 自动聚焦,拉起键盘 1.0.0
      focus boolean false 获取焦点 1.0.0
      confirm-type string done 设置键盘右下角按钮的文字,仅在 type=’text’时生效 1.1.0
      always-embed boolean false 强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) 2.10.4
      confirm-hold boolean false 点击键盘右下角按钮时是否保持键盘不收起 1.1.0
      cursor number 指定 focus 时的光标位置 1.5.0
      selection-start number -1 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 1.9.0
      selection-end number -1 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 1.9.0
      adjust-position boolean true 键盘弹起时,是否自动上推页面 1.9.90
      hold-keyboard boolean false focus 时,点击页面的时候不收起键盘 2.8.2
      safe-password-cert-path string 安全键盘加密公钥的路径,只支持包内路径 2.18.0
      safe-password-length number 安全键盘输入密码长度 2.18.0
      safe-password-time-stamp number 安全键盘加密时间戳 2.18.0
      safe-password-nonce string 安全键盘加密盐值 2.18.0
      safe-password-salt string 安全键盘计算 hash 盐值,若指定 custom-hash 则无效 2.18.0
      safe-password-custom-hash string 安全键盘计算 hash 的算法表达式,如 md5(sha1('foo' + sha256(sm3(password + 'bar')))) 2.18.0
      bindinput eventhandle 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。 1.0.0
      bindfocus eventhandle 输入框聚焦时触发,event.detail = {value, height},height 为键盘高度,在基础库 1.9.90 起支持 1.0.0
      bindblur eventhandle 输入框失去焦点时触发,event.detail = {value, encryptedValue, encryptError} 1.0.0
      bindconfirm eventhandle 点击完成按钮时触发,event.detail = {value} 1.0.0
      bindkeyboardheightchange eventhandle 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} 2.7.0
    • type 参数

      说明 最低版本
      text 文本输入键盘
      number 数字输入键盘
      idcard 身份证输入键盘
      digit 带小数点的数字键盘
      safe-password 密码安全输入键盘 指引 2.18.0
    • confirm-type 参数

      说明
      send 右下角按钮为 “发送”
      search 右下角按钮为 “搜索”
      next 右下角按钮为 “下一个”
      go 右下角按钮为 “前往”
      done 右下角按钮为 “完成”
    • 双向绑定

      1
      2
      3
      <!-- telephone.wxml -->
      <view>新输入了:{{message}}</view>
      <input value="{{message}}" bindinput="bindTxt"></input>
      1
      2
      3
      4
      /* telephone.wxss */
      input {
      border: 1rpx solid darkorange;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      // telephone.js
      Page({
      ......
      data: {
      message: ''
      },

      bindTxt: function (e) {
      console.log(e.detail.value)
      this.setData({
      message: e.detail.value
      })
      },
      )}
  • label

    • 简介
      • 用来改进表单组件的可用性。
      • 使用 for 属性找到对应的 id,或者将控件放在该标签下,当点击时,就会触发对应的控件。 for 优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有:button, checkbox, radio, switch
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      for string 绑定控件的 id 1.0.0
  • radio

    • 简介
      单选项目。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      value string radio 标识。当该 radio 选中时,radio-group 的 change 事件会携带 radio的 value 1.0.0
      checked boolean false 当前是否选中 1.0.0
      disabled boolean false 是否禁用 1.0.0
      color string #09BB07 radio 的颜色,同 css 的 color 1.0.0
  • slider

    • 简介
      滑动选择器。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      min number 0 最小值 1.0.0
      max number 100 最大值 1.0.0
      step number 1 步长,取值必须大于 0,并且可被 (max - min) 整除 1.0.0
      disabled boolean false 是否禁用 1.0.0
      value number 0 当前取值 1.0.0
      color color #e9e9e9 背景条的颜色(请使用 backgroundColor) 1.0.0
      selected-color color #1aad19 已选择的颜色(请使用 activeColor) 1.0.0
      activeColor color #1aad19 已选择的颜色 1.0.0
      backgroundColor color #e9e9e9 背景条的颜色 1.0.0
      block-size number 28 滑块的大小,取值范围为 12 - 28 1.9.0
      block-color color #ffffff 滑块的颜色 1.9.0
      show-value boolean false 是否显示当前 value 1.0.0
      bindchange eventhandle 完成一次拖动后触发的事件,event.detail = {value} 1.0.0
      bindchanging eventhandle 拖动过程中触发的事件,event.detail = {value} 1.7.0
  • switch

    • 简介
      开关选择器。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      checked boolean false 是否选中 1.0.0
      disabled boolean false 是否禁用 1.0.0
      type string switch 样式,有效值:switch, checkbox 1.0.0
      color string #04BE02 switch 的颜色,同 css 的 color 1.0.0
      bindchange eventhandle checked 改变时触发 change 事件,event.detail={value} 1.0.0
  • textarea

    • 简介
      多行输入框。该组件是原生组件,使用时请注意相关限制。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      value string 输入框的内容 1.0.0
      placeholder string 输入框为空时占位符 1.0.0
      placeholder-style string 指定 placeholder 的样式,目前仅支持 color,font-size 和 font-weight 1.0.0
      placeholder-class string textarea-placeholder 指定 placeholder 的样式类 1.0.0
      disabled boolean false 是否禁用 1.0.0
      maxlength number 140 最大输入长度,设置为 -1 的时候不限制最大长度 1.0.0
      auto-focus boolean false 自动聚焦,拉起键盘。 1.0.0
      focus boolean false 获取焦点 1.0.0
      auto-height boolean false 是否自动增高,设置 auto-height 时,style.height 不生效 1.0.0
      fixed boolean false 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true 1.0.0
      cursor-spacing number 0 指定光标与键盘的距离。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 1.0.0
      cursor number -1 指定 focus 时的光标位置 1.5.0
      show-confirm-bar boolean true 是否显示键盘上方带有” 完成 “按钮那一栏 1.6.0
      selection-start number -1 光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 1.9.0
      selection-end number -1 光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 1.9.0
      adjust-position boolean true 键盘弹起时,是否自动上推页面 1.9.90
      hold-keyboard boolean false focus 时,点击页面的时候不收起键盘 2.8.2
      disable-default-padding boolean false 是否去掉 iOS 下的默认内边距 2.10.0
      confirm-type string return 设置键盘右下角按钮的文字 2.13.0
      confirm-hold boolean false 点击键盘右下角按钮时是否保持键盘不收起 2.16.0
      bindfocus eventhandle 输入框聚焦时触发,event.detail = {value, height},height 为键盘高度,在基础库 1.9.90 起支持 1.0.0
      bindblur eventhandle 输入框失去焦点时触发,event.detail = {value, cursor} 1.0.0
      bindlinechange eventhandle 输入框行数变化时调用,event.detail = {height: 0, heightRpx: 0, lineCount: 0} 1.0.0
      bindinput eventhandle 当键盘输入时,触发 input 事件,event.detail = {value, cursor, keyCode},keyCode 为键值,目前工具还不支持返回 keyCode 参数。bindinput 处理函数的返回值并不会反映到 textarea 上 1.0.0
      bindconfirm eventhandle 点击完成时, 触发 confirm 事件,event.detail = {value: value} 1.0.0
      bindkeyboardheightchange eventhandle 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} 2.7.0
    • confirm-type 参数
      说明
      send 右下角按钮为 “发送”
      search 右下角按钮为 “搜索”
      next 右下角按钮为 “下一个”
      go 右下角按钮为 “前往”
      done 右下角按钮为 “完成”
      return 右下角按钮为 “换行”

导航

    • 简介
      页面链接。
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      target string self 在哪个目标上发生跳转,默认当前小程序 2.0.7
      url string 当前小程序内的跳转链接 1.0.0
      open-type string navigate 跳转方式 1.0.0
      delta number 1 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 1.0.0
      app-id string target="miniProgram"时有效,要打开的小程序 appId 2.0.7
      path string target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 2.0.7
      extra-data object target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch()App.onShow() 中获取到这份数据。详情 2.0.7
      version string release target="miniProgram"时有效,要打开的小程序版本 2.0.7
      short-link string target="miniProgram"时有效,当传递该参数后,可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 2.18.1
      hover-class string navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果 1.0.0
      hover-stop-propagation boolean false 指定是否阻止本节点的祖先节点出现点击态 1.5.0
      hover-start-time number 50 按住后多久出现点击态,单位毫秒 1.0.0
      hover-stay-time number 600 手指松开后点击态保留时间,单位毫秒 1.0.0
      bindsuccess string target="miniProgram"时有效,跳转小程序成功 2.0.7
      bindfail string target="miniProgram"时有效,跳转小程序失败 2.0.7
      bindcomplete string target="miniProgram"时有效,跳转小程序完成 2.0.7
    • target参数
      说明
      self 当前小程序
      miniProgram 其它小程序
    • open-type参数
      说明 最低版本
      navigate 对应 wx.navigateTowx.navigateToMiniProgram 的功能
      redirect 对应 wx.redirectTo 的功能
      switchTab 对应 wx.switchTab 的功能
      reLaunch 对应 wx.reLaunch 的功能 1.1.0
      navigateBack 对应 wx.navigateBack 的功能 1.1.0
      exit 退出小程序,target="miniProgram"时生效 2.1.0
    • version参数
      说明 最低版本
      develop 开发版
      trial 体验版
      release 正式版,仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。
    • 示例
      1
      2
      <!-- index.wxml -->
      <navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>

媒体组件

  • image

    • 简介
      图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件 ID。
    • 参数
      名称 类型 默认值 必填 说明 最低版本
      src string 图片资源地址 1.0.0
      mode string scaleToFill 图片裁剪、缩放的模式 1.0.0
      webp boolean false 默认不解析 webP 格式,只支持网络资源 2.9.0
      lazy-load boolean false 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 1.5.0
      show-menu-by-longpress boolean false 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片 / 前往群聊 / 打开小程序(若图片中包含对应二维码或小程序码)的菜单 2.7.0
      binderror eventhandle 当错误发生时触发,event.detail = {errMsg} 1.0.0
      bindload eventhandle 当图片载入完毕时触发,event.detail = {height, width} 1.0.0
    • mode 参数
      说明 最低版本
      scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
      aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
      aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
      widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
      heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 2.10.3
      top 裁剪模式,不缩放图片,只显示图片的顶部区域
      bottom 裁剪模式,不缩放图片,只显示图片的底部区域
      center 裁剪模式,不缩放图片,只显示图片的中间区域
      left 裁剪模式,不缩放图片,只显示图片的左边区域
      right 裁剪模式,不缩放图片,只显示图片的右边区域
      top left 裁剪模式,不缩放图片,只显示图片的左上边区域
      top right 裁剪模式,不缩放图片,只显示图片的右上边区域
      bottom left 裁剪模式,不缩放图片,只显示图片的左下边区域
      bottom right 裁剪模式,不缩放图片,只显示图片的右下边区域

导航栏

    • 简介
    • 参数
      属性 类型 默认值 必填 说明 最低版本
      title string 导航条标题 2.9.0
      loading boolean false 是否在导航条显示 loading 加载提示 2.9.0
      front-color string 导航条前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff#000000 2.9.0
      background-color string 导航条背景颜色值,有效值为十六进制颜色 2.9.0
      color-animation-duration number 0 改变导航栏颜色时的动画时长,默认为 0 (即没有动画效果) 2.9.0
      color-animation-timing-func string “linear” 改变导航栏颜色时的动画方式,支持 lineareaseIneaseOuteaseInOut 2.9.0
本文结束 感谢您的阅读
正在加载今日诗词....