@tarojs/components

@tarojs/components

Version 4.3.0
Published 16 days ago
4.18 MB
10 dependencies
MIT license

Install

npm i @tarojs/components

yarn add @tarojs/components

pnpm add @tarojs/components

Overview

Taro 组件库

Index

Variables

variable Ad

const Ad: ComponentType<AdProps>;

Banner 广告 open weapp, swan, tt, qq @example_react

class App extends Component {
  render () {
    return (
      <Ad
        unitId=''
        adIntervals={60}
        onLoad={() => console.log('ad onLoad')}
        onError={() => console.log('ad onError')}
        onClose={() => console.log('ad onClose')}
      />
    )
  }
}

@example_vue

<template>
  <ad
    unit-id=""
    ad-intervals="60"
    `@load="onLoad"
    `@error="onError"
    `@close="onClose"
  />
</template>

variable AdCustom

const AdCustom: ComponentType<AdCustomProps>;

Banner 广告 open weapp

Example 1

class App extends Component {
  render () {
    return (
      <AdCustom
        unitId=''
        adIntervals={60}
        onLoad={() => console.log('ad onLoad')}
        onError={() => console.log('ad onError')}
        onClose={() => console.log('ad onClose')}
      />
    )
  }
}

variable AnimationVideo

const AnimationVideo: ComponentType<AnimationVideoProps>;

透明视频动画 media swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/animation-video/

variable AnimationView

const AnimationView: ComponentType<AnimationViewProps>;

Lottie 动画 media swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/animation-view-Lottie/

variable ArCamera

const ArCamera: ComponentType<ArCameraProps>;

AR 相机 media swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/media_ar-camera/

variable Audio

const Audio: ComponentType<AudioProps>;

音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的 Taro.createInnerAudioContext 接口 media

Deprecated

weapp, swan, qq, h5, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Audio
          src='https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46'
          controls={true}
          autoplay={false}
          loop={false}
          muted={true}
          initialTime='30'
          id='video'
        />
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <audio
      id="video"
      src="https://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46"
      :controls="true"
      :autoplay="false"
      :loop="false"
      :muted="true"
    />
  </view>
</template>

variable AwemeData

const AwemeData: ComponentType<AwemeDataProps>;

直播间状态组件 open tt
See Also
- https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/open-capacity/aweme-data/

variable Block

const Block: ComponentType<BlockProps>;

variable Button

const Button: ComponentType<ButtonProps>;

按钮 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageButton extends Component {
  state = {
    btn: [
      {
        text: '页面主操作 Normal',
        size: 'default',
        type: 'primary'
      },
      {
        text: '页面主操作 Loading',
        size: 'default',
        type: 'primary',
        loading: true,
      },
      {
        text: '页面主操作 Disabled',
        size: 'default',
        type: 'primary',
        disabled: true,
      },
      {
        text: '页面次要操作 Normal',
        size: 'default',
        type: 'default'
      },
      {
        text: '页面次要操作 Disabled',
        size: 'default',
        type: 'default',
        disabled: true,
      },
      {
        text: '警告类操作 Normal',
        size: 'default',
        type: 'warn'
      },
      {
        text: '警告类操作 Disabled',
        size: 'default',
        type: 'warn',
        disabled: true,
      }
    ]
  }
  render () {
    return (
      <View className='container'>
        {this.state.btn.map(item => {
          return (
            <Button
              size={item.size ? item.size : ''}
              type={item.type ? item.type : ''}
              loading={item.loading ? item.loading : false}
              disabled={item.disabled ? item.disabled : false}
            >
              {item.text}
            </Button>
          )
        })}
        <Button className='btn-max-w' plain type='primary'>按钮</Button>
        <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
        <Button className='btn-max-w' plain >按钮</Button>
        <Button className='btn-max-w' plain disabled >按钮</Button>
        <Button size='mini' type='primary'>按钮</Button>
        <Button size='mini' >按钮</Button>
        <Button size='mini' type='warn'>按钮</Button>
        <Button openType='getPhoneNumber' onGetPhoneNumber="callback">按钮</Button>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="container">
    <button
      v-for="item in btn"
      :size="item.size ? item.size : ''"
      :type="item.type ? item.type : ''"
      :loading="item.loading ? item.loading : false"
      :disabled="item.disabled ? item.disabled : false"
    >
      {{ item.text }}
    </button>
    <button class="btn-max-w" :plain="true" type="primary">按钮</button>
    <button class="btn-max-w" :plain="true" type="primary" :disabled="true">不可点击的按钮</button>
    <button class="btn-max-w" :plain="true">按钮</button>
    <button class="btn-max-w" :plain="true" :disabled="true">按钮</button>
    <button size="mini" type="primary">按钮</button>
    <button size="mini" >按钮</button>
    <button size="mini" type="warn">按钮</button>
    <button open-type="getPhoneNumber" `@getphonenumber="callback">按钮</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btn: [
        {
          text: '页面主操作 Normal',
          size: 'default',
          type: 'primary'
        },
        {
          text: '页面主操作 Loading',
          size: 'default',
          type: 'primary',
          loading: true,
        },
        {
          text: '页面主操作 Disabled',
          size: 'default',
          type: 'primary',
          disabled: true,
        },
        {
          text: '页面次要操作 Normal',
          size: 'default',
          type: 'default'
        },
        {
          text: '页面次要操作 Disabled',
          size: 'default',
          type: 'default',
          disabled: true,
        },
        {
          text: '警告类操作 Normal',
          size: 'default',
          type: 'warn'
        },
        {
          text: '警告类操作 Disabled',
          size: 'default',
          type: 'warn',
          disabled: true,
        }
      ]
    }
  }
}
</script>

variable Camera

const Camera: ComponentType<CameraProps>;

系统相机 media weapp, alipay, swan, tt, qq, jd, rn, ascf
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

variable Canvas

const Canvas: ComponentType<CanvasProps>;

画布

<Canvas /> 组件的 RN 版本尚未实现。 canvas weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf @example_react

class App extends Components {
  render () {
    // 如果是支付宝小程序，则要加上 id 属性，值和canvasId一致
    return (
      <Canvas style='width: 300px; height: 200px;' canvasId='canvas' />
    )
  }
}

@example_vue

<template>
  <!-- 如果是支付宝小程序，则要加上 id 属性，值和canvasId一致 -->
  <canvas style="width: 300px; height: 200px;" canvas-id="canvas" />
</template>

variable ChannelLive

const ChannelLive: ComponentType<ChannelLiveProps>;

小程序内嵌视频号直播组件，展示视频号直播状态和封面，并无弹窗跳转至视频号。注意：使用该组件打开的视频号视频需要与小程序的主体一致。 media weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/channel-live.html

variable ChannelVideo

const ChannelVideo: ComponentType<ChannelVideoProps>;

小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号。注意：使用该组件打开的视频号视频需要与小程序相同主体或关联主体。 media weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/channel-video.html

variable Checkbox

const Checkbox: ComponentType<CheckboxProps>;

多选项目 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageCheckbox extends Component {
  state = {
    list: [
      {
        value: '美国',
        text: '美国',
        checked: false
      },
      {
        value: '中国',
        text: '中国',
        checked: true
      },
      {
        value: '巴西',
        text: '巴西',
        checked: false
      },
      {
        value: '日本',
        text: '日本',
        checked: false
      },
      {
        value: '英国',
        text: '英国',
        checked: false
      },
      {
        value: '法国',
        text: '法国',
        checked: false
      }
    ]
  }
  render () {
    return (
      <View className='page-body'>
        <View className='page-section'>
          <Text>默认样式</Text>
          <Checkbox value='选中' checked>选中</Checkbox>
          <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
        </View>
        <View className='page-section'>
          <Text>推荐展示样式</Text>
          {this.state.list.map((item, i) => {
            return (
              <Label className='checkbox-list__label' for={i} key={i}>
                <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
              </Label>
            )
          })}
        </View>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="container">
    <view class="page-section">
      <text>默认样式</text>
      <checkbox value="选中" :checked="true">选中</checkbox>
      <checkbox style="margin-left: 20rpx;" value="未选中">未选中</checkbox>
    </view>
    <view class="page-section">
      <text>推荐展示样式(Taro 团队成员):</text>
      <label v-for="item in list" class="checkbox-list__label">
        <checkbox class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</checkbox>
      </label>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          value: '美国',
          text: '美国',
          checked: false
        },
        {
          value: '中国',
          text: '中国',
          checked: true
        },
        {
          value: '巴西',
          text: '巴西',
          checked: false
        },
        {
          value: '日本',
          text: '日本',
          checked: false
        },
        {
          value: '英国',
          text: '英国',
          checked: false
        },
        {
          value: '法国',
          text: '法国',
          checked: false
        }
      ]
    }
  }
}
</script>

variable CheckboxGroup

const CheckboxGroup: ComponentType<CheckboxGroupProps>;

多项选择器，内部由多个checkbox组成 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

Example 1

export default class PageCheckbox extends Component {
  state = {
    list: [
      {
        value: '美国',
        text: '美国',
        checked: false
      },
      {
        value: '中国',
        text: '中国',
        checked: true
      },
      {
        value: '巴西',
        text: '巴西',
        checked: false
      },
      {
        value: '日本',
        text: '日本',
        checked: false
      },
      {
        value: '英国',
        text: '英国',
        checked: false
      },
      {
        value: '法国',
        text: '法国',
        checked: false
      }
    ]
  }
  render () {
    return (
      <View className='page-body'>
        <View className='page-section'>
          <Text>默认样式</Text>
          <Checkbox value='选中' checked>选中</Checkbox>
          <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
        </View>
        <View className='page-section'>
          <Text>推荐展示样式</Text>
          {this.state.list.map((item, i) => {
            return (
              <Label className='checkbox-list__label' for={i} key={i}>
                <Checkbox className='checkbox-list__checkbox' value={item.value} checked={item.checked}>{item.text}</Checkbox>
              </Label>
            )
          })}
        </View>
      </View>
    )
  }
}

variable CommentDetail

const CommentDetail: ComponentType<CommentDetailProps>;

评论详情 open swan
See Also
- https://smartprogram.baidu.com/docs/develop/extended/component-content/comment-detail/

variable CommentList

const CommentList: ComponentType<CommentListProps>;

评论列表 open swan
See Also
- https://smartprogram.baidu.com/docs/develop/extended/component-content/comment-list/

variable ContactButton

const ContactButton: ComponentType<ContactButtonProps>;

智能客服 open alipay
See Also
- https://opendocs.alipay.com/mini/component/contact-button

variable CoverImage

const CoverImage: ComponentType<CoverImageProps>;

覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。 viewContainer weapp, alipay, swan, qq, jd, h5, harmony_hybrid, ascf @example_react

// js
class App extends Components {
  render () {
    return (
      <View className='container'>
      <Video id='myVideo' src='src'>
        <CoverView className='controls'>
          <CoverView className='play' onClick='play'>
            <CoverImage className='img' src='src' />
          </CoverView>
        </CoverView>
      </Video>
    )
  }
}
// css
.container {
  position: relative;
}
.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 225px;
  transform: translate(-50%, -50%);
}

@example_vue

<template>
  <view class="container">
    <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
    </video>
    <cover-view class='controls'>
      <cover-view class='play' `@tap='play'>
        <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
      </cover-view>
    </cover-view>
  </view>
</template>

<style>
.container {
  position: relative;
}
.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 225px;
  transform: translate(-50%, -50%);
}
</style>

variable CoverView

const CoverView: ComponentType<CoverViewProps>;

覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。 viewContainer weapp, alipay, swan, qq, jd, h5, harmony_hybrid, ascf @example_react

// js
class App extends Components {
  render () {
    return (
      <View className='container'>
        <Video id='myVideo' src='src'>
          <CoverView className='controls'>
            <CoverView className='play' onClick='play'>
              <CoverImage className='img' src='src' />
            </CoverView>
          </CoverView>
        </Video>
      </View>
    )
  }
}
// css
.container {
  position: relative;
}
.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 225px;
  transform: translate(-50%, -50%);
}

@example_vue

<template>
  <view class="container">
    <video id='myvideo' src='https://ugccsy.qq.com/uwMROfz2r5zBIaQXGdGnC2dfDma3J1MItM3912IN4IRQvkRM/o31507f7lcd.mp4?sdtfrom=v1010&guid=aa18cf106b7fdb7e40f2d20b206f2b4f&vkey=63B0FCCC7FC3ADC342C166D86571AE02772258CD9B515B065DC68DF3919D8C288AE831D570ED5E8FE0FF3E81E170D04FF11F874BFDDACF7AAA2C0CFF2ACB39FB1A94DAD1AB859BDA53E4DD6DBCDC1217CEF789A9AC079924E2BBC599EED7A1FFDD60A727F2EB7E7B6472CE63DD4B683C9199DFC78A6A6C4D9891E05467C4B64E'>
    </video>
    <cover-view class='controls'>
      <cover-view class='play' `@tap='play'>
        <cover-image class='img' src='https://img10.360buyimg.com/ling/s345x208_jfs/t1/133501/7/9865/382161/5f5ee31fEbdd6a418/0cdc0156ffff3c23.png' />
      </cover-view>
    </cover-view>
  </view>
</template>

<style>
.container {
  position: relative;
}
.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 225px;
  transform: translate(-50%, -50%);
}
</style>

variable CustomWrapper

const CustomWrapper: ComponentType<CustomWrapperProps>;

custom-wrapper 自定义组件包裹器当数据更新层级较深时，可用此组件将需要更新的区域包裹起来，这样更新层级将大大减少 viewContainer weapp, swan, alipay, tt, jd, qq, h5, harmony_hybrid, ascf

Example 1

import { Component } from 'react'
import { CustomWrapper, View, Text } from '@tarojs/components'

export default class C extends Component {
  render () {
    return (
      <View>
        <CustomWrapper>
           <Text>Hello, world!</Text>
        </CustomWrapper>
      </View>
    )
  }
}

variable DoubleTapGestureHandler

const DoubleTapGestureHandler: ComponentType<DoubleTapGestureHandlerProps>;

双击时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, DoubleTapGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <DoubleTapGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </DoubleTapGestureHandler>
    </View>
  )
}

variable DraggableSheet

const DraggableSheet: ComponentType<DraggableSheetProps>;

半屏可拖拽组件该组件需配合 DraggableSheetContext 接口使用。目前仅在 Skyline 渲染引擎下支持。页面内拖拽是一种常见的交互效果，开发者可通过手势系统灵活实现。draggable-sheet 组件封装了常见的交互逻辑，实现起来更加简单。该组件需结合 scroll-view 使用。scroll-view 组件声明 associative-container 属性后，可与 draggable-sheet 关联起来。 skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/draggable-sheet.html

variable Editor

const Editor: ComponentType<EditorProps>;

富文本编辑器，可以对图片、文字进行编辑。

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

通过 setContents 接口设置内容时，解析插入的 html 可能会由于一些非法标签导致解析错误，建议开发者在小程序内使用时通过 delta 进行插入。

富文本组件内部引入了一些基本的样式使得内容可以正确的展示，开发时可以进行覆盖。需要注意的是，在其它组件或环境中使用富文本组件导出的 html 时，需要额外引入这段样式，并维护 <ql-container><ql-editor></ql-editor></ql-container> 的结构。

图片控件仅初始化时设置有效。

*编辑器内支持部分 HTML 标签和内联样式，不支持 **class** 和 **id*** forms weapp, jd, ascf @example_react

class App extends Components {
  state = {
    placeholder: '来，输入隔壁的名字试试...'
  }

  editorReady = e => {
    Taro.createSelectorQuery().select('#editor').context((res) => {
      this.editorCtx = res.context
    }).exec()
  }

  undo = e => {
    this.editorCtx.undo()
  }

  render () {
    return (
      <View>
        <Editor id='editor' className='editor' placeholder={this.state.placeholder} onReady={this.editorReady}></Editor>
        <Button type='warn' onClick={this.undo}>撤销</Button>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="container">
    <editor id="editor" class="editor" :placeholder="placeholder" `@ready="editorReady"></editor>
    <button type="warn" `@tap="undo">撤销</button>
  </view>
</template>

<script>
  import Taro from '@tarojs/taro'
  export default {
    data() {
      return {
        placeholder: '来，输入隔壁的名字试试...'
      }
    },
    methods: {
      editorReady() {
        Taro.createSelectorQuery().select('#editor').context((res) => {
          this.editorCtx = res.context
        }).exec()
      },
      undo() {
        this.editorCtx.undo()
      }
    }
  }
</script>

variable FollowSwan

const FollowSwan: ComponentType<FollowSwanProps>;

关注小程序 open swan
See Also
- https://smartprogram.baidu.com/docs/develop/extended/component-content/follow-swan/

variable ForcePressGestureHandler

const ForcePressGestureHandler: ComponentType<ForcePressGestureHandlerProps>;

iPhone 设备重按时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, ForcePressGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <ForcePressGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </ForcePressGestureHandler>
    </View>
  )
}

variable Form

const Form: ComponentType<FormProps>;

表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

class App extends Component {

  formSubmit = e => {
    console.log(e)
  }

  formReset = e => {
    console.log(e)
  }

  render () {
    return (
      <Form onSubmit={this.formSubmit} onReset={this.formReset} >
        <View className='example-body'>
          <Switch name='switch' className='form-switch'></Switch>
        </View>
      </Form>
    )
  }
}

@example_vue

<template>
  <form `@submit="formSubmit" `@reset="formReset" >
      <view class="taro-example-body">
        <switch name="switch" class="form-switch"></Switch>
      </view>
      <view class="taro-example-btns">
        <button form-type="submit">Submit</button>
        <button type="default" form-type="reset">Reset</button>
    </view>
  </form>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    formSubmit (e) {
      console.log(e)
    },

    formReset (e) {
      console.log(e)
    }
  }
}
</script>

variable FunctionalPageNavigator

const FunctionalPageNavigator: ComponentType<FunctionalPageNavigatorProps>;

仅在插件中有效，用于跳转到插件功能页 navig weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/functional-page-navigator.html

variable GridBuilder

const GridBuilder: ComponentType<GridBuilderProps>;

网格构造器，仅支持作为 <scroll-view type="custom"> 模式的直接子节点，仅 Skyline 支持。 skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/grid-builder.html

variable GridView

const GridView: ComponentType<GridViewProps>;

网格布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/grid-view.html

variable HorizontalDragGestureHandler

const HorizontalDragGestureHandler: ComponentType<HorizontalDragGestureHandlerProps>;

横向滑动时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, HorizontalDragGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <HorizontalDragGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </HorizontalDragGestureHandler>
    </View>
  )
}

variable Icon

const Icon: ComponentType<IconProps>;

图标。组件属性的长度单位默认为 px base weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Icon size='60' type='success' />
        <Icon size='60' type='info' />
        <Icon size='60' type='warn' color='#ccc' />
        <Icon size='60' type='warn' />
        <Icon size='60' type='waiting' />
        <Icon size='20' type='success_no_circle' />
        <Icon size='20' type='warn' />
        <Icon size='20' type='success' />
        <Icon size='20' type='download' />
        <Icon size='20' type='clear' color='red' />
        <Icon size='20' type='search' />
      </View>
    )
  }
}

@example_vue

variable Image

const Image: ComponentType<ImageProps>;

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式以及云文件ID。

**Note:** 为实现小程序的 mode 特性，在 H5 组件中使用一个 div 容器来对内部的 img 进行展示区域的裁剪，因此请勿使用元素选择器来重置 img 的样式！ media weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Image
          style='width: 300px;height: 100px;background: #fff;'
          src='nerv_logo.png'
        />
        <Image
          style='width: 300px;height: 100px;background: #fff;'
          src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'
        />
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <image
      style="width: 300px;height: 100px;background: #fff;"
      src="nerv_logo.png"
    />
    <image
      style="width: 300px;height: 100px;background: #fff;"
      src="https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67"
    />
  </view>
</template>

variable InlinePaymentPanel

const InlinePaymentPanel: ComponentType<InlinePaymentPanelProps>;

内嵌支付组件 open swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/inline_payment_panel/

variable Input

const Input: ComponentType<InputProps>;

输入框。该组件是原生组件，使用时请注意相关限制 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

class App extends Component {
  render () {
    return (
      <View className='example-body'>
        <Text>可以自动聚焦的 input</Text>
          <Input type='text' placeholder='将会获取焦点' focus/>
          <Text>控制最大输入长度的 input</Text>
          <Input type='text' placeholder='最大输入长度为 10' maxLength='10'/>
          <Text>数字输入的 input</Text>
          <Input type='number' placeholder='这是一个数字输入框'/>
          <Text>密码输入的 input</Text>
          <Input type='password' password placeholder='这是一个密码输入框'/>
          <Text>带小数点的 input</Text>
          <Input type='digit' placeholder='带小数点的数字键盘'/>
          <Text>身份证输入的 input</Text>
          <Input type='idcard' placeholder='身份证输入键盘'/>
          <Text>控制占位符颜色的 input</Text>
          <Input type='text' placeholder='占位符字体是红色的' placeholderStyle='color:red'/>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="example-body">
    <text>可以自动聚焦的 input</text>
    <input type="text" placeholder="将会获取焦点" :focus="true" />
    <text>控制最大输入长度的 input</text>
    <input type="text" placeholder="最大输入长度为 10" maxLength="10"/>
    <text>数字输入的 input</text>
    <input type="number" placeholder="这是一个数字输入框"/>
    <text>密码输入的 input</text>
    <input type="password" :password="true" placeholder="这是一个密码输入框"/>
    <text>带小数点的 input</text>
    <input type="digit" placeholder="带小数点的数字键盘"/>
    <text>身份证输入的 input</text>
    <input type="idcard" placeholder="身份证输入键盘"/>
    <text>控制占位符颜色的 input</text>
    <input type="text" placeholder="占位符字体是红色的" placeholder-style="color:red;"/>
  </view>
</template>

variable KeyboardAccessory

const KeyboardAccessory: ComponentType<KeyboardAccessoryProps>;

设置 Input / Textarea 聚焦时键盘上方 CoverView / CoverImage 工具栏视图。需要配置 Taro 插件 @tarojs/plugin-platform-weapp 的 enablekeyboardAccessory 参数为 true 后才能使用，请参考：[#9548](https://github.com/NervJS/taro/issues/9548#issuecomment-891682216)。

forms weapp

Example 1

// config/index.js
{
  // ...
  plugins: [
    ['@tarojs/plugin-platform-weapp', {
      enablekeyboardAccessory: true
    }]
  ]
}

class App extends Component {
  render () {
    return (
      <Textarea holdKeyboard="{{true}}">
        <KeyboardAccessory className="container" style={{ height: 50 }} >
          <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'green' }}>1</CoverView>
          <CoverView onClick={() => { TODO }} style={{ flex: 1, background: 'red' }}>2</CoverView>
        </KeyboardAccessory>
      </Textarea>
    )
  }
}

variable Label

const Label: ComponentType<LabelProps>;

用来改进表单组件的可用性。

使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：button, checkbox, radio, switch。 forms weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid, ascf @example_react

class App extends Components {

  render () {
    return (
      <RadioGroup>
        <Label className='example-body__label' for='1' key='1'>
          <Radio value='USA'>USA</Radio>
        </Label>
        <Label className='example-body__label' for='2' key='2'>
          <Radio value='CHN' checked>
          CHN
          </Radio>
        </Label>
      </RadioGroup>
    )
  }
}

@example_vue

<template>
  <radio-group>
    <label class="example-body__label" for="1" key="1">
      <radio id="1" value="USA" />
      USA
    </label>
    <label class="example-body__label" for="2" key="2">
      <radio id="2" value="CHN" :checked="true" />
      CHN
    </label>
  </radio-group>
</template>

variable Lifestyle

const Lifestyle: ComponentType<LifestyleProps>;

关注生活号 open alipay
See Also
- https://opendocs.alipay.com/mini/component/lifestyle

variable Like

const Like: ComponentType<LikeProps>;

点赞 open swan
See Also
- https://smartprogram.baidu.com/docs/develop/extended/component-content/like/

variable List

const List: ComponentType<PropsWithChildren<ListProps>>;

variable ListBuilder

const ListBuilder: ComponentType<ListBuilderProps>;

列表构造器，仅支持作为 <scroll-view type="custom"> 模式的直接子节点，仅 Skyline 支持。 skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/list-builder.html

variable ListItem

const ListItem: ComponentType<PropsWithChildren<ViewProps>>;

variable ListView

const ListView: ComponentType<ListViewProps>;

列表布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 skyline weapp, harmony
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/list-view.html

variable LivePlayer

const LivePlayer: ComponentType<LivePlayerProps>;

实时音视频播放。相关api：Taro.createLivePlayerContext
需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。 media weapp, swan, tt, qq, jd @example_react
class App extends Components { render () { return ( <LivePlayer src='url' mode='live' autoplay /> ) } }
@example_vue
<template> <live-player src="url" mode="live" :autoplay="true" /> </template>
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

variable LivePusher

const LivePusher: ComponentType<LivePusherProps>;

实时音视频录制。需要用户授权 scope.camera、scope.record 需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。 media weapp, qq @example_react
class App extends Components { render () { return ( <LivePusher url='url' mode='RTC' autopush /> ) } }
@example_vue
<template> <live-pusher url="url" mode="RTC" :autopush="true" /> </template>
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html

const Login: ComponentType<LoginProps>;

联合登录 / 手机号授权内嵌组件 open swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/login/

variable LongPressGestureHandler

const LongPressGestureHandler: ComponentType<LongPressGestureHandlerProps>;

长按时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, LongPressGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <LongPressGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </LongPressGestureHandler>
    </View>
  )
}

variable Lottie

const Lottie: ComponentType<LottieProps>;

Lottie media alipay
See Also
- https://opendocs.alipay.com/mini/component/lottie

variable Map

const Map: ComponentType<MapProps>;

地图。相关api Taro.createMapContext。 maps weapp, alipay, swan, tt, qq, jd @example_react

class App extends Component {
  onTap () {}
  render () {
    return (
      <Map onClick={this.onTap} />
    )
  }
}

@example_vue

<template>
  <map
    id="map"
    style="width: 100%; height: 300px;"
    longitude="113.324520"
    latitude="23.099994"
    scale="14"
    :markers="markers"
    :polyline="polyline"
    :show-location="true"
    `@regionchange="regionchange"
    `@markertap="markertap"
  />
</template>

<script>
export default {
  data() {
    return {
      markers: [{
        iconPath: "https://avatars2.githubusercontent.com/u/1782542?s=460&u=d20514a52100ed1f82282bcfca6f49052793c889&v=4",
        id: 0,
        latitude: 23.099994,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      polyline: [{
        points: [{
          longitude: 113.3245211,
          latitude: 23.10229
        }, {
          longitude: 113.324520,
          latitude: 23.21229
        }],
        color:"#FF0000DD",
        width: 2,
        dottedLine: true
      }]
    }
  },
  methods: {
    regionchange(e) {
      console.log(e.type)
    },
    markertap(e) {
      console.log("markertap:", e.detail.markerId)
    }
  }
}
</script>

variable MatchMedia

const MatchMedia: ComponentType<MatchMediaProps>;

media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。 weapp, alipay, jd viewContainer @example_react

class App extends Components {
  render () {
    return (
      <View>
        <MatchMedia minWidth="300" maxWidth="600">
          <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
        </MatchMedia>
        <MatchMedia minHeight="400" orientation="landscape">
          <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
        </MatchMedia>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <match-media min-width="300" max-width="500">
      <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
    </match-media>
    <match-media min-height="400" orientation="landscape">
      <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
    </match-media>
  </view>
</template>

variable MovableArea

const MovableArea: ComponentType<MovableAreaProps>;

movable-view 的可移动区域 viewContainer weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf @example_react

class App extends Components {
  render () {
    return (
      <MovableArea style='height: 200px; width: 200px; background: red;'>
        <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'>旅行的意义</MovableView>
      </MovableArea>
    )
  }
}

@example_vue

  <movable-area style='height: 200px; width: 200px; background: red;'>
    <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>在路上</movable-view>
  </movable-area>

variable MovableView

const MovableView: ComponentType<MovableViewProps>;

可移动的视图容器，在页面中可以拖拽滑动。movable-view 必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。 viewContainer weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid @example_react

class App extends Components {
  render () {
    return (
      <MovableArea style='height: 200px; width: 200px; background: red;'>
        <MovableView style='height: 50px; width: 50px; background: blue;' direction='all'></MovableView>
      </MovableArea>
    )
  }
}

@example_vue

  <movable-area style='height: 200px; width: 200px; background: red;'>
    <movable-view style='height: 50px; width: 50px; background: blue;' direction='all'>带我走</movable-view>
  </movable-area>

variable NativeSlot

const NativeSlot: ComponentType<NativeSlotProps>;

编译的原生组件支持使用 slot 插槽 viewContainer weapp, swan, alipay, tt, jd, qq, h5, harmony_hybrid 3.5.7+

Example 1

import { NativeSlot, View } from '@tarojs/components'

export default function () {
  render () {
    return (
      <View>
        <NativeSlot />
      </View>
    )
  }
}

variable NavigationBar

const NavigationBar: ComponentType<NavigationBarProps>;

页面导航条配置节点，用于指定导航栏的一些属性。只能是 PageMeta 组件内的第一个节点，需要配合它一同使用。通过这个节点可以获得类似于调用 Taro.setNavigationBarTitle Taro.setNavigationBarColor 等接口调用的效果。
:::info Taro v3.6.19 开始支持需要配合 PageMeta 组件使用 :::
navig weapp, harmony
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html

variable Navigator

const Navigator: ComponentType<NavigatorProps>;

页面链接 navig weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

variable NestedScrollBody

const NestedScrollBody: ComponentType<NestedScrollBodyProps>;

嵌套 scroll-view 场景中属于里层 scroll-view 的节点，仅支持作为 <scroll-view type="nested"> 模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染。具体用法可参考 scroll-view skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-body.html

variable NestedScrollHeader

const NestedScrollHeader: ComponentType<NestedScrollHeaderProps>;

嵌套 scroll-view 场景中属于外层 scroll-view 的节点，仅支持作为 <scroll-view type="nested"> 模式的直接子节点。不支持复数子节点，渲染时会取其第一个子节点来渲染。具体用法可参考 scroll-view skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/nested-scroll-header.html

variable OfficialAccount

const OfficialAccount: ComponentType<OfficialAccountProps>;

公众号关注组件。当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。
Tips 使用组件前，需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。
在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:
当小程序从扫小程序码场景（场景值1047，场景值1124）打开时当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态 open weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html

variable OpenContainer

const OpenContainer: ComponentType<OpenContainerProps>;

容器转场动画组件点击 OpenContainer 组件，当使用 wx.navigateTo 跳转下一页面时，对其子节点和下一个页面进行过渡。下个页面从 OpenContainer 所在位置大小渐显放大，同时 OpenContainer 内容渐隐，过渡效果包含背景色、圆角和阴影。源页面 OpenContainer 为 closed 状态，转场动画后为 open 状态。 skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/open-container.html

variable OpenData

const OpenData: ComponentType<OpenDataProps>;

用于展示平台开放的数据 open weapp, swan, tt, qq @example_react

class App extends Component {
  render () {
    return (
      <OpenData type='userAvatarUrl'/>
    )
  }
}

@example_vue

<template>
  <open-data type="userAvatarUrl" />
</template>

variable OpenEmbeddedAtomicservice

const OpenEmbeddedAtomicservice: ComponentType<OpenEmbeddedAtomicserviceProps>;

OpenEmbeddedAtomicservice media ascf
See Also
- https://developer.huawei.com/consumer/cn/doc/atomic-ascf/components-open-embedded-atomicservice

variable PageContainer

const PageContainer: ComponentType<PageContainerProps>;

页面容器
小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。
Bug & Tip 1. tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器 2. tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面 viewContainer weapp, alipay, jd, rn
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html

variable PageMeta

const PageMeta: ComponentType<PageMetaProps>;

页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。通过这个节点可以获得类似于调用 Taro.setBackgroundTextStyle Taro.setBackgroundColor 等接口调用的效果。

:::info Taro v3.6.19 开始支持开发者需要在页面配置里添加：enablePageMeta: true :::

weapp, alipay, harmony @example_react

// page.config.ts
export default definePageConfig({ enablePageMeta: true, ... })

// page.tsx
function Index () {
  return (
    <View>
     <PageMeta
       pageStyle={myPageStyle}
       onScroll={handleScroll}
     >
       <NavigationBar title={title} />
     </PageMeta>
   </View>
  )
}

@example_vue

<!-- page.config.ts -->
<!-- export default definePageConfig({ enablePageMeta: true, ... }) -->

<!-- page.vue -->
<template>
  <page-meta
    :page-style="myPageStyle"
    `@scroll="handleScroll"
  >
    <navigation-bar :title="title" />
  </page-meta>
</template>

variable PanGestureHandler

const PanGestureHandler: ComponentType<PanGestureHandlerProps>;

拖动（横向/纵向）时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, PanGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <PanGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </PanGestureHandler>
    </View>
  )
}

variable Picker

const Picker: ComponentType<
    | PickerMultiSelectorProps
    | PickerTimeProps
    | PickerDateProps
    | PickerRegionProps
    | PickerSelectorProps
>;

从底部弹起的滚动选择器 forms weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PagePicker extends Component {
  state = {
    selector: ['美国', '中国', '巴西', '日本'],
    selectorChecked: '美国',
    timeSel: '12:01',
    dateSel: '2018-04-22'
  }

  onChange = e => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value]
    })
  }

  onTimeChange = e => {
    this.setState({
      timeSel: e.detail.value
    })
  }
  onDateChange = e => {
    this.setState({
      dateSel: e.detail.value
    })
  }

  render () {
    return (
      <View className='container'>
        <View className='page-body'>
          <View className='page-section'>
            <Text>地区选择器</Text>
            <View>
              <Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
                <View className='picker'>
                  当前选择：{this.state.selectorChecked}
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text>时间选择器</Text>
            <View>
              <Picker mode='time' onChange={this.onTimeChange}>
                <View className='picker'>
                  当前选择：{this.state.timeSel}
                </View>
              </Picker>
            </View>
          </View>
          <View className='page-section'>
            <Text>日期选择器</Text>
            <View>
              <Picker mode='date' onChange={this.onDateChange}>
                <View className='picker'>
                  当前选择：{this.state.dateSel}
                </View>
              </Picker>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="page-body">
    <view class="page-section">
      <text>地区选择器</text>
      <view>
        <picker mode="selector" :range="selector" `@change="onChange">
          <view class="picker">
            当前选择：{{selectorChecked}}
          </view>
        </picker>
      </view>
    </view>
    <view class="page-section">
      <text>时间选择器</text>
      <view>
        <picker mode="time" `@change="onTimeChange">
          <view class="picker">
            当前选择：{{timeSel}}
          </view>
        </picker>
      </view>
    </view>
    <view class="page-section">
      <text>日期选择器</text>
      <view>
        <picker mode="date" `@change="onDateChange">
          <view class="picker">
            当前选择：{{dateSel}}
          </view>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        selector: ['美国', '中国', '巴西', '日本'],
        selectorChecked: '美国',
        timeSel: '12:01',
        dateSel: '2018-04-22'
      }
    },
    methods: {
      onChange: function(e) {
        this.selectorChecked = this.selector[e.detail.value]
      },

      onTimeChange: function(e) {
        this.timeSel = e.detail.value
      },

      onDateChange: function(e) {
        this.dateSel = e.detail.value
      }
    }
  }
</script>

variable PickerView

const PickerView: ComponentType<PickerViewProps>;

嵌入页面的滚动选择器其中只可放置 picker-view-column 组件，其它节点不会显示 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf @example_react

export default class Picks extends Component {

  constructor () {
    super(...arguments)
    const date = new Date()
    const years = []
    const months = []
    const days = []
    for (let i = 1990; i <= date.getFullYear(); i++) {
      years.push(i)
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i)
    }
    for (let i = 1; i <= 31; i++) {
      days.push(i)
    }
    this.state = {
      years: years,
      year: date.getFullYear(),
      months: months,
      month: 2,
      days: days,
      day: 2,
      value: [9999, 1, 1]
    }
  }

  onChange = e => {
    const val = e.detail.value
    this.setState({
      year: this.state.years[val[0]],
      month: this.state.months[val[1]],
      day: this.state.days[val[2]],
      value: val
    })
  }

  render() {
    return (
      <View>
        <View>{this.state.year}年{this.state.month}月{this.state.day}日</View>
        <PickerView indicatorStyle='height: 50px;' style='width: 100%; height: 300px;' value={this.state.value} onChange={this.onChange}>
          <PickerViewColumn>
            {this.state.years.map(item => {
              return (
                <View>{item}年</View>
              );
            })}
          </PickerViewColumn>
          <PickerViewColumn>
            {this.state.months.map(item => {
              return (
                <View>{item}月</View>
              )
            })}
          </PickerViewColumn>
          <PickerViewColumn>
            {this.state.days.map(item => {
              return (
                <View>{item}日</View>
              )
            })}
          </PickerViewColumn>
        </PickerView>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="taro-example">
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 30px;" style="width: 100%; height: 300px;" :value="value" `@change="onChange">
    <picker-view-column>
      <view v-for="(item, index) in years" :key="index">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in months" :key="index">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in days" :key="index">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>
</template>

<script>
  export default {
    name: "Index",
    data() {
      const date = new Date()
      const years = []
      const months = []
      const days = []
      for (let i = 1990; i <= date.getFullYear(); i++) {
        years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        months.push(i)
      }
      for (let i = 1; i <= 31; i++) {
        days.push(i)
      }
      return {
        years: years,
        year: date.getFullYear(),
        months: months,
        month: 2,
        days: days,
        day: 2,
        value: [3, 1, 1]
      }
    },

    methods: {
      onChange: function(e) {
        const val = e.detail.value
        console.log(val)
        this.year = this.years[val[0]]
        this.month = this.months[val[1]]
        this.day = this.days[val[2]]
      }
    }
  }
</script>

variable PickerViewColumn

const PickerViewColumn: ComponentType<StandardProps<any, ITouchEvent>>;

滚动选择器子项仅可放置于 <PickerView /> 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致 forms weapp, swan, alipay, tt, h5, rn, harmony_hybrid, ascf
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/picker-view-column.html

variable Progress

const Progress: ComponentType<ProgressProps>;

进度条。组件属性的长度单位默认为 px base weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Progress percent={20} showInfo strokeWidth={2} />
        <Progress percent={40} strokeWidth={2} active />
        <Progress percent={60}  strokeWidth={2} active />
        <Progress percent={80}  strokeWidth={2} active activeColor='blue' />
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <progress percent="20" stroke-width="2" :show-info="true" />
    <progress percent="40" stroke-width="2" :active="true" />
    <progress percent="60" stroke-width="2" :active="true" />
    <progress percent="80" stroke-width="2" :active="true" active-color="blue" />
  </view>
</template>

variable PullToRefresh

const PullToRefresh: ComponentType<PullToRefreshProps>;

下拉组件

variable Radio

const Radio: ComponentType<RadioProps>;

单选项目 forms weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageRadio extends Component {
  state = {
    list: [
      {
        value: '美国',
        text: '美国',
        checked: false
      },
      {
        value: '中国',
        text: '中国',
        checked: true
      },
      {
        value: '巴西',
        text: '巴西',
        checked: false
      },
      {
        value: '日本',
        text: '日本',
        checked: false
      },
      {
        value: '英国',
        text: '英国',
        checked: false
      },
      {
        value: '法国',
        text: '法国',
        checked: false
      }
    ]
  }
  render () {
    return (
      <View className='container'>
        <Head title='Radio' />
        <View className='page-body'>
          <View className='page-section'>
            <Text>默认样式</Text>
            <Radio value='选中' checked>选中</Radio>
            <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
          </View>
          <View className='page-section'>
            <Text>推荐展示样式</Text>
            <View className='radio-list'>
              <RadioGroup>
                {this.state.list.map((item, i) => {
                  return (
                    <Label className='radio-list__label' for={i} key={i}>
                      <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
                    </Label>
                  )
                })}
              </RadioGroup>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="container">
    <view class="page-section">
      <text>默认样式</text>
      <radio value="选中" :checked="true">选中</radio>
      <radio style="margin-left: 20rpx;" value="未选中">未选中</radio>
    </view>
    <view class="page-section">
      <text>推荐展示样式(Taro 团队成员):</text>
        <radio-group `@change="onChange">
          <label v-for="item in list" class="checkbox-list__label">
            <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
          </label>
        </radio-group>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          value: 'yuche',
          text: 'yuche',
          checked: false
        },
        {
          value: 'cjj',
          text: 'cjj',
          checked: false
        },
        {
          value: 'xiexiaoli',
          text: 'xiexiaoli',
          checked: false
        },
        {
          value: 'honly',
          text: 'honly',
          checked: false
        },
        {
          value: 'cs',
          text: 'cs',
          checked: false
        },
        {
          value: 'zhutianjian',
          text: 'zhutianjian',
          checked: false
        },
        {
          value: '隔壁老李',
          text: '隔壁老李',
          checked: true
        }
      ]
    }
  },
  methods: {
    onChange: function(e) {
      console.log(e.detail.value)
    }
  }
}
</script>

variable RadioGroup

const RadioGroup: ComponentType<RadioGroupProps>;

单项选择器，内部由多个 Radio 组成。 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html

variable RichText

const RichText: ComponentType<RichTextProps>;

富文本 base weapp, jd, swan, alipay, tt, h5, rn, harmony, harmony_hybrid, ascf @example_react

class App extends Components {
  state = {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  }
  render () {
    return (
      <RichText nodes={this.state.nodes} />
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <rich-text :nodes="nodes"></rich-text>
  </view>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      nodes: [{
        name: 'div',
        attrs: {
          class: 'div_class',
          style: 'line-height: 60px; color: red;'
        },
        children: [{
          type: 'text',
          text: 'Hello World!'
        }]
      }]
    }
  },
  onReady () {
    console.log('onReady')
  }
}
</script>

variable RootPortal

const RootPortal: ComponentType<RootPortalProps>;

root-portal 使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

variable RtcRoom

const RtcRoom: ComponentType<RtcRoomProps>;

实时音视频通话房间 media swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/media_rtc-room/

variable RtcRoomItem

const RtcRoomItem: ComponentType<RtcRoomItemProps>;

实时音视频通话画面 media swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/media_rtc-room-item/

variable ScaleGestureHandler

const ScaleGestureHandler: ComponentType<ScaleGestureHandlerProps>;

多指缩放时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, ScaleGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <ScaleGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </ScaleGestureHandler>
    </View>
  )
}

variable Script

const Script: ComponentType<ScriptProps>;

script 类似微信小程序的 wxs 标签，支持引用各种小程序的 xs 文件只能在 CompileMode 中使用 viewContainer weapp, swan, alipay, tt, jd, qq @example_react

import { Component } from 'react'
import { View, Script } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <Script src="./logic.wxs" module="logic"></Script>
      <Text>Hello, {logic.name}!</Text>
    </View>
  )
}

variable ScrollView

const ScrollView: ComponentType<ScrollViewProps>;

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为 px

Tips: H5 中 ScrollView 组件是通过一个高度（或宽度）固定的容器内部滚动来实现的，因此务必正确的设置容器的高度。例如: 如果 ScrollView 的高度将 body 撑开，就会同时存在两个滚动条（body 下的滚动条，以及 ScrollView 的滚动条）。微信小程序中 ScrollView 组件如果设置 scrollX 横向滚动时，并且子元素为多个时（单个子元素时设置固定宽度则可以正常横向滚动），需要通过 WXSS 设置 white-space: nowrap 来保证元素不换行，并对 ScrollView 内部元素设置 display: inline-block 来使其能够横向滚动。 viewContainer weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  onScrollToUpper() {}

  // or 使用箭头函数
  // onScrollToUpper = () => {}

  onScroll(e){
    console.log(e.detail)
  }

  render() {
    const scrollStyle = {
      height: '150px'
    }
    const scrollTop = 0
    const Threshold = 20
    const vStyleA = {
      height: '150px',
      'backgroundColor': 'rgb(26, 173, 25)'
    }
    const vStyleB = {
       height: '150px',
      'backgroundColor': 'rgb(39,130,215)'
    }
    const vStyleC = {
      height: '150px',
      'backgroundColor': 'rgb(241,241,241)',
      color: '#333'
    }
    return (
      <ScrollView
        className='scrollview'
        scrollY
        scrollWithAnimation
        scrollTop={scrollTop}
        style={scrollStyle}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
        onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
        onScroll={this.onScroll}
      >
        <View style={vStyleA}>A</View>
        <View style={vStyleB}>B</View>
        <View style={vStyleC}>C</View>
      </ScrollView>
    )
  }
}

@example_vue

<template>
  <view class="container">
    <view class="page-body">
      <view class="page-section">
        <view class="page-section-title">
          <text>Vertical Scroll - 纵向滚动</text>
        </view>
        <view class="page-section-spacing">
          <scroll-view :scroll-y="true" style="height: 300rpx;" `@scrolltoupper="upper" `@scrolltolower="lower" `@scroll="scroll" :scroll-into-view="toView" :scroll-top="scrollTop">
            <view id="demo1" class="scroll-view-item demo-text-1">1</view>
            <view id="demo2"  class="scroll-view-item demo-text-2">2</view>
            <view id="demo3" class="scroll-view-item demo-text-3">3</view>
          </scroll-view>
        </view>
      </view>
      <view class="page-section">
        <view class="page-section-title">
          <text>Horizontal Scroll - 横向滚动</text>
        </view>
        <view class="page-section-spacing">
          <scroll-view class="scroll-view_H" :scroll-x="true" `@scroll="scroll" style="width: 100%">
            <view id="demo21" class="scroll-view-item_H demo-text-1">a</view>
            <view id="demo22"  class="scroll-view-item_H demo-text-2">b</view>
            <view id="demo23" class="scroll-view-item_H demo-text-3">c</view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const order = ['demo1', 'demo2', 'demo3']
export default {
  name: 'Index',
  data() {
    return {
      scrollTop: 0,
      toView: 'demo2'
    }
  },

  methods: {
    upper(e) {
      console.log('upper:', e)
    },

    lower(e) {
      console.log('lower:', e)
    },

    scroll(e) {
      console.log('scroll:', e)
    }
  }
}
</script>

<style>
.page-section-spacing{
  margin-top: 60rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 300rpx;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 300rpx;
}

.demo-text-1 { background: #ccc; }
.demo-text-2 { background: #999; }
.demo-text-3 { background: #666; }
</style>

variable ShareElement

const ShareElement: ComponentType<ShareElementProps>;

共享元素

共享元素是一种动画形式，类似于 [flutter Hero](https://flutterchina.club/animations/hero-animations/) 动画，表现为元素像是在页面间穿越一样。该组件需与 [PageContainer](/docs/components/viewContainer/page-container) 组件结合使用。使用时需在当前页放置 ShareElement 组件，同时在 PageContainer 容器中放置对应的 ShareElement 组件，对应关系通过属性值 key 映射。当设置 PageContainer 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。 skyline weapp, alipay @example_react

// index.js
import { useState, useCallback } from 'react'
import { View, Button, PageContainer, ShareElement } from '@tarojs/components'

import './index.scss'

const contacts = [
  { id: 1, name: 'Frank', img: 'frank.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 2, name: 'Susan', img: 'susan.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 3, name: 'Emma', img: 'emma.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 4, name: 'Scott', img: 'scott.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 5, name: 'Bob', img: 'bob.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 6, name: 'Olivia', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 7, name: 'Anne', img: 'anne.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' },
  { id: 8, name: 'sunny', img: 'olivia.png', phone: '0101 123456', mobile: '0770 123456', email: 'frank@emailionicsorter.com' }
]

export default function () {
  const [show, setShow] = useState(false)
  const [contact, setContact] = useState(contacts[0])
  const [transformIdx, setTransformIdx] = useState(0)

  const onBeforeEnter = useCallback((res) => {
    console.log('onBeforeEnter: ', res)
  }, [])
  const onEnter = useCallback((res) => {
    console.log('onEnter: ', res)
  }, [])
  const onAfterEnter = useCallback((res) => {
    console.log('onAfterEnter: ', res)
  }, [])
  const onBeforeLeave = useCallback((res) => {
    console.log('onBeforeLeave: ', res)
  }, [])
  const onLeave = useCallback((res) => {
    console.log('onLeave: ', res)
  }, [])
  const onAfterLeave = useCallback((res) => {
    console.log('onAfterLeave: ', res)
  }, [])

  const showNext = (e, index) => {
    setShow(true)
    setContact(contacts[index])
    setTransformIdx(index)
  }

  const showPrev = useCallback(() => {
    setShow(false)
  }, [])

  return (
    <View>
      <View className="screen screen1">
        {
          contacts.map((item, index) => (
            <View key={item.id} className="contact" onClick={e => showNext(e, index)}>
              <ShareElement duration={300} className="name" key="name" transform={transformIdx === index}>
                {item.name}
              </ShareElement>
              <View className="list">
                <View>Phone: {item.phone}</View>
                <View>Mobile: {item.mobile}</View>
                <View>Email: {item.email}</View>
              </View>
            </View>
          ))
        }
      </View>
      <PageContainer
        show={show}
        overlay={false}
        closeOnSlideDown
        duration={300}
        position='center'
        onBeforeEnter={onBeforeEnter}
        onEnter={onEnter}
        onAfterEnter={onAfterEnter}
        onBeforeLeave={onBeforeLeave}
        onLeave={onLeave}
        onAfterLeave={onAfterLeave}
      >
        <View className="screen screen2">
          <View className="contact">
            <ShareElement className="name" key="name" duration={300} transform>
              {contact.name}
            </ShareElement>
            <View className={`paragraph ${show ? 'enter' : ''}`}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
              varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
              mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
              mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
              imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
              ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
              risus. Vestibulum eleifend dignissim.

            </View>
            <Button className="screen2-button" onClick={showPrev} hidden={!show} hoverClass="none">Click Me</Button>
          </View>
        </View>
      </PageContainer>
    </View>
  )
}

\/** index.scss *\/
page {
  color: #333;
  background-color: #ddd;
  overflow: hidden;
}

button {
  border: 0 solid #0010ae;
  background-color: #1f2afe;
  color: #fff;
  font-size: 120%;
  padding: 8px 16px;
  outline-width: 0;
  -webkit-appearance: none;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}

.screen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.contact {
  position: relative;
  padding: 16px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.avatar {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0;
}

.name {
  height: 65px;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin: 10px 0;
}

.list {
  padding-top: 8px;
  padding-left: 32px;
}

.screen1 {
  overflow-y: scroll;
  padding: 0;
}

.screen1 .contact {
  margin: 16px;
  height: auto;
  width: auto;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

.screen2-button {
  display: block;
  margin: 24px auto;
}

.paragraph {
  -webkit-transition: transform ease-in-out 300ms;
  transition: transform ease-in-out 300ms;
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}

.enter.paragraph {
  transform: none;
}

variable Slider

const Slider: ComponentType<SliderProps>;

滑动选择器 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Text>设置 step</Text>
        <Slider step={1} value={50}/>
        <Text>显示当前 value</Text>
        <Slider step={1} value={50} showValue/>
        <Text>设置最小/最大值</Text>
        <Slider step={1} value={100} showValue min={50} max={200}/>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <text>设置 step</text>
    <slider step="1" value="50"/>
    <text>显示当前 value</text>
    <slider step="1" value="50" :show-value="true" />
    <text>设置最小/最大值</text>
    <slider step="1" value="100" :show-value="true" min="50" max="200"/>
  </view>
</template>

variable Slot

const Slot: ComponentType<SlotProps>;

slot 插槽 viewContainer weapp, swan, alipay, tt, jd, qq, h5, harmony_hybrid

Example 1

import { Slot, View, Text } from '@tarojs/components'

export default class SlotView extends Component {
  render () {
    return (
      <View>
        <custom-component>
          <Slot name='title'>
           <Text>Hello, world!</Text>
          </Slot>
        </custom-component>
      </View>
    )
  }
}

variable Span

const Span: ComponentType<SpanProps>;

用于支持内联文本和 image / navigator 的混排 skyline weapp
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/span.html

variable StickyHeader

const StickyHeader: ComponentType<StickyHeaderProps>;

吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 skyline weapp, harmony
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/sticky-header.html

variable StickySection

const StickySection: ComponentType<StickySectionProps>;

吸顶布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点。仅 Skyline 支持。 skyline weapp, harmony
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html

variable Swiper

const Swiper: ComponentType<SwiperProps>;

滑块视图容器。其中只可放置 swiper-item 组件，否则会导致未定义的行为。 > 不要为 SwiperItem 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147) viewContainer weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

class App extends Component {
  render () {
    return (
      <Swiper
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical
        circular
        indicatorDots
        autoplay>
        <SwiperItem>
          <View className='demo-text-1'>1</View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-2'>2</View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-3'>3</View>
        </SwiperItem>
      </Swiper>
    )
  }
}

@example_vue

<template>
  <swiper
    class='test-h'
    indicator-color='#999'
    indicator-active-color='#333'
    :vertical="true"
    :circular="true"
    :indicator-dots="true"
    :autoplay="true"
  >
    <swiper-item>
      <view class='demo-text-1'>1</view>
    </swiper-item>
    <swiper-item>
      <view class='demo-text-2'>2</view>
    </swiper-item>
    <swiper-item>
      <view class='demo-text-3'>3</view>
    </swiper-item>
  </swiper>
</template>

variable SwiperItem

const SwiperItem: ComponentType<SwiperItemProps>;

仅可放置在 swiper 组件中，宽高自动设置为100% > 不要为 SwiperItem 设置 **style** 属性，可以通过 class 设置样式。[7147](https://github.com/NervJS/taro/issues/7147) viewContainer weapp, alipay, swan, tt, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

class App extends Component {
  render () {
    return (
      <Swiper
        className='test-h'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        vertical
        circular
        indicatorDots
        autoplay>
        <SwiperItem>
          <View className='demo-text-1'>1</View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-2'>2</View>
        </SwiperItem>
        <SwiperItem>
          <View className='demo-text-3'>3</View>
        </SwiperItem>
      </Swiper>
    )
  }
}

@example_vue

<template>
  <swiper
    class='test-h'
    indicator-color='#999'
    indicator-active-color='#333'
    :vertical="true"
    :circular="true"
    :indicator-dots="true"
    :autoplay="true"
  >
    <swiper-item>
      <view class='demo-text-1'>1</view>
    </swiper-item>
    <swiper-item>
      <view class='demo-text-2'>2</view>
    </swiper-item>
    <swiper-item>
      <view class='demo-text-3'>3</view>
    </swiper-item>
  </swiper>
</template>

variable Switch

const Switch: ComponentType<SwitchProps>;

开关选择器 forms @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Text>默认样式</Text>
        <Switch checked/>
        <Switch/>
        <Text>推荐展示样式</Text>
        <Switch checked/>
        <Switch/>
      </View>
    )
  }
}

@example_vue

<template>
  <view class='components-page'>
    <text>默认样式</text>
    <switch :checked="true" />
    <switch />
    <text>推荐展示样式</text>
    <switch :checked="true" />
    <switch />
  </view>
</template>

weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

variable Tabs

const Tabs: ComponentType<TabsProps>;

标签栏 navig swan
See Also
- https://smartprogram.baidu.com/docs/develop/component/tabs/

variable TapGestureHandler

const TapGestureHandler: ComponentType<TapGestureHandlerProps>;

点击时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, TapGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <TapGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </TapGestureHandler>
    </View>
  )
}

variable Text

const Text: ComponentType<TextProps>;

文本 base weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  state = {
    contents: [],
    contentsLen: 0
  }

  add = () => {
    this.setState(prev => {
      const cot = prev.contents.slice()
      cot.push({ text: 'hello world' })
      return {
        contents: cot,
        contentsLen: cot.length
      }
    })
  }

  remove = () => {
    this.setState(prev => {
      const cot = prev.contents.slice()
      cot.pop()
      return {
        contents: cot,
        contentsLen: cot.length
      }
    })
  }

  render () {
    return (
      <View className='container'>
        {this.state.contents.map((item, index) => (
          <Text key={index}>{item.text}</Text>
        ))}
        <Button className='btn-max-w button_style' plain type='default' onClick={this.add}>add line</Button>
        <Button className='btn-max-w button_style' plain type='default' disabled={this.state.contentsLen ? false : true} onClick={this.remove}>remove line</Button>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="container">
    <view v-for="(item, index) in contents">
      <text>{{item.text}} line {{index + 1}}</text>
    </view>
    <button class="btn-max-w button_style" :plain="true" type="default" `@tap="add">add line</button>
    <button class="btn-max-w button_style" :plain="true" type="default" :disabled="contentsLen ? false : true" `@tap="remove">remove line</button>
</template>

<script>
export default {
  data() {
    return {
      contents: [],
      contentsLen: 0
    }
  },
  methods: {
    add () {
      const cot = this.contents.slice()
      cot.push({ text: 'hello world' })
      this.contents = cot
      this.contentsLen = cot.length
    },

    remove () {
      const cot = this.contents.slice()
      cot.pop()
      this.contents = cot
      this.contentsLen = cot.length
    }
  }
}
</script>

variable Textarea

const Textarea: ComponentType<TextareaProps>;

多行输入框。该组件是原生组件，使用时请注意相关限制 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Text>输入区域高度自适应，不会出现滚动条</Text>
        <Textarea style='background:#fff;width:100%;min-height:80px;padding:0 30rpx;' autoHeight/>
        <Text>这是一个可以自动聚焦的 textarea</Text>
        <Textarea style='background:#fff;width:100%;height:80px;padding:0 30rpx;' autoFocus/>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <text>输入区域高度自适应，不会出现滚动条</text>
    <textarea style="background:#efefef;width:100%;min-height:80px;padding:0 30rpx;" :auto-height="true" />
    <text>这是一个可以自动聚焦的 textarea</text>
    <textarea style="background:#efefef;width:100%;height:80px;padding:0 30rpx;" :auto-focusd="true" />
  </view>
</template>

variable VerticalDragGestureHandler

const VerticalDragGestureHandler: ComponentType<VerticalDragGestureHandlerProps>;

纵向滑动时触发手势微信小程序下 skyline 的手势标签，只能在 CompileMode 中使用 weapp @example_react

import { Component } from 'react'
import { View, VerticalDragGestureHandler } from '@tarojs/components'

export function Index () {
  return (
    <View compileMode>
      <VerticalDragGestureHandler onGestureWorklet="onGesture">
         <View className='circle'></View>
      </VerticalDragGestureHandler>
    </View>
  )
}

variable Video

const Video: ComponentType<VideoProps>;

视频。相关api：Taro.createVideoContext media weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Video
          id='video'
          src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
          poster='https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
          initialTime={0}
          controls={true}
          autoplay={false}
          loop={false}
          muted={false}
        />
      </View>
    )
  }
}

@example_vue

<template>
  <video
    id="video"
    src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    poster="https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg"
    initial-time="0"
    :controls="true"
    :autoplay="false"
    :loop="false"
    :muted="false"
  />
</template>

variable View

const View: ComponentType<ViewProps>;

视图容器 viewContainer weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react

export default class PageView extends Component {
  constructor() {
    super(...arguments)
  }

  render() {
    return (
      <View className='components-page'>
        <Text>flex-direction: row 横向布局</Text>
        <View className='flex-wrp' style='flex-direction:row;'>
          <View className='flex-item demo-text-1'/>
          <View className='flex-item demo-text-2'/>
          <View className='flex-item demo-text-3'/>
        </View>
        <Text>flex-direction: column 纵向布局</Text>
        <View className='flex-wrp' style='flex-direction:column;'>
          <View className='flex-item flex-item-V demo-text-1'/>
          <View className='flex-item flex-item-V demo-text-2'/>
          <View className='flex-item flex-item-V demo-text-3'/>
        </View>
      </View>
    )
  }
}

@example_vue

<template>
  <view class="components-page">
    <text>flex-direction: row 横向布局</text>
    <view class="flex-wrp flex-wrp-row" hover-class="hover" >
      <view class="flex-item demo-text-1" :hover-stop-propagation="true" />
      <view class="flex-item demo-text-2" hover-start-time="1000" hover-class="hover" />
      <view class="flex-item demo-text-3" hover-stayTime="1000" hover-class="hover" />
    </view>
    <text>flex-direction: column 纵向布局</text>
    <view class="flex-wrp flex-wrp-column">
      <view class="flex-item flex-item-V demo-text-1" />
      <view class="flex-item flex-item-V demo-text-2" />
      <view class="flex-item flex-item-V demo-text-3" />
    </view>
  </view>
</template>

<style>
.flex-wrp { display: flex; }
.flex-wrp-column{ flex-direction: column; }
.flex-wrp-row { flex-direction:row; padding: 20px; background: #f1f1f1; }
.flex-item { width: 180px; height: 90px; }
.demo-text-1 { background: #ccc; }
.demo-text-2 { background: #999; }
.demo-text-3 { background: #666; }
.hover {
  background: #000;
}
</style>

variable VoipRoom

const VoipRoom: ComponentType<VoipRoomProps>;

多人音视频对话
需用户授权 scope.camera、scope.record。相关接口： [Taro.joinVoIPChat](/docs/apis/media/voip/joinVoIPChat) 开通该组件权限后，开发者可在 joinVoIPChat 成功后，获取房间成员的 openid，传递给 voip-room 组件，以显示成员画面。 media weapp
Example 1
export default class PageView extends Component { constructor() { super(...arguments) } render() { return ( <VoipRoom openId="{{item}}" mode="{{selfOpenId === item ? 'camera' : 'video'}}"> </VoipRoom> ) } }
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/voip-room.html

variable WebView

const WebView: ComponentType<WebViewProps>;

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 open weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf @example_react
class App extends Component { handleMessage () {} render () { return ( <WebView src='https://mp.weixin.qq.com/' onMessage={this.handleMessage} /> ) } }
@example_vue
<template> <web-view src='https://mp.weixin.qq.com/' `@message="handleMessage" /> </template>
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

Interfaces

interface A11yProps

interface A11yProps {}

property ariaChecked

ariaChecked?: boolean;

标识当前是否被选中

property ariaHidden

ariaHidden?: boolean;

当前 view 及其子 view 是否屏幕无障碍隐藏

property ariaLabel

ariaLabel?: string;

为元素提供一个可访问名称

property ariaRole

ariaRole?: string;

定义元素的角色

property ariaRoledescription

ariaRoledescription?: string;

为元素的 role 提供额外说明

property ariaSelected

ariaSelected?: boolean;

指示元素是否处于选中状态

property ariaValuemax

ariaValuemax?: string;

设置数值控件的最大值

property ariaValuemin

ariaValuemin?: string;

设置数值控件的最小值

property ariaValuenow

ariaValuenow?: string;

设置数值控件的当前值

property ariaValuetext

ariaValuetext?: string;

设置将覆盖 ariaValuemax、ariaValuemin 和 ariaValuenow 的值

interface AdCustomProps

interface AdCustomProps extends StandardProps {}

property adIntervals

adIntervals?: number;

广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新） weapp

property onError

onError?: CommonEventFunction<AdProps.onErrorEventDetail>;

当广告发生错误时，触发的事件，可以通过该事件获取错误码及原因 weapp

property onLoad

onLoad?: CommonEventFunction;

广告加载成功的回调 weapp

property unitId

unitId: string;

广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建 weapp

interface AdProps

interface AdProps extends StandardProps {}

property adHeight

adHeight?: string;

type 为 feeds 时广告高度（px），最小 85，最大 160 qq

property adIntervals

adIntervals?: number;

广告自动刷新的间隔时间，单位为秒，参数值必须大于等于30（该参数不传入时 Banner 广告不会自动刷新） weapp, tt

property adLeft

adLeft?: string;

type 为 feeds 时广告左边距（px），必须大于 0 qq

property adTheme

adTheme?: 'white' | 'black';

广告主题样式设置 weapp

property adTop

adTop?: string;

type 为 feeds 时广告上边距（px），必须大于 0 qq

property adType

adType?: 'banner' | 'video' | 'grid';

广告类型，默认为展示banner，可通过设置该属性为video展示视频广告, grid为格子广告 weapp

property adWidth

adWidth?: string;

type 为 feeds 时广告宽度（px），默认 100%，最大值为屏幕宽度，最小值为 265 qq

property apid

apid?: string;

小程序广告位 ID swan

property appid

appid?: string;

小程序应用 ID swan

property blockOrientation

blockOrientation?: 'vertical' | 'landscape';

type 为 block 时请求积木广告排列方向 qq landscape

property blockSize

blockSize?: string;

type 为 block 时请求积木广告数量（展示以实际拉取广告数量为准） qq 1

property fixed

fixed?: string;

广告是否在屏幕中固定展示 tt

property onClose

onClose?: CommonEventFunction;

广告关闭的回调 weapp, swan, tt

property onError

onError?: CommonEventFunction<AdProps.onErrorEventDetail>;

当广告发生错误时，触发的事件，可以通过该事件获取错误码及原因，事件对象 event.detail = {errCode: 1002} weapp, swan, tt, qq

property onLoad

onLoad?: CommonEventFunction;

广告加载成功的回调 weapp, swan, tt, qq

property onSize

onSize?: CommonEventFunction<AdProps.onSizeEventDetail>;

type 为 feeds 时广告实际宽高回调 qq

property onStatus

onStatus?: CommonEventFunction;

贴片类型广告播放期间触发 swan

property scale

scale?: string;

广告的缩放比例，100 为标准尺寸 tt 100

property testBannerType

testBannerType?: 'one' | 'three';

开发者工具下，type 为 banner 时，指定 banner 广告展示三图文还是单图 qq three

property type

type?: string;

广告类型：banner、feed ，需和百青藤平台上的代码位类型相匹配 swan, tt, qq feed 支持 banner、feed 支持 banner、card、feeds、block

property unitId

unitId: string;

广告单元id，可在[小程序管理后台](https://mp.weixin.qq.com/)的流量主模块新建 weapp, tt, qq

property updatetime

updatetime?: string;

更改该属性，可以触发广告刷新 swan

interface AudioProps

interface AudioProps extends StandardProps {}

property author

author?: string;

默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效 "未知作者" weapp, swan, qq, ascf

property controls

controls?: boolean;

是否显示默认控件 false weapp, swan, qq, h5, harmony_hybrid, ascf

property id

id?: string;

audio 组件的唯一标识符 weapp, swan, qq, ascf

property loop

loop?: boolean;

是否循环播放 false weapp, swan, qq, h5, harmony_hybrid, ascf

property muted

muted?: boolean;

是否静音播放 false h5, harmony_hybrid

property name

name?: string;

默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效 "未知音频" weapp, swan, qq, ascf

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onEnded

onEnded?: CommonEventFunction;

当播放到末尾时触发 ended 事件 weapp, swan, qq, h5, harmony_hybrid, ascf

property onError

onError?: CommonEventFunction<AudioProps.onErrorEventDetail>;

当发生错误时触发 error 事件，detail = {errMsg: MediaError.code} weapp, swan, qq, h5, harmony_hybrid, ascf

property onPause

onPause?: CommonEventFunction;

当暂停播放时触发 pause 事件 weapp, swan, qq, h5, harmony_hybrid, ascf

property onPlay

onPlay?: CommonEventFunction;

当开始/继续播放时触发play事件 weapp, swan, qq, h5, harmony_hybrid, ascf

property onTimeUpdate

onTimeUpdate?: CommonEventFunction<AudioProps.onTimeUpdateEventDetail>;

当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} weapp, swan, qq, h5, harmony_hybrid, ascf

property poster

poster?: string;

默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效 weapp, swan, qq, ascf

property src

src?: string;

要播放音频的资源地址 weapp, swan, qq, h5, harmony_hybrid, ascf

interface BaseEventOrig

interface BaseEventOrig<T = any> {}

property currentTarget

currentTarget: currentTarget;

当前组件的一些属性值集合

property detail

detail: T;

额外的信息

property preventDefault

preventDefault: () => void;

阻止元素发生默认的行为

property stopPropagation

stopPropagation: () => void;

阻止事件冒泡到父元素,阻止任何父事件处理程序被执行

property target

target: Target;

触发事件的组件的一些属性值集合

property timeStamp

timeStamp: number;

事件生成时的时间戳

property type

type: string;

事件类型

interface BaseTouchEvent

interface BaseTouchEvent<TouchDetail, T = any> extends BaseEventOrig<T> {}

property changedTouches

changedTouches: Array<TouchDetail>;

触摸事件，当前变化的触摸点信息的数组

property touches

touches: Array<TouchDetail>;

触摸事件，当前停留在屏幕中的触摸点信息的数组

interface ButtonProps

interface ButtonProps extends StandardProps {}

property activityType

activityType?: string;

open-type=liveActivity时有效，表示子场景ID，当open-type=liveActivity时，该参数必填。 none ascf

property appAbilityName

appAbilityName?: string;

open-type=launchApp时有效，表示待启动Ability名称。 none ascf

property appBundleName

appBundleName?: string;

open-type=launchApp时有效，表示待启动Ability所在的应用Bundle名称。 none ascf

property appModuleName

appModuleName?: string;

open-type=launchApp时有效，表示待启动Ability所属的模块名称。 none ascf

property appParameter

appParameter?: string;

打开 APP 时，向 APP 传递的参数
生效时机：open-type="launchApp" weapp, qq, jd

property appParameters

appParameters?: Object;

open-type=launchApp时有效，表示启动Ability时的自定义参数。 none ascf

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property dataAwemeId

dataAwemeId?: string;

跳转抖音号个人页，只支持小程序绑定的品牌号、员工号、合作号 tt

property dataIsHalfPage

dataIsHalfPage?: boolean;

是否开启半屏模式 tt

property disabled

disabled?: boolean;

是否禁用 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf false

property formType

formType?: keyof ButtonProps.FormType;

用于 <form/> 组件，点击分别会触发 <form/> 组件的 submit/reset 事件 weapp, alipay, swan, tt, qq, jd, harmony, ascf

property groupId

groupId?: string;

群聊 id 打开群资料卡时，传递的群号通过创建聊天群、查询群信息获取 qq, tt

property guildId

guildId?: string;

打开频道页面时，传递的频道号 qq

property hoverClass

hoverClass?: string;

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 button-hover weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf 支持 hoverStyle 属性，但框架未支持 hoverClass

property hoverStartTime

hoverStartTime?: number;

按住后多久出现点击态，单位毫秒 20 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property hoverStayTime

hoverStayTime?: number;

手指松开后点击态保留时间，单位毫秒 70 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property hoverStopPropagation

hoverStopPropagation?: boolean;

指定是否阻止本节点的祖先节点出现点击态 false weapp, alipay, swan, tt, qq, jd, ascf

property hoverStyle

hoverStyle?: StyleProp<ViewStyle>;

由于 RN 不支持 hoverClass，故 RN 端的 Button 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。 none rn

property lang

lang?: keyof ButtonProps.Lang;

指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
生效时机: open-type="getUserInfo" weapp, qq, jd

property loading

loading?: boolean;

名称前是否带 loading 图标 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf false

property onAddFriend

onAddFriend?: CommonEventFunction;

添加好友的回调 qq

property onAddGroupApp

onAddGroupApp?: CommonEventFunction;

添加群应用的回调。errCode 错误码：41004（当前用户非管理员或群主，无权操作），41005（超过可添加群应用的群数量） qq

property onAgreePrivacyAuthorization

onAgreePrivacyAuthorization?: CommonEventFunction;

用户同意隐私协议事件回调，open-type="agreePrivacyAuthorization"时有效 weapp

property onChooseAddress

onChooseAddress?: CommonEventFunction;

用户点击该按钮时，调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，从返回参数的 detail 中获取，和 swan.chooseAddress 一样的。和 open-type 搭配使用，使用时机：open-type="chooseAddress" swan

property onChooseAvatar

onChooseAvatar?: CommonEventFunction;

获取用户头像回调
生效时机：open-type="chooseAvatar" weapp

property onChooseInvoiceTitle

onChooseInvoiceTitle?: CommonEventFunction;

用户点击该按钮时，选择用户的发票抬头，和 swan.chooseInvoiceTitle 一样的。和 open-type 搭配使用，使用时机：open-type="chooseInvoiceTitle" swan

property onContact

onContact?: CommonEventFunction<ButtonProps.onContactEventDetail>;

客服消息回调
生效时机：open-type="contact" weapp, swan, qq

property onCreateLiveActivity

onCreateLiveActivity?: CommonEventFunction<ButtonProps.onCreateLiveActivityEventDetail>;

获取服务动态授权码的回调
生效时机：open-type="liveActivity" ascf

property onError

onError?: CommonEventFunction;

当使用开放能力时，发生错误的回调
生效时机：open-type="launchApp" weapp, alipay, qq, jd, ascf

property onFollowLifestyle

onFollowLifestyle?: CommonEventFunction<{
    followStatus: 1 | 2 | 3 | true;
}>;

当 open-type 为 lifestyle 时有效。当点击按钮时触发。 event.detail = { followStatus }，followStatus 合法值有 1、2、3，其中 1 表示已关注。2 表示用户不允许关注。3 表示发生未知错误；已知问题：基础库 1.0，当用户在点击按钮前已关注生活号，event.detail.followStatus 的值为 true。 alipay

property onGetAuthorize

onGetAuthorize?: CommonEventFunction;

支付宝获取会员基础信息授权回调
生效时机：open-type="getAuthorize" alipay

property onGetPhoneNumber

onGetPhoneNumber?: CommonEventFunction<ButtonProps.onGetPhoneNumberEventDetail>;

获取用户手机号回调
生效时机：open-type="getPhoneNumber" weapp, alipay, swan, tt, jd, ascf

property onGetPhoneNumberAndRiskLevel

onGetPhoneNumberAndRiskLevel?: CommonEventFunction<ButtonProps.onGetPhoneNumberAndRiskLevelEventDetail>;

获取手机号和风险等级的回调
生效时机：open-type="getPhoneNumberAndRiskLevel" ascf

property onGetRealTimePhoneNumber

onGetRealTimePhoneNumber?: CommonEventFunction<ButtonProps.onGetRealTimePhoneNumberEventDetail>;

手机号实时验证回调，open-type="getRealtimePhoneNumber" 时有效 weapp

property onGetUserInfo

onGetUserInfo?: CommonEventFunction<ButtonProps.onGetUserInfoEventDetail>;

用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与 Taro.getUserInfo 返回的一致
生效时机: open-type="getUserInfo" weapp, alipay, swan, qq, jd

property onJoinGroup

onJoinGroup?: CommonEventFunction<{ errMsg: string; errNo: number }>;

加群后触发 tt

property onLaunchApp

onLaunchApp?: CommonEventFunction;

打开 APP 成功的回调
生效时机：open-type="launchApp" weapp, qq, ascf

property onLogin

onLogin?: CommonEventFunction;

登录回调，和 open-type 搭配使用，使用时机：open-type="login"。可以通过返回参数的 detail 判断是否登录成功，当 errMsg 为'login:ok'时即为成功。如想获取登录凭证请使用 swan.getLoginCode swan

property onOpenAwemeUserProfile

onOpenAwemeUserProfile?: CommonEventFunction;

监听跳转抖音号个人页的回调
生效时机：open-type="openAwemeUserProfile" tt

property onOpenSetting

onOpenSetting?: CommonEventFunction<ButtonProps.onOpenSettingEventDetail>;

在打开授权设置页后回调
生效时机：open-type="openSetting" weapp, swan, tt, qq, jd, ascf

property onSubscribe

onSubscribe?: CommonEventFunction;

订阅消息授权回调，和 open-type 搭配使用，使用时机：open-type="subscribe" swan

property onTap

onTap?: CommonEventFunction;

点击。说明：每点击一次会触发一次事件，建议自行使用代码防止重复点击,可以使用 js 防抖和节流实现。 alipay

property openId

openId?: string;

添加好友时，对方的 openid qq

property openType

openType?: ButtonProps.OpenType;

微信开放能力 weapp, alipay, swan, tt, qq, jd, ascf

property phoneNumberNoQuotaToast

phoneNumberNoQuotaToast?: boolean;

当手机号快速验证或手机号实时验证额度用尽时，是否对用户展示平台默认提示
生效时机：open-type="getPhoneNumber" 或 open-type="getRealtimePhoneNumber" weapp true

property plain

plain?: boolean;

按钮是否镂空，背景色透明 weapp, alipay, swan, qq, jd, h5, rn, harmony, harmony_hybrid, ascf false

property publicId

publicId?: string;

生活号 id，必须是当前小程序同主体且已关联的生活号，open-type="lifestyle" 时有效。 alipay, qq

property scope

scope?: 'userInfo' | 'phoneNumber';

支付宝小程序 scope
生效时机：open-type="getAuthorize" alipay

property sendMessageImg

sendMessageImg?: string;

会话内消息卡片图片
生效时机：open-type="contact" 截图 weapp, swan

property sendMessagePath

sendMessagePath?: string;

会话内消息卡片点击跳转小程序路径
生效时机：open-type="contact" 当前标题 weapp, swan

property sendMessageTitle

sendMessageTitle?: string;

会话内消息卡片标题
生效时机：open-type="contact" 当前标题 weapp, swan

property sessionFrom

sessionFrom?: string;

会话来源
生效时机：open-type="contact" weapp, swan

property shareMessageFriendInfo

shareMessageFriendInfo?: string;

发送对象的 FriendInfo qq

property shareMessageImg

shareMessageImg?: string;

转发显示图片的链接，可以是网络图片路径（仅 QQ CDN 域名路径）或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4FriendInfo qq

property shareMessageTitle

shareMessageTitle?: string;

转发标题，不传则默认使用当前小程序的昵称。 FriendInfo qq

property shareMode

shareMode?: string;

分享类型集合，请参考下面share-mode有效值说明 qq ['qq', 'qzone']

property shareType

shareType?: string;

分享类型集合，请参考下面share-type有效值说明。share-type后续将不再维护，请更新为share-mode qq 27

property showMessageCard

showMessageCard?: boolean;

显示会话内消息卡片
生效时机：open-type="contact" weapp, swan false

property size

size?: keyof ButtonProps.Size;

按钮的大小 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf default

property subscribeId

subscribeId?: string;

发送订阅类模板消息时所使用的唯一标识符，内容由开发者自定义，用来标识订阅场景注意：同一用户在同一 subscribe-id 下的多次授权不累积下发权限，只能下发一条。若要订阅多条，需要不同 subscribe-id swan

property templateId

templateId?: string | Array<string>;

发送订阅类模板消息所用的模板库标题 ID ，可通过 getTemplateLibraryList 获取当参数类型为 Array 时，可传递 1~3 个模板库标题 ID swan

property type

type?: keyof ButtonProps.Type;

按钮的样式类型 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf default

interface CameraProps

interface CameraProps extends StandardProps {}

property devicePosition

devicePosition?: keyof CameraProps.DevicePosition;

摄像头朝向 "back" weapp, alipay, swan, tt, qq, jd, rn, ascf

property flash

flash?: keyof CameraProps.Flash;

闪光灯 "auto" weapp, alipay, swan, tt, qq, jd, rn, ascf

property frameSize

frameSize?: keyof CameraProps.FrameSize;

指定期望的相机帧数据尺寸 "medium" weapp, alipay, tt

property mode

mode?: keyof CameraProps.Mode;

模式，有效值为normal, scanCode "normal" weapp, alipay, tt, qq, jd, rn

property onError

onError?: CommonEventFunction;

用户不允许使用摄像头时触发 weapp, alipay, swan, tt, qq, jd, rn, ascf

property onInitDone

onInitDone?: CommonEventFunction<CameraProps.onInitDoneEventDetail>;

相机初始化完成时触发 weapp, tt, rn, ascf

property onReady

onReady?: CommonEventFunction<CameraProps.onInitDoneEventDetail>;

相机初始化成功时触发。 alipay

property onScanCode

onScanCode?: CommonEventFunction<CameraProps.onScanCodeEventDetail>;

在成功识别到一维码时触发，仅在 mode="scanCode" 时生效 weapp, alipay, tt, qq, rn

property onStop

onStop?: CommonEventFunction;

摄像头在非正常终止时触发，如退出后台等情况 weapp, alipay, swan, tt, qq, jd, rn, ascf

property outputDimension

outputDimension?: '360P' | '540P' | '720P' | '1080P' | 'max';

相机拍照，录制的分辨率。 alipay "720P"

property resolution

resolution?: keyof CameraProps.Resolution;

分辨率，不支持动态修改 "medium" weapp, tt, ascf

interface CanvasProps

interface CanvasProps extends StandardProps<any, CanvasTouchEvent> {}

property canvasId

canvasId?: string;

canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 weapp, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property disableScroll

disableScroll?: boolean;

当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 false weapp, alipay, swan, qq, jd, ascf

property height

height?: string;

alipay, h5, harmony_hybrid

property id

id?: string;

组件唯一标识符。注意：同一页面中的 id 不可重复。 alipay, h5, harmony_hybrid

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onError

onError?: CommonEventFunction<CanvasProps.onErrorEventDetail>;

当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'} weapp, swan, qq, jd, ascf

property onLongTap

onLongTap?: CommonEventFunction;

手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动 weapp, alipay, swan, qq, jd, h5, harmony_hybrid, ascf

property onReady

onReady?: CommonEventFunction;

canvas 组件初始化成功触发。 alipay

property onTap

onTap?: CommonEventFunction;

点击。 alipay

property onTouchCancel

onTouchCancel?: CanvasTouchEventFunction;

手指触摸动作被打断，如来电提醒，弹窗 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property onTouchEnd

onTouchEnd?: CanvasTouchEventFunction;

手指触摸动作结束 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property onTouchMove

onTouchMove?: CanvasTouchEventFunction;

手指触摸后移动 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property onTouchStart

onTouchStart?: CanvasTouchEventFunction;

手指触摸动作开始 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property type

type?: string;

指定 canvas 类型，支持 2d 和 webgl weapp, alipay, tt, ascf

property width

width?: string;

alipay, h5, harmony_hybrid

interface CanvasTouch

interface CanvasTouch {}

property identifier

identifier: number;

property x

x: number;

property y

y: number;

interface CheckboxGroupProps

interface CheckboxGroupProps extends StandardProps, FormItemProps {}

property name

name?: string;

表单组件中加上 name 来作为 key alipay, tt, h5, harmony_hybrid

property onChange

onChange?: CommonEventFunction<{
    value: string[];
}>;

<CheckboxGroup/> 中选中项发生改变是触发 change 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

interface CheckboxProps

interface CheckboxProps extends StandardProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property checked

checked?: boolean;

当前是否选中，可用来设置默认选中 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf false

property color

color?: string;

checkbox的颜色，同 css 的 color weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property disabled

disabled?: boolean;

是否禁用 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf false

property name

name?: string;

Checkbox 的名字 h5, harmony, harmony_hybrid

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onChange

onChange?: CommonEventFunction<{
    value: string[];
}>;

选中项发生变化时触发 change 事件，小程序无此 API alipay, h5, rn, harmony, harmony_hybrid

property value

value: string;

<Checkbox/>标识，选中时触发<CheckboxGroup/>的 change 事件，并携带 <Checkbox/> 的 value weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface CoverImageProps

interface CoverImageProps extends StandardProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property ariaRole

ariaRole?: string;

无障碍访问，（角色）标识元素的作用 qq

property fixedBottom

fixedBottom?: string;

设置与容器底部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 bottom 值，该属性优先级高于 CSS 设置的 position、top、bottom 值 swan

property fixedLeft

fixedLeft?: string;

设置与容器左侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 left 值，该属性优先级高于 fixed-right，CSS 设置的 position、left、right 值 swan

property fixedRight

fixedRight?: string;

设置与容器右侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 right 值，该属性优先级高于 CSS 设置的 position、left、right 值 swan

property fixedTop

fixedTop?: string;

设置与容器顶部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 top 值，该属性优先级高于 fixed-bottom，CSS 设置的 position、top、bottom 值 swan

property mode

mode?: keyof CoverImageProps.Mode;

图片裁剪、缩放的模式 "scaleToFill" ascf

property onError

onError?: CommonEventFunction;

图片加载失败时触发 weapp, swan, qq, jd, h5, harmony_hybrid, ascf

property onLoad

onLoad?: CommonEventFunction;

图片加载成功时触发 weapp, swan, qq, jd, h5, harmony_hybrid, ascf

property onTap

onTap?: CommonEventFunction;

点击事件回调。 alipay

property referrerPolicy

referrerPolicy?: 'origin' | 'no-referrer';

格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； weapp

property src

src: string;

图标路径，支持临时路径、网络地址、云文件ID。暂不支持base64格式。 weapp, alipay, swan, qq, jd, h5, harmony_hybrid, ascf

interface CoverViewProps

interface CoverViewProps extends ViewProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property ariaRole

ariaRole?: string;

无障碍访问，（角色）标识元素的作用 qq

property disableLowerScroll

disableLowerScroll?: string;

发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。 alipay

property disableUpperScroll

disableUpperScroll?: string;

发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。 alipay

property enableBackToTop

enableBackToTop?: boolean;

当点击 iOS 顶部状态栏或者双击 Android 标题栏时，滚动条返回顶部，只支持竖向。 alipay false

property fixedBottom

fixedBottom?: string;

设置与容器底部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 bottom 值，该属性优先级高于 CSS 设置的 position、top、bottom 值 swan

property fixedLeft

fixedLeft?: string;

设置与容器左侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 left 值，该属性优先级高于 fixed-right，CSS 设置的 position、left、right 值 swan

property fixedRight

fixedRight?: string;

设置与容器右侧的固定距离，效果相当于在 CSS 中设置 position: fixed 和 right 值，该属性优先级高于 CSS 设置的 position、left、right 值 swan

property fixedTop

fixedTop?: string;

设置与容器顶部的固定距离，效果相当于在 CSS 中设置 position: fixed 和 top 值，该属性优先级高于 fixed-bottom，CSS 设置的 position、top、bottom 值 swan

property hoverClass

hoverClass?: string;

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 none ascf

property hoverStartTime

hoverStartTime?: number;

按住后多久出现点击态，单位毫秒 50 ascf

property hoverStayTime

hoverStayTime?: number;

手指松开后点击态保留时间，单位毫秒 400 ascf

property hoverStopPropagation

hoverStopPropagation?: boolean;

指定是否阻止本节点的祖先节点出现点击态 false ascf

property lowerThreshold

lowerThreshold?: number;

距底部/右边多远时（单位px），触发 scrolltolower 事件。 alipay 50

property markerId

markerId?: number;

标记点 ID 用于地图组件的标记点识别 weapp
Example 1
<CoverView markerId={123} />

property onScroll

onScroll?: CommonEventFunction;

滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}。 alipay

property onScrollToLower

onScrollToLower?: CommonEventFunction;

滚动到底部/右边，会触发 scrolltolower事件。 alipay

property onScrollToUpper

onScrollToUpper?: CommonEventFunction;

滚动到顶部/左边，会触发 scrolltoupper 事件。 alipay

property onTouchCancel

onTouchCancel?: CommonEventFunction;

触摸动作被打断，如来电提醒、弹窗。 alipay

property onTouchEnd

onTouchEnd?: CommonEventFunction;

触摸动作结束。 alipay

property onTouchMove

onTouchMove?: CommonEventFunction;

触摸后移动。 alipay

property onTouchStart

onTouchStart?: CommonEventFunction;

触摸动作开始。 alipay

property scrollAnimationDuration

scrollAnimationDuration?: number;

当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。 alipay

property scrollIntoView

scrollIntoView?: string;

滚动到子元素，值应为某子元素的 id。当滚动到该元素时，元素顶部对齐滚动区域顶部。说明：scroll-into-view 的优先级高于 scroll-top。 alipay

property scrollLeft

scrollLeft?: number;

设置横向滚动条位置。 alipay

property scrollTop

scrollTop?: number;

设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效 weapp, alipay, swan, qq, jd

property scrollWithAnimation

scrollWithAnimation?: boolean;

在设置滚动条位置时使用动画过渡。 alipay false

property scrollX

scrollX?: boolean;

允许横向滚动。 alipay false

property scrollY

scrollY?: boolean;

允许纵向滚动。 alipay false

property slot

slot?: string;

插槽名称用于组件间的内容分发 weapp
Example 1

property trapScroll

trapScroll?: boolean;

纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。 alipay false

property upperThreshold

upperThreshold?: number;

距顶部/左边多远时（单位px），触发 scrolltoupper 事件。 alipay 50

interface CustomWrapperProps

interface CustomWrapperProps extends StandardProps {}

interface EditorProps

interface EditorProps extends StandardProps {}

property confirmHold

confirmHold?: boolean;

点击键盘回车键时是否保持键盘不收起。 ascf

property enableFormats

enableFormats?: string[];

编辑器允许的名单内的格式。 ascf

property enterkeyhint

enterkeyhint?: 'send' | 'search' | 'next' | 'previous' | 'go' | 'done' | 'enter';

点击编辑器拉起输入法后，输入法键盘右下角文字类型。 ascf

property onBlur

onBlur?: CommonEventFunction<EditorProps.editorEventDetail>;

编辑器失去焦点时触发 detail = { html, text, delta } weapp, jd, ascf

property onFocus

onFocus?: CommonEventFunction<EditorProps.editorEventDetail>;

编辑器聚焦时触发 weapp, jd, ascf

property onInput

onInput?: CommonEventFunction<EditorProps.editorEventDetail>;

编辑器内容改变时触发 detail = { html, text, delta } weapp, jd, ascf

property onReady

onReady?: CommonEventFunction;

编辑器初始化完成时触发 weapp, jd, ascf

property onStatusChange

onStatusChange?: CommonEventFunction;

通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 weapp, jd, ascf

property placeholder

placeholder?: string;

提示信息 weapp, jd, ascf

property readOnly

readOnly?: boolean;

设置编辑器为只读 false weapp, jd, ascf

property showImgResize

showImgResize?: boolean;

点击图片时显示修改尺寸控件 false weapp, jd

property showImgSize

showImgSize?: boolean;

点击图片时显示图片大小控件 false weapp, jd

property showImgToolbar

showImgToolbar?: boolean;

点击图片时显示工具栏控件 false weapp, jd

interface EventProps

interface EventProps<TouchEvent extends BaseTouchEvent<any> = ITouchEvent> {}

property onAnimationEnd

onAnimationEnd?: (event: CommonEvent) => void;

会在一个 WXSS animation 动画完成时触发

property onAnimationIteration

onAnimationIteration?: (event: CommonEvent) => void;

会在一个 WXSS animation 一次迭代结束时触发

property onAnimationStart

onAnimationStart?: (event: CommonEvent) => void;

会在一个 WXSS animation 动画开始时触发

property onClick

onClick?: (event: ITouchEvent) => void;

手指触摸后马上离开

property onLongClick

onLongClick?: (event: CommonEvent) => void;

手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）

property onLongPress

onLongPress?: (event: CommonEvent) => void;

手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

property onTouchCancel

onTouchCancel?: (event: TouchEvent) => void;

手指触摸动作被打断，如来电提醒，弹窗

property onTouchEnd

onTouchEnd?: (event: TouchEvent) => void;

手指触摸动作结束

property onTouchForceChange

onTouchForceChange?: (event: CommonEvent) => void;

在支持 3D Touch 的 iPhone 设备，重按时会触发

property onTouchMove

onTouchMove?: (event: TouchEvent) => void;

手指触摸后移动

property onTouchStart

onTouchStart?: (event: TouchEvent) => void;

手指触摸动作开始

property onTransitionEnd

onTransitionEnd?: (event: CommonEvent) => void;

会在 WXSS transition 或 Taro.createAnimation 动画结束后触发

interface FormItemProps

interface FormItemProps {}

property name

name?: string;

表单数据标识

interface FormProps

interface FormProps extends StandardProps {}

property clueComponentId

clueComponentId?: string;

用于分发目的。开发者在【小程序开发者后台 -> 进入目标小程序 -> 运营 -> 流量配置 -> 抖音 -> 留资分发配置】复制创建的配置 ID，需要和留资分发配置一起使用，详情见留资分发配置
tt ""

property conversionTarget

conversionTarget?: number;

用于分发目的。取值：0 或 1，其中 0 表示默认，1 表示留资目标，需要和留资分发配置一起使用，详情见留资分发配置 tt 0

property onReset

onReset?: CommonEventFunction;

表单重置时会触发 reset 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onSubmit

onSubmit?: CommonEventFunction<FormProps.onSubmitEventDetail>;

携带 form 中的数据触发 submit 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property reportSubmit

reportSubmit?: boolean;

是否返回 formId 用于发送模板消息。 false weapp, alipay, swan, qq, jd, h5, harmony_hybrid

property reportSubmitTimeout

reportSubmitTimeout?: number;

等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId。 0 weapp

property reportType

reportType?: string;

模板消息的类型，report-submit 为 true 时填写有效取值：default / subscribe 'default' swan

property subscribeId

subscribeId?: string;

发送订阅类模板消息时所使用的唯一标识符，内容由开发者自定义，用来标识订阅场景注意：同一用户在同一 subscribe-id 下的多次授权不累积下发权限，只能下发一条。若要订阅多条，需要不同 subscribe-id swan

property templateId

templateId?: string | Array<string>;

发送订阅类模板消息所用的模板库标题 ID ，可通过 getTemplateLibraryList 获取当参数类型为 Array 时，可传递 1~3 个模板库标题 ID （注：此处填写模板库id。示例：BD0001） swan

interface FunctionalPageNavigatorProps

interface FunctionalPageNavigatorProps extends StandardProps {}

property args

args?: object;

功能页参数，参数格式与具体功能页相关 weapp

property name

name?: keyof FunctionalPageNavigatorProps.Name;

要跳转到的功能页 weapp

property onCancel

onCancel?: CommonEventFunction;

因用户操作从功能页返回时触发 weapp

property onFail

onFail?: CommonEventFunction;

功能页返回，且操作失败时触发， detail 格式与具体功能页相关 weapp

property onSuccess

onSuccess?: CommonEventFunction;

功能页返回，且操作成功时触发， detail 格式与具体功能页相关 weapp

property version

version?: keyof FunctionalPageNavigatorProps.Version;

跳转到的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版）；线上版本必须设置为 release "release" weapp

interface IconProps

interface IconProps extends StandardProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property color

color?: string;

icon 的颜色，同 css 的 color weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property size

size?: number;

icon 的大小，单位px 23 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property type

type: keyof IconProps.TIconType;

icon 的类型 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface ImageProps

interface ImageProps extends StandardProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property catchTap

catchTap?: CommonEventFunction;

点击图片时触发，阻止事件冒泡。 alipay

property defaultSource

defaultSource?: string;

默认图片地址，若设置默认图片地址，会先显示默认图片，等 src 对应的图片加载成功后，再渲染对应的图片。 alipay

property disableDefaultSize

disableDefaultSize?: boolean;

H5 / WebComponents 为 true 时关闭默认占位，taro-image-core 外层宽高均为 auto（默认 false 仍为 320×240）。 false h5, harmony_hybrid

property fadeIn

fadeIn?: boolean;

是否渐显 weapp false

property imageMenuPrevent

imageMenuPrevent?: string;

阻止长按图片时弹起默认菜单（即将该属性设置为image-menu-prevent="true"或image-menu-prevent），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性。注：长按菜单后的操作暂不支持 svg 格式 swan

property imgProps

imgProps?: ImgHTMLAttributes<HTMLImageElement>;

为 img 标签额外增加的属性 h5, harmony_hybrid

property lazyLoad

lazyLoad?: boolean;

图片懒加载。只针对 page 与 scroll-view 下的 image 有效 false weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property mode

mode?: keyof ImageProps.Mode;

图片裁剪、缩放的模式 "scaleToFill" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf 部分支持 scaleToFill, aspectFit, aspectFill, widthFix 部分支持 scaleToFill, aspectFit, aspectFill, widthFix, heightFix

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onError

onError?: CommonEventFunction<ImageProps.onErrorEventDetail>;

当错误发生时，发布到 AppService 的事件名，事件对象 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property onLoad

onLoad?: CommonEventFunction<ImageProps.onLoadEventDetail>;

当图片载入完毕时，发布到 AppService 的事件名，事件对象 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property onTap

onTap?: CommonEventFunction;

点击图片时触发。 alipay

property originalSrc

originalSrc?: string;

预览时显示的图片地址 swan

property preview

preview?: string;

点击后是否预览图片。在不设置的情况下，若 image 未监听点击事件且宽度大于 1/4 屏宽，则默认开启 swan

property showMenuByLongpress

showMenuByLongpress?: boolean;

开启长按图片显示识别小程序码菜单 false weapp

property src

src: string;

图片资源地址 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property svg

svg?: boolean;

默认不解析 svg 格式，svg 图片只支持 aspectFit false rn

property webp

webp?: boolean;

默认不解析 webP 格式，只支持网络资源 false weapp, swan

interface InputProps

interface InputProps extends StandardProps, FormItemProps {}

property adjustPosition

adjustPosition?: boolean;

键盘弹起时，是否自动上推页面 true weapp, swan, tt, qq, jd, harmony

property alwaysEmbed

alwaysEmbed?: boolean;

强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) false weapp

property alwaysSystem

alwaysSystem?: boolean;

是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效。 false alipay

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property autoFocus

autoFocus?: boolean;

(即将废弃，请直接使用 focus )自动聚焦，拉起键盘 false
Deprecated
weapp, qq, jd, h5, harmony_hybrid

property clueType

clueType?: number;

用于分发目的。取值：0 和 1，其中 0 表示默认，1 表示手机号，需要和留资分发配置一起使用，详情见留资分发配置。 tt 0

property confirmHold

confirmHold?: boolean;

点击键盘右下角按钮时是否保持键盘不收起 false weapp, alipay, swan, tt, qq, jd

property confirmType

confirmType?: keyof InputProps.ConfirmType;

设置键盘右下角按钮的文字，仅在type='text'时生效 confirm-type 与 enableNative 属性冲突，若希望 confirm-type 生效，enableNative 不能设定为 false，而且不能设定 always-system done weapp, alipay, swan, tt, qq, jd, rn, harmony, ascf

property controlled

controlled?: boolean;

是否为受控组件。为 true 时，value 内容会完全受 setData 控制。
建议当 type 值为 text 时不要将 controlled 设置为 true,详见 [Bugs & Tips](https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip) false alipay

property cursor

cursor?: number;

指定focus时的光标位置 weapp, alipay, swan, tt, qq, jd, rn, harmony

property cursorColor

cursorColor?: string;

光标颜色。iOS 下的格式为十六进制颜色值 #000000，安卓下的只支持 default 和 green，Skyline 下无限制 weapp

property cursorSpacing

cursorSpacing?: number;

指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 0 weapp, swan, tt, qq, jd

property defaultValue

defaultValue?: string;

设置 React 非受控输入框的初始内容 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property disabled

disabled?: boolean;

是否禁用 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property focus

focus?: boolean;

获取焦点 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property holdKeyboard

holdKeyboard?: boolean;

focus 时，点击页面的时候不收起键盘 false weapp, swan, tt

property maxlength

maxlength?: number;

最大输入长度，设置为 -1 的时候不限制最大长度 140 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property name

name?: string;

组件名字，用于表单提交获取数据。 alipay

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onBlur

onBlur?: CommonEventFunction<InputProps.inputValueEventDetail>;

输入框失去焦点时触发 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onConfirm

onConfirm?: CommonEventFunction<InputProps.inputValueEventDetail>;

点击完成按钮时触发 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onFocus

onFocus?: CommonEventFunction<InputProps.inputForceEventDetail>;

输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onInput

onInput?: CommonEventFunction<InputProps.inputEventDetail>;

当键盘输入时，触发input事件，event.detail = {value, cursor, keyCode}，处理函数可以直接 return 一个字符串，将替换输入框的内容。 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onKeyboardCompositionEnd

onKeyboardCompositionEnd?: CommonEventFunction;

输入法输入结束时触发（仅当输入法支持时触发） weapp

property onKeyboardCompositionStart

onKeyboardCompositionStart?: CommonEventFunction;

输入法开始新的输入时触发（仅当输入法支持时触发） weapp

property onKeyboardCompositionUpdate

onKeyboardCompositionUpdate?: CommonEventFunction;

输入法输入字符时触发（仅当输入法支持时触发） weapp

property onKeyboardHeightChange

onKeyboardHeightChange?: CommonEventFunction<InputProps.onKeyboardHeightChangeEventDetail>;

键盘高度发生变化的时候触发此事件 weapp, tt, qq, harmony

property onKeyoardHeightChangeWorklet

onKeyoardHeightChangeWorklet?: string;

键盘高度变化时触发。event.detail = {height: height, pageBottomPadding: pageBottomPadding}； height: 键盘高度，pageBottomPadding: 页面上推高度 weapp

property onNickNameReview

onNickNameReview?: CommonEventFunction;

用户昵称审核完毕后触发，仅在 type 为 "nickname" 时有效，event.detail = { pass, timeout } weapp

property onSelectionChange

onSelectionChange?: CommonEventFunction;

选区改变事件, {selectionStart, selectionEnd} weapp

property password

password?: boolean;

是否是密码类型 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property placeholder

placeholder?: string;

输入框为空时占位符 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property placeholderClass

placeholderClass?: string;

指定 placeholder 的样式类 "input-placeholder" weapp, alipay, swan, tt, qq, jd, ascf

property placeholderStyle

placeholderStyle?: string;

指定 placeholder 的样式 weapp, alipay, swan, tt, qq, jd, rn, harmony, ascf

property placeholderTextColor

placeholderTextColor?: string;

指定 placeholder 的文本颜色 rn, harmony

property randomNumber

randomNumber?: boolean;

当 type 为 number, digit, idcard 数字键盘是否随机排列 false alipay

property safePasswordCertPath

safePasswordCertPath?: string;

安全键盘加密公钥的路径，只支持包内路径 weapp

property safePasswordCustomHash

safePasswordCustomHash?: string;

安全键盘计算hash的算法表达式，如 md5(sha1('foo' + sha256(sm3(password + 'bar')))) weapp

property safePasswordLength

safePasswordLength?: number;

安全键盘输入密码长度 weapp

property safePasswordNonce

safePasswordNonce?: string;

安全键盘加密盐值 weapp

property safePasswordSalt

safePasswordSalt?: string;

安全键盘计算hash盐值，若指定custom-hash 则无效 weapp

property safePasswordTimeStamp

safePasswordTimeStamp?: number;

安全键盘加密时间戳 weapp

property selectionEnd

selectionEnd?: number;

光标结束位置，自动聚集时有效，需与selection-start搭配使用 -1 weapp, alipay, swan, tt, qq, jd, rn

property selectionStart

selectionStart?: number;

光标起始位置，自动聚集时有效，需与selection-end搭配使用 -1 weapp, alipay, swan, tt, qq, jd, rn

property type

type?: keyof InputProps.Type;

input 的类型 "text" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property value

value?: string;

输入框的初始内容 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface ITouch

interface ITouch extends Touch {}

property clientX

clientX: number;

距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

property clientY

clientY: number;

距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

property identifier

identifier: number;

触摸点的标识符

property pageX

pageX: number;

距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴

property pageY

pageY: number;

距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴

interface LabelProps

interface LabelProps extends StandardProps {}

property for

for?: string;

绑定控件的 id weapp, alipay, swan, tt, qq, jd, h5, harmony, harmony_hybrid, ascf

interface LivePlayerProps

interface LivePlayerProps extends StandardProps {}

property autoPauseIfNavigate

autoPauseIfNavigate?: boolean;

当跳转到本小程序的其他页面时，是否自动暂停本页面的实时音视频播放 true weapp, qq

property autoPauseIfOpenNative

autoPauseIfOpenNative?: boolean;

当跳转到其它微信原生页面时，是否自动暂停本页面的实时音视频播放 true weapp, qq

property autoplay

autoplay?: boolean;

自动播放 false weapp, swan, tt, qq, jd

property backgroundMute

backgroundMute?: boolean;

进入后台时是否静音（已废弃，默认退台静音） false weapp, swan
Deprecated

property enableAutoRotation

enableAutoRotation?: boolean;

是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效 weapp false

property enableCasting

enableCasting?: boolean;

是否支持投屏。开启后，可以通过 LivePlayerContext 上相关方法进行操作。 weapp false

property enableMetadata

enableMetadata?: string;

是否回调metadata qq

property id

id?: string;

live-player 属性的唯一标志符 swan

property maxCache

maxCache?: number;

最大缓冲区，单位s 3 weapp, swan, qq

property minCache

minCache?: number;

最小缓冲区，单位s 1 weapp, swan, qq

property mode

mode?: keyof LivePlayerProps.Mode;

模式 "live" weapp, qq, jd

property muted

muted?: boolean;

是否静音 false weapp, swan, tt, qq, jd

property objectFit

objectFit?: keyof LivePlayerProps.objectFit;

填充模式 "contain" weapp, swan, tt, qq, jd

property onAudioVolumeNotify

onAudioVolumeNotify?: CommonEventFunction<{}>;

播放音量大小通知，detail = {} weapp

property onCastingInterrupt

onCastingInterrupt?: CommonEventFunction;

投屏被中断时触发 weapp

property onCastingStateChange

onCastingStateChange?: CommonEventFunction<{
    type: any;
    state: 'success' | 'fail';
}>;

投屏成功/失败时触发 detail = { type, state: "success"/"fail" } weapp

property onCastingUserSelect

onCastingUserSelect?: CommonEventFunction<{
    state: 'success' | 'fail';
}>;

用户选择投屏设备时触发 detail = { state: "success"/"fail" } weapp

property onEnterPictureInPicture

onEnterPictureInPicture?: CommonEventFunction;

播放器进入小窗 weapp

property onError

onError?: CommonEventFunction;

播放错误事件 tt

property onFullScreenChange

onFullScreenChange?: CommonEventFunction<LivePlayerProps.onFullScreenChangeEventDetail>;

全屏变化事件，detail = {direction, fullScreen} weapp, swan, tt, qq, jd

property onLeavePictureInPicture

onLeavePictureInPicture?: CommonEventFunction;

播放器退出小窗 weapp

property onMetaDataChange

onMetaDataChange?: CommonEventFunction;

metadata通知，detail = {info} qq

property onNetStatus

onNetStatus?: CommonEventFunction<LivePlayerProps.onNetStatusEventDetail>;

网络状态通知，detail = {info} weapp, swan, qq

property onStateChange

onStateChange?: CommonEventFunction<LivePlayerProps.onStateChangeEventDetail>;

播放状态变化事件，detail = {code} weapp, swan, tt, qq, jd

property orientation

orientation?: keyof LivePlayerProps.Orientation;

画面方向 "vertical" weapp, swan, tt, qq, jd

property pictureInPictureMode

pictureInPictureMode?: ('push' | 'pop')[] | 'push' | 'pop' | '';

设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） weapp

property referrerPolicy

referrerPolicy?: 'origin' | 'no-referrer';

格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html ，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； 'no-referrer' weapp

property signature

signature?: string;

设置署名水印 tt

property soundMode

soundMode?: keyof LivePlayerProps.soundMode;

声音输出方式 "speaker" weapp, qq, jd

property src

src?: string;

音视频地址。目前仅支持 flv, rtmp 格式 weapp, swan, tt, qq, jd

interface LivePusherProps

interface LivePusherProps extends StandardProps {}

实时音视频录制。需要用户授权 scope.camera、scope.record 暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限。

property aspect

aspect?: '9:16' | '3:4';

宽高比，可选值有 3:4, 9:16 "9:16" weapp, qq

property audioQuality

audioQuality?: string;

高音质(48KHz)或低音质(16KHz)，值为high, low "high" weapp, qq

property audioReverbType

audioReverbType?: keyof LivePusherProps.AudioReverbType;

音频混响类型 0 weapp, qq

property audioVolumeType

audioVolumeType?: keyof LivePusherProps.AudioVolumeType;

音量类型 "voicecall" weapp

property autoFocus

autoFocus?: boolean;

自动聚集 true weapp, qq

property autopush

autopush?: boolean;

自动推流 false weapp, qq

property backgroundMute

backgroundMute?: boolean;

进入后台时是否静音 false weapp, qq

property beauty

beauty?: number;

美颜，取值范围 0-9 ，0 表示关闭 0 weapp, qq

property beautyStyle

beautyStyle?: keyof LivePusherProps.BeautyStyleType;

设置美颜类型 smooth weapp

property customEffect

customEffect?: boolean;

是否启动自定义特效，设定后不能更改 weapp false

property devicePosition

devicePosition?: string;

前置或后置，值为front, back "front" weapp, qq

property enableAgc

enableAgc?: boolean;

是否开启音频自动增益 false weapp

property enableAns

enableAns?: boolean;

是否开启音频噪声抑制 false weapp

property enableCamera

enableCamera?: boolean;

开启摄像头 true weapp, qq

property enableMic

enableMic?: boolean;

开启或关闭麦克风 true weapp

property enableVideoCustomRender

enableVideoCustomRender?: boolean;

自定义渲染，允许开发者自行处理所采集的视频帧 false weapp

property eyeBigness

eyeBigness?: number;

自定义特效大眼效果，取值 0~1。需要开启 custom-effect weapp 0

property faceThinness

faceThinness?: number;

自定义特效瘦脸效果，取值 0~1。需要开启 custom-effect weapp 0

property filter

filter?: keyof LivePusherProps.FilterType;

设置色彩滤镜 standard weapp

property fps

fps?: number;

帧率，有效值为 1~30 weapp 15

property localMirror

localMirror?: keyof LivePusherProps.LocalMirror;

控制本地预览画面是否镜像 "auto" weapp

property maxBitrate

maxBitrate?: number;

最大码率 1000 weapp, qq

property minBitrate

minBitrate?: number;

最小码率 200 weapp, qq

property mirror

mirror?: boolean;

设置推流画面是否镜像，产生的效果在 LivePlayer 反应到 false weapp, qq

property mode

mode?: 'SD' | 'HD' | 'FHD' | 'RTC';

SD（标清）, HD（高清）, FHD（超清）, RTC（实时通话） "RTC" weapp, qq

property muted

muted?: boolean;

是否静音。即将废弃，可用 enable-mic 替代 false
Deprecated
weapp, qq

property onAudioVolumeNotify

onAudioVolumeNotify?: CommonEventFunction;

返回麦克风采集的音量大小 weapp

property onBgmComplete

onBgmComplete?: CommonEventFunction;

背景音播放完成时触发 weapp, qq

property onBgmProgress

onBgmProgress?: CommonEventFunction<LivePusherProps.onBgmProgressEventDetail>;

背景音进度变化时触发，detail = {progress, duration} weapp, qq

property onBgmStart

onBgmStart?: CommonEventFunction;

背景音开始播放时触发 weapp, qq

property onEnterPictureInPicture

onEnterPictureInPicture?: string;

进入小窗 weapp

property onError

onError?: CommonEventFunction<LivePusherProps.onErrorEventDetail>;

渲染错误事件，detail = {errMsg, errCode} weapp, qq

property onLeavePictureInPicture

onLeavePictureInPicture?: string;

退出小窗 weapp

property onNetStatus

onNetStatus?: CommonEventFunction;

网络状态通知，detail = {info} weapp, qq

property onStateChange

onStateChange?: CommonEventFunction<LivePusherProps.onStateChangeEventDetail>;

状态变化事件，detail = {code} weapp, qq

property orientation

orientation?: keyof LivePusherProps.Orientation;

画面方向 "vertical" weapp, qq

property pictureInPictureMode

pictureInPictureMode?: string | any[];

设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） weapp

property remoteMirror

remoteMirror?: boolean;

设置推流画面是否镜像，产生的效果在 LivePlayer 反应到
**Note:** 同 mirror 属性，后续 mirror 将废弃 false weapp

property skinSmoothness

skinSmoothness?: number;

自定义特效磨皮效果，取值 0~1。需要开启 custom-effect weapp 0

property skinWhiteness

skinWhiteness?: number;

自定义特效美白效果，取值 0~1。需要开启 custom-effect weapp 0

property url

url?: string;

推流地址。目前仅支持 rtmp 格式 weapp, qq

property videoHeight

videoHeight?: number;

上推的视频流的分辨率高度 640 weapp

property videoWidth

videoWidth?: number;

上推的视频流的分辨率宽度 360 weapp

property voiceChangerType

voiceChangerType?: number;

0：关闭变声；1：熊孩子；2：萝莉；3：大叔；4：重金属；6：外国人；7：困兽；8：死肥仔；9：强电流；10：重机械；11：空灵 weapp 0

property waitingImage

waitingImage?: string;

进入后台时推流的等待画面 weapp, qq

property waitingImageHash

waitingImageHash?: string;

等待画面资源的MD5值 weapp, qq

property whiteness

whiteness?: number;

美白，取值范围 0-9 ，0 表示关闭 0 weapp, qq

property zoom

zoom?: boolean;

调整焦距 false weapp, qq

interface MapProps

interface MapProps extends StandardProps {}

property circles

circles?: MapProps.circle[];

圆 weapp, alipay, swan, tt, qq, jd, ascf

property controls

controls?: MapProps.control[];

控件（即将废弃，建议使用 cover-view 代替）
Deprecated
weapp, alipay, swan, jd

property covers

covers?: any[];

**即将移除，请使用 markers** weapp
Deprecated

property customMapStyle

customMapStyle?: string;

设置地图样式。
default：默认样式 light：精简样式 alipay

property enable3D

enable3D?: boolean;

展示3D楼块 weapp, swan, tt, qq false

property enableAutoMaxOverlooking

enableAutoMaxOverlooking?: boolean;

开启最大俯视角，俯视角度从 45 度拓展到 75 度 weapp false

property enableBuilding

enableBuilding?: boolean;

是否展示建筑物 weapp, alipay, tt true

property enableCenterScale

enableCenterScale?: boolean;

指定中心点缩放地图。true表示使用组件中心点。 ascf

property enableOverlooking

enableOverlooking?: boolean;

开启俯视 false weapp, alipay, swan, tt, qq

property enablePoi

enablePoi?: boolean;

是否展示 POI 点 weapp, alipay, tt true

property enableRotate

enableRotate?: boolean;

是否支持旋转 false weapp, alipay, swan, tt, qq, ascf

property enableSatellite

enableSatellite?: boolean;

是否开启卫星图 false weapp, alipay, tt, qq

property enableScroll

enableScroll?: boolean;

是否支持拖动 true weapp, alipay, swan, tt, qq, ascf

property enableTraffic

enableTraffic?: boolean;

是否开启实时路况 false weapp, alipay, tt, qq

property enableZoom

enableZoom?: boolean;

是否支持缩放 true weapp, alipay, swan, tt, qq, ascf

property groundOverlays

groundOverlays?: MapProps.groundOverlays[];

覆盖物，自定义贴图 alipay

property includePadding

includePadding?: {
    [key in 'left' | 'right' | 'top' | 'bottom']: number | string;
};

视野在地图 padding 范围内展示 alipay

property includePoints

includePoints?: MapProps.point[];

缩放视野以包含所有给定的坐标点 weapp, alipay, swan, tt, qq, jd

property latitude

latitude: number;

中心纬度 weapp, alipay, swan, tt, qq, jd, ascf

property layerStyle

layerStyle?: number;

个性化地图配置的 style，不支持动态修改 1 weapp, qq

property longitude

longitude: number;

中心经度 weapp, alipay, swan, tt, qq, jd, ascf

property markers

markers?: MapProps.marker[];

标记点 weapp, alipay, swan, tt, qq, jd, ascf

property maxScale

maxScale?: number;

最大缩放级别 3-20 20 weapp, tt

property minScale

minScale?: number;

最小缩放级别 3-20 3 weapp, tt

property onAbilityFailed

onAbilityFailed?: CommonEventFunction<MapProps.onAbilityEventDetail>;

地图能力失败时触发，e.detail = {ability, errCode, errMsg} weapp

property onAbilitySuccess

onAbilitySuccess?: CommonEventFunction<MapProps.onAbilityEventDetail>;

地图能力生效时触发，e.detail = {ability, errCode, errMsg} weapp

property onAnchorPointTap

onAnchorPointTap?: CommonEventFunction<MapProps.point>;

点击定位标时触发，e.detail = {longitude, latitude} weapp, tt

property onAuthSuccess

onAuthSuccess?: CommonEventFunction<{ errCode: number; errMsg: string }>;

地图鉴权结果成功时触发，e.detail = {errCode, errMsg} weapp

property onCalloutTap

onCalloutTap?: CommonEventFunction<MapProps.onCalloutTapEventDetail>;

点击标记点对应的气泡时触发，e.detail = {markerId} alipay, ascf

property onCallOutTap

onCallOutTap?: CommonEventFunction<MapProps.onCalloutTapEventDetail>;

点击标记点对应的气泡时触发e.detail = {markerId} weapp, swan, tt, jd

property onControlTap

onControlTap?: CommonEventFunction<MapProps.onControlTapEventDetail>;

点击控件时触发，e.detail = {controlId} weapp, alipay, swan, jd

property onError

onError: CommonEventFunction<MapProps.point>;

组件错误时触发，例如创建或鉴权失败，e.detail = {longitude, latitude} weapp

property onInitComplete

onInitComplete?: CommonEventFunction;

地图初始化完成即将开始渲染第一帧时触发。 alipay

property onInterpolatePoint

onInterpolatePoint?: CommonEventFunction<MapProps.onInterpolatePointEventDetail>;

MapContext.moveAlong 插值动画时触发。e.detail = {markerId, longitude, latitude, animationStatus: "interpolating" | "complete"} weapp

property onLabelTap

onLabelTap?: CommonEventFunction<MapProps.onLabelTapEventDetail>;

点击label时触发，e.detail = {markerId} weapp, tt

property onMarkerTap

onMarkerTap?: CommonEventFunction<MapProps.onMarkerTapEventDetail>;

点击标记点时触发，e.detail = {markerId} weapp, alipay, swan, tt, qq, jd, ascf

property onPanelTap

onPanelTap?: CommonEventFunction<{
    panelId;
    layoutId;
}>;

点击 panel 时触发。 alipay

property onPoiTap

onPoiTap?: CommonEventFunction<MapProps.onPoiTapEventDetail>;

点击地图poi点时触发，e.detail = {name, longitude, latitude} weapp, swan, qq

property onPolylineTap

onPolylineTap?: CommonEventFunction<MapProps.onPolylineTapEventDetail>;

点击地图路线时触发，e.detail = {longitude, latitude} weapp, swan, qq

property onRegionChange

onRegionChange?: CommonEventFunction<
    MapProps.onRegionEventDetail<'begin'> | MapProps.onRegionEventDetail<'end'>
>;

视野发生变化时触发 weapp, alipay, swan, tt, qq, jd, ascf

property onTap

onTap?: CommonEventFunction;

点击地图时触发 weapp, alipay, swan, tt, qq, jd, ascf

property onUpdated

onUpdated?: CommonEventFunction;

在地图渲染更新完成时触发 weapp, swan, tt, qq, ascf

property optimize

optimize?: boolean;

保持缩放比例不变 alipay false

property panels

panels?: MapProps.panels[];

基于 map 高级定制渲染，设置覆盖在地图上的 view。 alipay

property polygon

polygon?: MapProps.polygon[];

覆盖物，多边形。 alipay

property polygons

polygons?: MapProps.polygon[];

多边形 weapp, swan, tt, qq, ascf

property polyline

polyline?: MapProps.polyline[];

路线 weapp, alipay, swan, tt, qq, jd, ascf

property rotate

rotate?: number;

旋转角度，范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角 0 weapp, alipay, tt, qq

property scale

scale?: number;

缩放级别，取值范围为 3-20 16 weapp, alipay, swan, tt, qq, jd, ascf 取值范围为4-21 取值范围为5-18

property setting

setting?:
    | MapProps
    | {
          [key: string]: number | string | any;
      };

配置项
提供 setting 对象统一设置地图配置。同时对于一些动画属性如 rotate 和 skew，通过 setData 分开设置时无法同时生效，需通过 settting 统一修改。 weapp, alipay, qq

property showCompass

showCompass?: boolean;

显示指南针 false weapp, alipay, swan, tt, qq, ascf

property showLocation

showLocation?: boolean;

显示带有方向的当前定位点 false weapp, alipay, swan, tt, qq, jd, ascf

property showScale

showScale?: boolean;

显示比例尺 false weapp, alipay, tt, qq

property skew

skew?: number;

倾斜角度，范围 0 ~ 40 , 关于 z 轴的倾角 0 weapp, alipay, tt, qq

property subkey

subkey?: string;

个性化地图使用的 key weapp, qq

property theme

theme?: string;

否 jd

property tileOverlay

tileOverlay?: MapProps.tileOverlay;

覆盖物，网格贴图 alipay

interface MatchMediaProps

interface MatchMediaProps extends StandardProps {}

property height

height?: number;

页面高度（ px 为单位） weapp, alipay, jd

property maxHeight

maxHeight?: number;

页面最大高度（ px 为单位） weapp, alipay, jd

property maxWidth

maxWidth?: number;

页面最大宽度（ px 为单位） weapp, alipay, jd

property minHeight

minHeight?: number;

页面最小高度（ px 为单位） weapp, alipay, jd

property minWidth

minWidth?: number;

页面最小宽度（ px 为单位） weapp, alipay, jd

property orientation

orientation?: string;

屏幕方向（ landscape 或 portrait ） weapp, alipay, jd

property width

width?: number;

页面宽度（ px 为单位） weapp, alipay, jd

interface MovableAreaProps

interface MovableAreaProps extends StandardProps {}

property scaleArea

scaleArea?: boolean;

当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area false weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

interface MovableViewProps

interface MovableViewProps extends Omit<StandardProps, 'animation'> {}

property animation

animation?: boolean;

是否使用动画 true weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property catchTouchEnd

catchTouchEnd?: CommonEventFunction;

触摸动作结束，事件仅作用于组件，不向父节点传递。 alipay

property catchTouchMove

catchTouchMove?: CommonEventFunction;

触摸移动事件，事件仅作用于组件，不向父节点传递。 alipay

property catchTouchStart

catchTouchStart?: CommonEventFunction;

触摸移动事件，事件仅作用于组件，不向父节点传递。 alipay

property damping

damping?: number;

阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 20 weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property direction

direction?: 'all' | 'vertical' | 'horizontal' | 'none';

movable-view 的移动方向，属性值有all、vertical、horizontal、none none weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid, ascf

property disabled

disabled?: boolean;

是否禁用 false weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid, ascf

property friction

friction?: number;

摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于 0，否则会被设置成默认值 2 weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property inertia

inertia?: boolean;

movable-view 是否带有惯性 false weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property onChange

onChange?: CommonEventFunction<MovableViewProps.onChangeEventDetail>;

拖动过程中触发的事件 weapp, alipay, swan, tt, qq, ascf

property onChangeEnd

onChangeEnd?: CommonEventFunction<MovableViewProps.onChangeEventDetail>;

拖动结束触发的事件 alipay

property onDragEnd

onDragEnd?: CommonEventFunction;

拖动结束时触发 rn

property onDragStart

onDragStart?: CommonEventFunction;

开始拖动时触发 rn

property onHTouchMove

onHTouchMove?: TouchEventFunction;

初次手指触摸后移动为横向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch weapp, swan, tt, h5, harmony_hybrid, ascf

property onScale

onScale?: CommonEventFunction<MovableViewProps.onScaleEventDetail>;

缩放过程中触发的事件 weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property onTouchCancel

onTouchCancel?: CommonEventFunction;

触摸动作被打断，如来电提醒、弹窗。 alipay

property onTouchEnd

onTouchEnd?: TouchEventFunction;

手指触摸动作结束 alipay, h5, harmony_hybrid 此事件的触发顺序会因为当前事件机制引起组件内外注册的事件执行顺序不正常，外部注册的事件可能会优先于内部执行，如需保证执行顺序一致，需要在回调函数中包裹 setTimeout 临时处理

property onTouchMove

onTouchMove?: CommonEventFunction;

触摸动作开始，事件仅作用于组件，不向父节点传递。 alipay

property onTouchStart

onTouchStart?: CommonEventFunction;

触摸动作开始，事件会向父节点传递。 alipay

property onVTouchMove

onVTouchMove?: TouchEventFunction;

初次手指触摸后移动为纵向的移动，如果 catch 此事件，则意味着 touchmove 事件也被 catch weapp, swan, tt, h5, harmony_hybrid, ascf

property outOfBounds

outOfBounds?: boolean;

超过可移动区域后，movable-view 是否还可以移动 false weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property scale

scale?: boolean;

是否支持双指缩放，默认缩放手势生效区域是在 movable-view 内 false weapp, alipay, swan, tt, qq, h5, harmony_hybrid

property scaleMax

scaleMax?: number;

定义缩放倍数最大值 10 weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property scaleMin

scaleMin?: number;

定义缩放倍数最小值 0.5 weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property scaleValue

scaleValue?: number;

定义缩放倍数，取值范围为 0.5 - 10 1 weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property x

x?: number | string;

定义 x 轴方向的偏移，如果 x 的值不在可移动范围内，会自动移动到可移动范围；改变 x 的值会触发动画 weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid, ascf

property y

y?: number | string;

定义 y 轴方向的偏移，如果 y 的值不在可移动范围内，会自动移动到可移动范围；改变 y 的值会触发动画 weapp, alipay, swan, tt, qq, h5, rn, harmony_hybrid, ascf

interface NavigationBarProps

interface NavigationBarProps extends StandardProps {}

property backgroundColor

backgroundColor?: string;

导航条背景颜色值，有效值为十六进制颜色 weapp, harmony

property colorAnimationDuration

colorAnimationDuration?: string;

改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果） 0 weapp

property colorAnimationTimingFunc

colorAnimationTimingFunc?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';

改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut "linear" weapp

property frontColor

frontColor?: string;

导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000 weapp, harmony

property loading

loading?: boolean;

是否在导航条显示 loading 加载提示 weapp, harmony

property title

title?: string;

导航条标题 weapp, harmony

interface NavigatorProps

interface NavigatorProps extends StandardProps {}

property appId

appId?: string;

当 target="miniProgram" 时有效，要打开的小程序 appId weapp, swan, qq

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property delta

delta?: number;

当 open-type 为 'navigateBack' 时有效，表示回退的层数 weapp, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property extraData

extraData?: object;

当 target="miniProgram" 时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据. weapp, swan, qq

property hoverClass

hoverClass?: string;

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 "navigator-hover" weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property hoverStartTime

hoverStartTime?: number;

按住后多久出现点击态，单位毫秒 50 weapp, alipay, swan, tt, qq, jd, ascf

property hoverStayTime

hoverStayTime?: number;

手指松开后点击态保留时间，单位毫秒 600 weapp, alipay, swan, tt, qq, jd, ascf

property hoverStopPropagation

hoverStopPropagation?: boolean;

指定是否阻止本节点的祖先节点出现点击态 false weapp, swan, tt, qq, jd, ascf

property onComplete

onComplete?: CommonEventFunction;

当 target="miniProgram" 时有效，跳转小程序完成 weapp, swan, qq, h5, harmony_hybrid

property onFail

onFail?: CommonEventFunction;

当 target="miniProgram" 时有效，跳转小程序失败 weapp, swan, qq, h5, harmony_hybrid

property onSuccess

onSuccess?: CommonEventFunction;

当 target="miniProgram" 时有效，跳转小程序成功 weapp, swan, qq, h5, harmony_hybrid

property openType

openType?: keyof NavigatorProps.OpenType;

跳转方式 "navigate" weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property path

path?: string;

当 target="miniProgram" 时有效，打开的页面路径，如果为空则打开首页 weapp, swan, qq

property shortLink

shortLink?: string;

当target="miniProgram"时有效，当传递该参数后，可以不传 app-id 和 path。链接可以通过【小程序菜单】->【复制链接】获取。 weapp

property target

target?: keyof NavigatorProps.Target;

在哪个目标上发生跳转，默认当前小程序 "self" weapp, swan, qq, ascf

property url

url?: string;

当前小程序内的跳转链接 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property version

version?: keyof NavigatorProps.Version;

当 target="miniProgram" 时有效，要打开的小程序版本 weapp, swan, qq

interface NetStatus

interface NetStatus {}

网络状态数据

property audioBitrate

audioBitrate?: number;

property netJitter

netJitter?: number;

property netSpeed

netSpeed?: number;

property videoBitrate

videoBitrate?: number;

property videoFPS

videoFPS?: number | string;

property videoGOP

videoGOP?: number;

property videoHeight

videoHeight?: number | string;

property videoWidth

videoWidth?: number | string;

interface OfficialAccountProps

interface OfficialAccountProps extends StandardProps {}

property onError

onError?: CommonEventFunction<OfficialAccountProps.Detail>;

组件加载失败时触发 weapp

property onLoad

onLoad?: CommonEventFunction<OfficialAccountProps.Detail>;

组件加载成功时触发 weapp

interface OpenDataProps

interface OpenDataProps extends StandardProps {}

property componentData

componentData?: string;

当 type=*CloudStorage 时有效，从主域透传给开放数据域的数据，会自动注入到自定义开放数据域组件的 properties 中 qq

property defaultAvatar

defaultAvatar?: string;

用户头像为空时的默认图片，支持相对路径和网络图片路径 weapp, tt

property defaultText

defaultText?: string;

数据为空时的默认文案 weapp, tt

property keyList

keyList?: string;

当 type=*CloudStorage 时有效，指定要拉取的 key 列表 qq

property lang

lang?: keyof OpenDataProps.Lang;

当 type="user*" 时生效，以哪种语言展示 userInfo "en" weapp, qq

property onError

onError?: CommonEventFunction;

群名称或用户信息为空时触发 weapp, tt, qq

property openGid

openGid?: string;

当 type="groupName" 时生效, 群id weapp

property shareTicket

shareTicket?: string;

当 type=groupCloudStorage 时有效，群分享对应的 shareTicket qq

property type

type: keyof OpenDataProps.Type;

开放数据类型 weapp, swan, tt, qq

property useEmptyValue

useEmptyValue?: string;

当数据为空且未设置默认值时，是否显示官方默认值 tt

interface PageContainerProps

interface PageContainerProps extends StandardProps {}

property closeOnSlideDown

closeOnSlideDown?: boolean;

是否在下滑一段距离后关闭 weapp, alipay, jd false

property customStyle

customStyle?: string;

自定义弹出层样式 weapp, alipay, jd, rn

property duration

duration?: number;

动画时长，单位毫秒 300 weapp, alipay, jd, rn

property onAfterEnter

onAfterEnter?: CommonEventFunction;

进入后触发 weapp, alipay, jd, rn

property onAfterLeave

onAfterLeave?: CommonEventFunction;

离开后触发 weapp, alipay, jd, rn

property onBeforeEnter

onBeforeEnter?: CommonEventFunction;

进入前触发 weapp, alipay, jd, rn

property onBeforeLeave

onBeforeLeave?: CommonEventFunction;

离开前触发 weapp, alipay, jd, rn

property onClickOverlay

onClickOverlay?: CommonEventFunction;

点击遮罩层时触发 weapp, alipay, jd

property onEnter

onEnter?: CommonEventFunction;

进入中触发 weapp, alipay, jd, rn

property onEnterCancelled

onEnterCancelled?: CommonEventFunction;

进入被打断时触发（通过 a: if 打断时不会触发）。 alipay

property onLeave

onLeave?: CommonEventFunction;

离开中触发 weapp, alipay, jd, rn

property onLeaveCancelled

onLeaveCancelled?: CommonEventFunction;

离开被打断时触发（通过 a: if 打断时不会触发）。 alipay

property overlay

overlay?: boolean;

是否显示遮罩层 true weapp, alipay, jd, rn

property overlayStyle

overlayStyle?: string;

自定义遮罩层样式 weapp, alipay, jd, rn

property position

position?: keyof PageContainerProps.Position;

弹出位置，可选值为 top bottom right center bottom weapp, alipay, jd, rn

property round

round?: boolean;

是否显示圆角 false weapp, alipay, jd, rn

property show

show?: boolean;

是否显示容器组件 false weapp, alipay, jd, rn

property zIndex

zIndex?: number;

z-index 层级 100 weapp, alipay

interface PageMetaProps

interface PageMetaProps extends StandardProps {}

property backgroundColor

backgroundColor?: string;

窗口的背景色，必须为十六进制颜色值 weapp, alipay, harmony

property backgroundColorBottom

backgroundColorBottom?: string;

底部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持 weapp, alipay, harmony

property backgroundColorTop

backgroundColorTop?: string;

顶部窗口的背景色，必须为十六进制颜色值，仅 iOS 支持 weapp, alipay, harmony

property backgroundTextStyle

backgroundTextStyle?: string;

下拉背景字体、loading 图的样式，仅支持 dark 和 light weapp

property onResize

onResize?: CommonEventFunction<PageMetaProps.onResizeEventDetail>;

页面尺寸变化时会触发 resize 事件 weapp

property onScroll

onScroll?: CommonEventFunction<PageMetaProps.onScrollEventDetail>;

页面滚动时会触发 scroll 事件 weapp, alipay

property onScrollDone

onScrollDone?: CommonEventFunction;

如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件 weapp

property pageFontSize

pageFontSize?: string;

页面 page 的字体大小，可以设置为 system ，表示使用当前用户设置的微信字体大小 weapp, alipay

property pageOrientation

pageOrientation?: string;

页面的方向，可为 auto portrait 或 landscape weapp

property pageStyle

pageStyle?: string;

页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点 "" weapp, alipay

property rootBackgroundColor

rootBackgroundColor?: string;

页面内容的背景色，用于页面中的空白部分和页面大小变化 resize 动画期间的临时空闲区域 weapp, alipay, harmony

property rootFontSize

rootFontSize?: string;

页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小 "" weapp, alipay

property scrollDuration

scrollDuration?: number;

滚动动画时长 300 weapp, alipay, harmony

property scrollTop

scrollTop?: string;

滚动位置，可以使用 px 或者 rpx 为单位，在被设置时，页面会滚动到对应位置 "" weapp, alipay, harmony

interface PickerDateProps

interface PickerDateProps extends PickerStandardProps {}

日期选择器：mode = date

property defaultValue

defaultValue?: string;

设置 React 非受控状态下的初始取值 weapp, h5, rn, ascf

property end

end?: string;

仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的结束，字符串格式为"YYYY-MM-DD" weapp, h5, rn, harmony, harmony_hybrid, ascf

property fields

fields?: keyof PickerDateProps.Fields;

有效值 year, month, day，表示选择器的粒度 weapp, h5, rn, harmony_hybrid "day"

property mode

mode: 'date';

选择器类型

property onChange

onChange: CommonEventFunction<PickerDateProps.ChangeEventDetail>;

value 改变时触发 change 事件 weapp, h5, rn, harmony, harmony_hybrid, ascf

property start

start?: string;

仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的开始，字符串格式为"YYYY-MM-DD" weapp, h5, rn, harmony, harmony_hybrid, ascf

property value

value: string;

表示选中的日期，格式为"YYYY-MM-DD" weapp, h5, rn, harmony, harmony_hybrid, ascf 0

interface PickerMultiSelectorProps

interface PickerMultiSelectorProps extends PickerStandardProps {}

多列选择器：mode = multiSelector

property indicatorStyle

indicatorStyle?: StyleProp<ViewStyle>;

mode为 selector 或 multiSelector 时 indicatorStyle 有效 rn {}

property itemStyle

itemStyle?: StyleProp<TextStyle>;

mode为 selector 或 multiSelector 时 itemStyle 有效 rn {}

property mode

mode: 'multiSelector';

选择器类型

property onChange

onChange: CommonEventFunction<PickerMultiSelectorProps.ChangeEventDetail>;

当 value 改变时触发 change 事件 weapp, h5, rn, harmony, harmony_hybrid, ascf

property onColumnChange

onColumnChange?: CommonEventFunction<PickerMultiSelectorProps.ColumnChangeEventDetail>;

列改变时触发 weapp, h5, rn, harmony, harmony_hybrid, ascf

property range

range: Array<string[]> | Array<number[]> | Array<Record<string, any>[]>;

mode为 selector 或 multiSelector 时，range 有效 weapp, h5, rn, harmony, harmony_hybrid, ascf []

property rangeKey

rangeKey?: string;

当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容 weapp, h5, rn, harmony, harmony_hybrid, ascf

property value

value: number[] | string[] | Record<string, any>[];

表示选择了 range 中的第几个（下标从 0 开始） weapp, h5, rn, harmony, harmony_hybrid, ascf []

interface PickerRegionProps

interface PickerRegionProps extends PickerStandardProps {}

省市区选择器：mode = region

property customItem

customItem?: string;

可为每一列的顶部添加一个自定义的项 weapp, h5, rn, harmony_hybrid

property defaultValue

defaultValue?: string[];

设置 React 非受控状态下的初始取值 weapp, h5, rn, ascf

property level

level?: keyof PickerRegionProps.Level;

选择器层级 weapp "region"

property mode

mode: 'region';

选择器类型

property onChange

onChange: CommonEventFunction<PickerRegionProps.ChangeEventDetail>;

value 改变时触发 change 事件 weapp, h5, rn, harmony_hybrid, ascf

property regionData

regionData?: PickerRegionProps.RegionData[];

自定义省市区数据 rn

property value

value?: string[];

表示选中的省市区，默认选中每一列的第一个值 weapp, h5, rn, harmony_hybrid, ascf []

interface PickerSelectorProps

interface PickerSelectorProps extends PickerStandardProps {}

普通选择器：mode = selector

property defaultValue

defaultValue?: number;

设置 React 非受控状态下的初始取值 weapp, h5, rn, harmony_hybrid, ascf

property indicatorStyle

indicatorStyle?: StyleProp<ViewStyle>;

mode为 selector 或 multiSelector 时 indicatorStyle 有效 rn {}

property itemStyle

itemStyle?: StyleProp<TextStyle>;

mode为 selector 或 multiSelector 时 itemStyle 有效 rn {}

property mode

mode?: 'selector';

选择器类型

property onChange

onChange?: CommonEventFunction<PickerSelectorProps.ChangeEventDetail>;

value 改变时触发 change 事件 weapp, h5, rn, harmony, harmony_hybrid

property range

range: string[] | number[] | Record<string, any>[];

mode为 selector 或 multiSelector 时，range 有效 weapp, h5, rn, harmony, harmony_hybrid, ascf []

property rangeKey

rangeKey?: string;

当 range 是一个 Object Array 时，通过 rangeKey 来指定 Object 中 key 的值作为选择器显示内容 weapp, h5, rn, harmony, harmony_hybrid, ascf

property value

value?: number;

表示选择了 range 中的第几个（下标从 0 开始） weapp, h5, rn, harmony, harmony_hybrid, ascf 0

interface PickerTimeProps

interface PickerTimeProps extends PickerStandardProps {}

时间选择器：mode = time

property defaultValue

defaultValue?: string;

设置 React 非受控状态下的初始取值 weapp, h5, rn, ascf

property end

end?: string;

仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的结束，字符串格式为"hh:mm" weapp, h5, rn, harmony, harmony_hybrid, ascf

property mode

mode: 'time';

选择器类型

property onChange

onChange: CommonEventFunction<PickerTimeProps.ChangeEventDetail>;

value 改变时触发 change 事件 weapp, h5, rn, harmony, harmony_hybrid, ascf

property start

start?: string;

仅当 mode 为 "time" 或 "date" 时有效，表示有效时间范围的开始，字符串格式为"hh:mm" weapp, h5, rn, harmony, harmony_hybrid, ascf

property value

value?: string;

value 的值表示选择了 range 中的第几个（下标从 0 开始） weapp, h5, rn, harmony, harmony_hybrid, ascf

interface PickerViewProps

interface PickerViewProps extends StandardProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property defaultValue

defaultValue?: number[];

设置 React 非受控状态下的初始取值 weapp, alipay, swan, tt, qq, jd, rn, ascf

property immediateChange

immediateChange?: boolean;

是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 weapp, alipay, tt false

property indicatorClass

indicatorClass?: string;

设置选择器中间选中框的类名 weapp, alipay, swan, tt, qq, jd

property indicatorStyle

indicatorStyle?: string;

设置选择器中间选中框的样式 weapp, alipay, swan, tt, qq, jd, rn, ascf

property maskClass

maskClass?: string;

设置蒙层的类名 weapp, alipay, swan, tt, qq, jd

property maskStyle

maskStyle?: string;

设置蒙层的样式 weapp, alipay, swan, tt, qq, jd

property onChange

onChange?: CommonEventFunction<PickerViewProps.onChangeEventDetail>;

当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始） weapp, alipay, swan, tt, qq, jd, rn, ascf

property onPickEnd

onPickEnd?: CommonEventFunction;

当滚动选择结束时候触发事件 weapp, alipay, tt, qq, ascf

property onPickStart

onPickStart?: CommonEventFunction;

当滚动选择开始时候触发事件 weapp, alipay, tt, qq, ascf

property title

title?: string;

选择器标题，建议标题控制在 12 个中文汉字长度内，避免出现截断现象, 截断部分将以 ... 形式展示 swan

property value

value?: number[];

数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 weapp, alipay, swan, tt, qq, jd, rn, ascf

interface ProgressProps

interface ProgressProps extends StandardProps {}

property active

active?: boolean;

进度条从左往右的动画 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property activeColor

activeColor?: string;

已选择的进度条的颜色 "#09BB07" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property activeMode

activeMode?: 'backwards' | 'forwards';

backwards: 动画从头播
forwards: 动画从上次结束点接着播 backwards weapp, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property backgroundColor

backgroundColor?: string;

未选择的进度条的颜色 "#EBEBEB" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property borderRadius

borderRadius?: number | string;

圆角大小 0 weapp, swan, qq, jd, h5, harmony_hybrid, ascf

property color

color?: string;

进度条颜色 (请使用 activeColor) "#09BB07" weapp, swan, qq, jd, h5, harmony_hybrid, ascf

property duration

duration?: number;

进度增加 1% 所需毫秒数 30 weapp, swan, tt, jd, h5, harmony_hybrid, ascf

property fontSize

fontSize?: number | string;

右侧百分比字体大小 16 weapp, swan, qq, jd, h5, harmony_hybrid, ascf

property onActiveEnd

onActiveEnd?: CommonEventFunction;

动画完成事件 weapp, tt, qq, jd, h5, harmony_hybrid, ascf

property percent

percent?: number;

百分比 0~100 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property showInfo

showInfo?: boolean;

在进度条右侧显示百分比 false weapp, alipay, swan, qq, jd, h5, rn, harmony_hybrid, ascf

property strokeWidth

strokeWidth?: number | string;

进度条线的宽度 6 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

interface RadioGroupProps

interface RadioGroupProps extends StandardProps, FormItemProps {}

property name

name?: string;

组件名字，用于表单提交获取数据。 alipay, tt, harmony

property onChange

onChange?: CommonEventFunction;

RadioGroup 中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]} weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

interface RadioProps

interface RadioProps extends StandardProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property checked

checked?: boolean;

当前是否选中 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property color

color?: string;

Radio 的颜色，同 css 的 color "#09BB07" weapp, alipay, swan, tt, qq, jd, rn, harmony, ascf

property disabled

disabled?: boolean;

是否禁用 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property name

name?: string;

Radio 的名字 h5, harmony, harmony_hybrid

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onChange

onChange?: CommonEventFunction<{
    value?: string;
}>;

中的选中项发生变化时触发 change 事件 h5, rn, harmony, harmony_hybrid

property value

value?: string;

<Radio/> 标识。当该<Radio/> 选中时，<RadioGroup/>的 change 事件会携带<Radio/>的 value weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface RichTextProps

interface RichTextProps extends StandardProps {}

property imageMenuPrevent

imageMenuPrevent?: string;

阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性 false swan

property mode

mode?: 'default' | 'compat' | 'aggressive' | 'inline-block' | 'web';

布局兼容模式 weapp default

property nodes

nodes?: Nodes;

节点列表/ HTML String weapp, jd, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid, ascf

property onLongtap

onLongtap?: CommonEventFunction;

触摸后，超过 500ms 再离开。 alipay

property onTap

onTap?: CommonEventFunction;

触摸。 alipay

property onTouchcancel

onTouchcancel?: CommonEventFunction;

触摸动作被打断。 alipay

property onTouchend

onTouchend?: CommonEventFunction;

触摸动作结束。 alipay

property onTouchmove

onTouchmove?: CommonEventFunction;

触摸移动事件。 alipay

property onTouchstart

onTouchstart?: CommonEventFunction;

触摸动作开始。 alipay

property preview

preview?: string;

富文本中的图片是否可点击预览。在不设置的情况下，若 rich-text 未监听点击事件，则默认开启。未显示设置 preview 时会进行点击默认预览判断，建议显示设置 preview swan

property selectable

selectable?: boolean;

富文本是否可以长按选中，可用于复制，粘贴，长按搜索等场景 false（基础库 3.150.1 以前版本）true（基础库 3.150.1 及以后版本） swan, h5, harmony_hybrid

property space

space?: keyof RichTextProps.TSpace;

显示连续空格 weapp, jd, alipay, tt, qq, h5, rn, harmony_hybrid, ascf

property userSelect

userSelect?: boolean;

文本是否可选，该属性会使节点显示为 block false weapp, jd, h5, harmony_hybrid, ascf

interface ScrollViewProps

interface ScrollViewProps extends StandardProps {}

property adjustDecelerationVelocityWorklet

adjustDecelerationVelocityWorklet?: string;

指定手指抬起时做惯性滚动的初速度。(velocity: number) => number weapp

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property associativeContainer

associativeContainer?: 'draggable-sheet' | 'nested-scroll-view' | 'pop-gesture';

关联的滚动容器 draggable-sheet - 关联 draggable-sheet 组件 3.2.0 nested-scroll-view - 关联 type=nested 嵌套模式 3.2.0 pop-gesture - 关联页面手势返回 3.4.0 weapp ''

property bounces

bounces?: boolean;

iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效) weapp, swan true

property cacheExtent

cacheExtent?: number;

指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。 weapp

property clip

clip?: boolean;

是否对溢出进行裁剪，默认开启 weapp true

property disableLowerScroll

disableLowerScroll?: string;

发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。 alipay

property disableUpperScroll

disableUpperScroll?: string;

发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为 always 将始终禁止滚动，如果值为 out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。 alipay

property enableBackToTop

enableBackToTop?: boolean;

iOS 点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向 weapp, alipay, swan, qq, jd, rn false

property enableFlex

enableFlex?: boolean;

启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。 weapp, jd false

property enablePassive

enablePassive?: boolean;

开启 passive 特性，能优化一定的滚动性能 weapp false

property enhanced

enhanced?: boolean;

启用 scroll-view 增强特性 weapp, swan, ascf false

property fastDeceleration

fastDeceleration?: boolean;

boolean false 滑动减速速率控制 (同时开启 enhanced 属性后生效) weapp false

property lowerThreshold

lowerThreshold?: number;

距底部/右边多远时（单位px），触发 scrolltolower 事件 50 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property minDragDistance

minDragDistance?: number;

指定 scroll-view 触发滚动的最小拖动距离。仅在 scroll-view 和其他组件存在手势冲突时使用，可通过调整该属性使得滚动更加灵敏。 weapp 18

property onDragEnd

onDragEnd?: CommonEventFunction<ScrollViewProps.onDragDetail>;

滑动结束事件 (同时开启 enhanced 属性后生效) weapp

property onDragging

onDragging?: CommonEventFunction<ScrollViewProps.onDragDetail>;

滑动事件 (同时开启 enhanced 属性后生效) weapp

property onDragStart

onDragStart?: CommonEventFunction<ScrollViewProps.onDragDetail>;

滑动开始事件 (同时开启 enhanced 属性后生效) weapp

property onRefresherAbort

onRefresherAbort?: CommonEventFunction;

自定义下拉刷新被中止 weapp

property onRefresherPulling

onRefresherPulling?: CommonEventFunction;

自定义下拉刷新控件被下拉 weapp

property onRefresherRefresh

onRefresherRefresh?: CommonEventFunction;

自定义下拉刷新被触发 weapp

property onRefresherRestore

onRefresherRestore?: CommonEventFunction;

自定义下拉刷新被复位 weapp

property onRefresherStatusChange

onRefresherStatusChange?: CommonEventFunction<ScrollViewProps.RefresherStatusChange>;

下拉刷新状态回调 weapp

property onRefresherWillRefresh

onRefresherWillRefresh?: CommonEventFunction;

自定义下拉刷新即将触发刷新（拖动超过 refresher-threshold 时）的事件 weapp

property onScroll

onScroll?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>;

滚动时触发 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid

property onScrollEnd

onScrollEnd?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>;

滚动结束事件 weapp

property onScrollEndWorklet

onScrollEndWorklet?: string;

同 bindscrollend，但仅支持 worklet 作为回调 weapp

property onScrollStart

onScrollStart?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>;

滚动开始事件 weapp

property onScrollStartWorklet

onScrollStartWorklet?: string;

同 bindscrollstart，但仅支持 worklet 作为回调 weapp

property onScrollToLower

onScrollToLower?: CommonEventFunction;

滚动到底部/右边，会触发 scrolltolower 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid

property onScrollToUpper

onScrollToUpper?: CommonEventFunction;

滚动到顶部/左边，会触发 scrolltoupper 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid

property onScrollUpdateWorklet

onScrollUpdateWorklet?: string;

同 bindscroll ，但仅支持 worklet 作为回调 weapp

property onTouchCancel

onTouchCancel?: CommonEventFunction;

触摸动作被打断，如来电提醒、弹窗。 alipay

property onTouchEnd

onTouchEnd?: CommonEventFunction;

触摸动作结束。 alipay

property onTouchMove

onTouchMove?: CommonEventFunction;

触摸后移动。 alipay

property onTouchStart

onTouchStart?: CommonEventFunction;

触摸动作开始。 alipay

property padding

padding?: [number, number, number, number];

长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 weapp [0,0,0,0]

property pagingEnabled

pagingEnabled?: boolean;

分页滑动效果 (同时开启 enhanced 属性后生效) weapp false

property refresherBackground

refresherBackground?: string;

设置自定义下拉刷新区域背景颜色 weapp, ascf '#FFF'

property refresherBallisticRefreshEnabled

refresherBallisticRefreshEnabled?: boolean;

惯性滚动是否触发下拉刷新 weapp false

property refresherDefaultStyle

refresherDefaultStyle?: string;

设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式 weapp, ascf 'black'

property refresherEnabled

refresherEnabled?: boolean;

开启自定义下拉刷新 weapp, ascf false

property refresherThreshold

refresherThreshold?: number;

设置自定义下拉刷新阈值 weapp, ascf 45

property refresherTriggered

refresherTriggered?: boolean;

设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 weapp, ascf false

property refresherTwoLevelCloseThreshold

refresherTwoLevelCloseThreshold?: number;

滑动返回时关闭二级的阈值 weapp 80

property refresherTwoLevelEnabled

refresherTwoLevelEnabled?: boolean;

开启下拉二级能力 weapp false

property refresherTwoLevelPinned

refresherTwoLevelPinned?: boolean;

即将打开二级时否定住 weapp false

property refresherTwoLevelScrollEnabled

refresherTwoLevelScrollEnabled?: boolean;

处于二级状态时是否可滑动 weapp false

property refresherTwoLevelThreshold

refresherTwoLevelThreshold?: number;

下拉二级阈值 weapp 150

property refresherTwoLevelTriggered

refresherTwoLevelTriggered?: boolean;

设置打开/关闭二级 weapp false

property reverse

reverse?: boolean;

是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。 weapp false

property scrollAnchoring

scrollAnchoring?: boolean;

开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。 weapp false

property scrollAnimationDuration

scrollAnimationDuration?: number;

当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。 alipay

property scrollIntoView

scrollIntoView?: string;

值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property scrollIntoViewAlignment

scrollIntoViewAlignment?: 'start' | 'center' | 'end' | 'nearest';

指定 scroll-into-view 目标节点在视口内的位置。 start - 目标节点显示在视口开始处 center - 目标节点显示在视口中间 end - 目标节点显示在视口结束处 nearest - 目标节点在就近的视口边缘显示，若节点已在视口内则不触发滚动 weapp, h5, harmony_hybrid 'start'

property scrollIntoViewWithinExtent

scrollIntoViewWithinExtent?: boolean;

只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳 weapp false

property scrollLeft

scrollLeft?: number;

设置横向滚动条位置 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property scrollTop

scrollTop?: number;

设置竖向滚动条位置 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property scrollWithAnimation

scrollWithAnimation?: boolean;

在设置滚动条位置时使用动画过渡 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf false

property scrollX

scrollX?: boolean;

允许横向滚动 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf 二选一

property scrollY

scrollY?: boolean;

允许纵向滚动 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf 二选一

property showScrollbar

showScrollbar?: boolean;

滚动条显隐控制 (同时开启 enhanced 属性后生效) weapp, harmony, ascf true

property stopTouchMovePropagation

stopTouchMovePropagation?: boolean;

是否阻止 touchmove 事件冒泡 h5 true

property trapScroll

trapScroll?: string;

纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。 alipay false

property type

type?: 'list' | 'custom' | 'nested';

渲染模式 list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化 custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件 nested - 嵌套模式。用于处理父子 scroll-view 间的嵌套滚动，子节点可以是 nested-scroll-header nested-scroll-body 组件或自定义 refresher weapp, harmony 'list'

property upperThreshold

upperThreshold?: number;

距顶部/左边多远时（单位px），触发 scrolltoupper 事件 50 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property usingSticky

usingSticky?: boolean;

使 scroll-view 下的 position sticky 特性生效，否则滚动一屏后 sticky 元素会被隐藏 weapp false

interface ShareElementProps

interface ShareElementProps extends StandardProps {}

property duration

duration?: number;

动画时长，单位毫秒 300 weapp, alipay

property easingFunction

easingFunction?: string;

css缓动函数 ease-out weapp, alipay

property key

key?: string;

映射标记 weapp
Deprecated
使用mapkey替换key

property mapkey

mapkey?: string;

映射标记 weapp

property name

name?: string;

映射标记 alipay

property onFrameWorklet

onFrameWorklet?: string;

动画帧回调 weapp

property rectTweenType

rectTweenType?:
    | 'materialRectArc'
    | 'materialRectCenterArc'
    | 'linear'
    | 'elasticIn'
    | 'elasticOut'
    | 'elasticInOut'
    | 'bounceIn'
    | 'bounceOut'
    | 'bounceInOut'
    | 'cubic-bezier(x1, y1, x2, y2)';

动画插值曲线 weapp "materialRectArc"

property shuttleOnPop

shuttleOnPop?: string;

指定 pop 阶段的飞跃物 weapp "to"

property shuttleOnPush

shuttleOnPush?: 'from' | 'to' | 'from' | 'to';

指定 push 阶段的飞跃物 weapp "to"

property transform

transform?: boolean;

是否进行动画 false weapp, alipay

property transitionOnGesture

transitionOnGesture?: boolean;

手势返回时是否进行动画 weapp false

interface SliderProps

interface SliderProps extends StandardProps, FormItemProps {}

property activeColor

activeColor?: string;

已选择的颜色 "#1aad19" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property backgroundColor

backgroundColor?: string;

背景条的颜色 "#e9e9e9" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property blockColor

blockColor?: string;

滑块的颜色 "#ffffff" weapp, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property blockSize

blockSize?: number;

滑块的大小，取值范围为 12 - 28 28 weapp, swan, tt, qq, jd, h5, harmony, harmony_hybrid, ascf

property color

color?: string;

背景条的颜色（请使用 backgroundColor） "#e9e9e9" weapp, tt, qq, jd, harmony

property defaultValue

defaultValue?: string;

设置 React 非受控状态下的初始取值 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property disabled

disabled?: boolean;

是否禁用 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property handleColor

handleColor?: string;

滑块填充色，同 CSS 色值。 alipay

property handleSize

handleSize?: string;

滑块大小。 22 alipay

property max

max?: number;

最大值 100 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property min

min?: number;

最小值 0 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property name

name?: string;

组件名字，用于表单提交获取数据。 alipay

property onChange

onChange?: CommonEventFunction<SliderProps.onChangeEventDetail>;

完成一次拖动后触发的事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onChanging

onChanging?: CommonEventFunction<SliderProps.onChangeEventDetail>;

拖动过程中触发的事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property selectedColor

selectedColor?: string;

已选择的颜色（请使用 activeColor） "#1aad19" weapp, tt, qq, jd, harmony

property showValue

showValue?: boolean;

是否显示当前 value false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property step

step?: number;

步长，取值必须大于 0，并且可被(max - min)整除 1 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property trackSize

trackSize?: string;

轨道线条高度。 4 alipay

property value

value?: number;

当前取值 0 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface SlotProps

interface SlotProps extends StandardProps {}

property name

name?: string;

指定插入的 slot 位置 none weapp, swan, alipay, tt, jd, qq

property varName

varName?: string;

scoped slot 传入数据源 none swan

interface StandardProps

interface StandardProps<
    T = any,
    TouchEvent extends BaseTouchEvent<any> = ITouchEvent
> extends EventProps<TouchEvent>,
        A11yProps {}

property animation

animation?: { actions: TaroGeneral.IAnyObject[] } | TaroGeneral.IAnyObject;

动画属性

property children

children?: ReactNode;

子节点

property className

className?: string;

同 class，在 React/Preact 里一般使用 className 作为 class 的代称

property compileMode

compileMode?: boolean | string | typeof COMPILE_MODE_SUB_RENDER_FN;

是否开启编译模式或者是否是编译模式的子渲染函数 weapp, harmony

property dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string;
};

渲染 HTML
See Also
- /docs/html

property disablePrerender

disablePrerender?: boolean;

在预渲染（Prerender）过程中跳过当前节点，不对其进行预渲染
See Also
- https://docs.taro.zone/docs/prerender

property harmonyDirection

harmonyDirection?: 'row' | 'column' | 'flex';

自定义容器组件的方向 harmony

property hidden

hidden?: boolean;

组件是否显示, 所有组件默认显示

property id

id?: string;

组件的唯一标示, 保持整个页面唯一

property key

key?: string | number;

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，需要使用 wx:key 来指定列表中项目的唯一的标识符。

property ref

ref?: LegacyRef<T>;

引用

property style

style?: string | CSSProperties;

组件的内联样式, 可以动态设置的内联样式

interface SwiperItemProps

interface SwiperItemProps extends StandardProps {}

property deep

deep?: boolean;

Swiper 循环状态下，前后垫片节点拷贝模式，用于修复 Vue 在 CustomElements 下的节点拷贝问题 false h5

property itemId

itemId?: string;

该 swiper-item 的标识符 weapp, swan, tt, jd, h5, rn, harmony, harmony_hybrid, ascf

property skipHiddenItemLayout

skipHiddenItemLayout?: boolean;

是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 false weapp

interface SwiperProps

interface SwiperProps extends StandardProps {}

property acceleration

acceleration?: string;

当开启时，会根据滑动速度，连续滑动多屏。 false alipay

property activeClass

activeClass?: string;

swiper-item 可见时的 class。 alipay

property adjustHeight

adjustHeight?: 'first' | 'current' | 'highest' | 'none';

自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整。可选值为： alipay

property adjustVerticalHeight

adjustVerticalHeight?: string;

vertical 为 true 时强制使 adjust-height 生效。 alipay

property autoplay

autoplay?: boolean;

是否自动切换 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property cacheExtent

cacheExtent?: number;

缓存区域大小，值为 1 表示提前渲染上下各一屏区域（swiper 容器大小） weapp 0

property changingClass

changingClass?: string;

acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的 class。 alipay

property circular

circular?: boolean;

是否采用衔接滑动 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property current

current?: number;

当前所在滑块的 index 0 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property currentItemId

currentItemId?: string;

当前所在滑块的 item-id ，不能与 current 被同时指定 swan, tt, qq, jd, h5, harmony_hybrid deprecated ""

property disableProgrammaticAnimation

disableProgrammaticAnimation?: string;

是否禁用代码变动触发 swiper 切换时使用动画。 false alipay

property disableTouch

disableTouch?: boolean;

是否禁止用户 touch 操作 false alipay, ascf

property disableTouchmove

disableTouchmove?: string;

是否停止响应用户 touchmove 操作 false swan

property displayMultipleItems

displayMultipleItems?: number;

同时显示的滑块数量 1 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property duration

duration?: number;

滑动动画时长 500 weapp, alipay, swan, tt, qq, jd, h5, harmony, harmony_hybrid, ascf

property easingFunction

easingFunction?: keyof SwiperProps.TEasingFunction;

指定 swiper 切换缓动动画类型 "default" weapp, alipay, tt, jd

property effectsProps

effectsProps?: Record<string, any>;

swiper11 相关的动效参数，具体见文档 https://swiperjs.com/swiper-api#parameters h5

property full

full?: boolean;

是否开启全屏 false h5, harmony_hybrid

property indicatorActiveColor

indicatorActiveColor?: string;

当前选中的指示点颜色 "#000000" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property indicatorAlignment

indicatorAlignment?: [number, number] | string;

指示点的相对位置 weapp auto

property indicatorColor

indicatorColor?: string;

指示点颜色 "rgba(0, 0, 0, .3)" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property indicatorDots

indicatorDots?: boolean;

是否显示面板指示点 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property indicatorHeight

indicatorHeight?: number;

指示点高度 weapp 8

property indicatorMargin

indicatorMargin?: number;

指示点四周边距 weapp 10

property indicatorOffset

indicatorOffset?: [number, number];

指示点位置的偏移量 weapp [0, 0]

property indicatorRadius

indicatorRadius?: number;

指示点圆角大小 weapp 4

property indicatorSpacing

indicatorSpacing?: number;

指示点间距 weapp 4

property indicatorType

indicatorType?:
    | 'normal'
    | 'worm'
    | 'wormThin'
    | 'wormUnderground'
    | 'wormThinUnderground'
    | 'expand'
    | 'jump'
    | 'jumpWithOffset'
    | 'scroll'
    | 'scrollFixedCenter'
    | 'slide'
    | 'slideUnderground'
    | 'scale'
    | 'swap'
    | 'swapYRotation'
    | 'color';

指示点动画类型 weapp normal

property indicatorWidth

indicatorWidth?: number;

指示点宽度 weapp 8

property interval

interval?: number;

自动切换时间间隔 5000 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property layoutType

layoutType?: 'normal' | 'stackLeft' | 'stackRight' | 'tinder' | 'transformer';

渲染模式 weapp normal

property nextMargin

nextMargin?: string;

后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 "0px" weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property onAnimationEnd

onAnimationEnd?: CommonEventFunction<SwiperProps.onCommonEventDetail>;

动画结束时会触发 animationEnd 事件 alipay

property onAnimationFinish

onAnimationFinish?: SwiperProps['onChange'];

动画结束时会触发 animationfinish 事件 weapp, swan, tt, qq, jd, h5, rn, harmony_hybrid

property onChange

onChange?: CommonEventFunction<SwiperProps.onChangeEventDetail>;

current 改变时会触发 change 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid

property onScrollEndWorklet

onScrollEndWorklet?: string;

滑动结束时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy} weapp

property onScrollStartWorklet

onScrollStartWorklet?: string;

滑动开始时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy} weapp

property onScrollUpdateWorklet

onScrollUpdateWorklet?: string;

滑动位置更新时触发，仅支持 worklet 作为回调。event.detail = {dx: dx, dy: dy} weapp

property onTransition

onTransition?: CommonEventFunction<SwiperProps.onTransitionEventDetail>;

swiper-item 的位置发生改变时会触发 transition 事件 weapp, alipay, tt, qq

property previousMargin

previousMargin?: string;

前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 "0px" weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property scrollWithAnimation

scrollWithAnimation?: boolean;

改变 current 时使用动画过渡 weapp true

property skipHiddenItemLayout

skipHiddenItemLayout?: boolean;

是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 false qq, jd

property snapToEdge

snapToEdge?: boolean;

当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素 false weapp, alipay

property swipeRatio

swipeRatio?: string;

滑动距离阈值，当滑动距离超过阈值时进行 swiper-item 切换。 alipay

property swipeSpeed

swipeSpeed?: string;

滑动综合速度阈值，当超过阈值时进行 swiper-item 切换，数值越小越敏感。 alipay

property touchAngle

touchAngle?: string;

计算用户手势时所依赖的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高。 alipay

property transformerType

transformerType?:
    | 'scaleAndFade'
    | 'accordion'
    | 'threeD'
    | 'zoomIn'
    | 'zoomOut'
    | 'deepthPage';

layout-type 为 transformer 时指定动画类型 weapp scaleAndFade

property vertical

vertical?: boolean;

滑动方向是否为纵向 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property zoom

zoom?: boolean;

是否启用缩放 false h5, harmony_hybrid

interface SwitchProps

interface SwitchProps extends StandardProps, FormItemProps {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property checked

checked?: boolean;

是否选中 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property color

color?: string;

switch 的颜色，同 css 的 color "#04BE02" weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property controlled

controlled?: string;

是否为受控组件，为 true 时，checked 会完全受 setData 控制。 false alipay

property defaultChecked

defaultChecked?: boolean;

设置在 React 非受控状态下，当前是否选中 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property disabled

disabled?: boolean;

是否禁用 false weapp, alipay, swan, tt, qq, h5, rn, harmony, harmony_hybrid, ascf

property name

name?: string;

组件名字，用于表单提交获取数据。 alipay

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onChange

onChange?: CommonEventFunction<SwitchProps.onChangeEventDetail>;

checked 改变时触发 change 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property type

type?: 'switch' | 'checkbox';

样式，有效值：switch, checkbox "switch" weapp, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface Target

interface Target {}

property dataset

dataset: {
    [key: string]: any;
};

事件源组件上由data-开头的自定义属性组成的集合

property id

id: string;

事件源组件的id

property tagName

tagName: string;

当前组件的类型

interface TaroEvent

interface TaroEvent<T extends EventTarget, D = any> extends Event {}

property detail

detail: D;

property srcElement

srcElement: T | null;

property target

target: T;

interface TextareaProps

interface TextareaProps extends StandardProps, FormItemProps {}

property adjustKeyboardTo

adjustKeyboardTo?: 'cursor' | 'bottom';

键盘对齐位置 weapp 'cursor'

property adjustPosition

adjustPosition?: boolean;

键盘弹起时，是否自动上推页面 true weapp, swan, tt, qq, jd

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property autoFocus

autoFocus?: boolean;

自动聚焦，拉起键盘 false weapp, swan, qq, jd, h5, harmony_hybrid

property autoHeight

autoHeight?: boolean;

是否自动增高，设置 autoHeight 时，style.height不生效 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property confirmHold

confirmHold?: boolean;

点击键盘右下角按钮时是否保持键盘不收起 weapp, swan, tt

property confirmType

confirmType?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return';

设置键盘右下角按钮的文字 weapp, alipay, swan, tt

property controlled

controlled?: boolean;

是否为受控组件。为 true 时，value 内容会完全受 setData 控制。 false alipay

property cursor

cursor?: number;

指定 focus 时的光标位置 -1 weapp, swan, tt, qq, jd

property cursorSpacing

cursorSpacing?: number;

指定光标与键盘的距离，单位 px 。取 Textarea 距离底部的距离和 cursorSpacing 指定的距离的最小值作为光标与键盘的距离 0 weapp, swan, tt, qq, jd

property defaultValue

defaultValue?: string;

设置 React 非受控输入框的初始内容 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property disabled

disabled?: boolean;

是否禁用 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property disableDefaultPadding

disableDefaultPadding?: boolean;

是否去掉 iOS 下的默认内边距 false weapp, tt

property fixed

fixed?: boolean;

如果 Textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true false weapp, swan, qq, jd

property focus

focus?: boolean;

获取焦点 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property holdKeyboard

holdKeyboard?: boolean;

focus 时，点击页面的时候不收起键盘 false weapp, swan, tt

property maxlength

maxlength?: number;

最大输入长度，设置为 -1 的时候不限制最大长度 140 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property name

name?: string;

组件名字，用于表单提交获取数据。 alipay

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property onBlur

onBlur?: CommonEventFunction<TextareaProps.onBlurEventDetail>;

输入框失去焦点时触发 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onConfirm

onConfirm?: CommonEventFunction<TextareaProps.onConfirmEventDetail>;

点击完成时，触发 confirm 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property onFocus

onFocus?: CommonEventFunction<TextareaProps.onFocusEventDetail>;

输入框聚焦时触发 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onInput

onInput?: CommonEventFunction<TextareaProps.onInputEventDetail>;

当键盘输入时，触发 input 事件
**onInput 处理函数的返回值并不会反映到 textarea 上** weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onKeyboardCompositionEnd

onKeyboardCompositionEnd?: CommonEventFunction;

输入法输入结束时触发（仅当输入法支持时触发） weapp

property onKeyboardCompositionStart

onKeyboardCompositionStart?: CommonEventFunction;

输入法开始新的输入时触发（仅当输入法支持时触发） weapp

property onKeyboardCompositionUpdate

onKeyboardCompositionUpdate?: CommonEventFunction;

输入法输入字符时触发（仅当输入法支持时触发） weapp

property onKeyboardHeightChange

onKeyboardHeightChange?: CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail>;

键盘高度发生变化的时候触发此事件 weapp, tt, harmony

property onLineChange

onLineChange?: CommonEventFunction<TextareaProps.onLineChangeEventDetail>;

输入框行数变化时调用 weapp, swan, tt, qq, jd, rn

property onSelectionChange

onSelectionChange?: CommonEventFunction;

选区改变事件, {selectionStart, selectionEnd} weapp

property placeholder

placeholder?: string;

输入框为空时占位符 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property placeholderClass

placeholderClass?: string;

指定 placeholder 的样式类 "textarea-placeholder" weapp, alipay, swan, tt, qq, jd

property placeholderStyle

placeholderStyle?: string;

指定 placeholder 的样式 weapp, alipay, swan, tt, qq, jd, harmony, ascf

property placeholderStyle

placeholderStyle?: string;

需传入对象，格式为 { fontSize: number, fontWeight: string, color: string } weapp

property selectionEnd

selectionEnd?: number;

光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用 -1 weapp, swan, tt, qq, jd, rn

property selectionStart

selectionStart?: number;

光标起始位置，自动聚集时有效，需与 selectionEnd 搭配使用 -1 weapp, swan, tt, qq, jd, rn

property showConfirmBar

showConfirmBar?: boolean;

是否显示键盘上方带有”完成“按钮那一栏 true weapp, swan, tt, qq, jd

property showCount

showCount?: boolean;

是否渲染字数统计功能（是否删除默认计数器/是否显示字数统计）。 true alipay

property value

value?: string;

输入框的内容 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

interface TextProps

interface TextProps extends StandardProps {}

property decode

decode?: boolean;

是否解码 false weapp, alipay, tt, qq, jd, ascf 默认解码，不支持设置

property maxLines

maxLines?: number;

限制文本最大行数 weapp, harmony

property numberOfLines

numberOfLines?: number;

多行省略，值须大于等于 1，表现同 css 的 -webkit-line-clamp 属性一致。 alipay

property overflow

overflow?: keyof TextProps.Overflow;

文本溢出处理 weapp 'visible'

property selectable

selectable?: boolean;

文本是否可选 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid

property space

space?: keyof TextProps.TSpace;

显示连续空格 weapp, alipay, swan, tt, qq, jd, h5, harmony_hybrid, ascf

property userSelect

userSelect?: boolean;

文本是否可选，该属性会使文本节点显示为 inline-block false weapp, h5, harmony_hybrid, ascf

interface VideoProps

interface VideoProps extends StandardProps {}

property adUnitId

adUnitId?: string;

视频前贴广告单元ID，更多详情可参考开放能力[视频前贴广告](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/ad/video-patch-ad.html) weapp

property autoPauseIfNavigate

autoPauseIfNavigate?: boolean;

当跳转到其它小程序页面时，是否自动暂停本页面的视频 true weapp, qq

property autoPauseIfOpenNative

autoPauseIfOpenNative?: boolean;

当跳转到其它微信原生页面时，是否自动暂停本页面的视频 true weapp, qq

property autoplay

autoplay?: boolean;

是否自动播放 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property backgroundPoster

backgroundPoster?: string;

进入后台音频播放后的通知栏图标（Android 独有） weapp

property certificateUrl

certificateUrl?: string;

DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (iOS) weapp

property controls

controls?: boolean;

是否显示默认播放控件（播放/暂停按钮、播放进度、时间） true weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property danmuBtn

danmuBtn?: boolean;

是否显示弹幕按钮，只在初始化时有效，不能动态变更 false weapp, swan, qq, h5, harmony_hybrid

property danmuList

danmuList?: any[];

弹幕列表 weapp, swan, qq, h5, harmony_hybrid

property definition

definition?: string;

清晰度，设置清晰度列表和默认播放的清晰度。切换清晰度按钮仅在全屏时展示，属性说明详见 Definition 类型说明。需要保证 src 和 definition 中有一个为必填，若同时设置了 src 和 definition，definition 优先级高于 src tt

property direction

direction?: number;

设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） weapp, alipay, swan, tt, qq, ascf

property duration

duration?: number;

指定视频时长 weapp, alipay, qq, h5, rn, harmony, harmony_hybrid, ascf

property enableAutoRotation

enableAutoRotation?: boolean;

是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效 weapp, ascf

property enableDanmu

enableDanmu?: boolean;

是否展示弹幕，只在初始化时有效，不能动态变更 false weapp, swan, qq, h5, harmony_hybrid

property enablePlayGesture

enablePlayGesture?: boolean;

是否开启播放手势，即双击切换播放/暂停 false weapp, swan, tt, qq, h5, harmony_hybrid, ascf

property enablePlayInBackground

enablePlayInBackground?: string;

video 播放时宿主退出后台后开启小窗播放，iOS 14 及以上版本支持。开启时首次退出后台后给予弹窗提示用户授权，授权完成后可以到小程序「设置」中重设。支持场景见后台小窗播放 tt

property enableProgressGesture

enableProgressGesture?: boolean;

是否开启控制进度的手势 true weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property floatingMode

floatingMode?: string;

浮窗设置。暂时不支持全局浮窗。可选值：
none：无浮窗。 page：页面内浮窗。 alipay

property initialTime

initialTime?: number;

指定视频初始播放位置 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property isDrm

isDrm?: boolean;

是否是 DRM 视频源 weapp

property isLive

isLive?: boolean;

是否为直播源 weapp

property licenseUrl

licenseUrl?: string;

DRM 获取加密信息 url，仅 is-drm 为 true 时生效 weapp

property loop

loop?: boolean;

是否循环播放 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property mobilenetHintType

mobilenetHintType?: number;

移动网络提醒样式。
0 - 不提醒 1 - tip 提醒 2 - 阻塞提醒(无消耗流量大小) 3 - 阻塞提醒(有消耗流量大小提醒)
alipay, jd

property muted

muted?: boolean;

是否静音播放 false weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property nativeProps

nativeProps?: Record<string, unknown>;

用于透传 WebComponents 上的属性到内部 H5 标签上 h5, harmony_hybrid

property objectFit

objectFit?: keyof VideoProps.ObjectFit;

当视频大小与 video 容器大小不一致时，视频的表现形式 "contain" weapp, alipay, swan, tt, qq, jd, h5, harmony, harmony_hybrid, ascf

property onAdClose

onAdClose?: CommonEventFunction<VideoProps.onAdTypeCommonEventDetail>;

贴片广告非自然结束时触发，如：用户关闭广告或广告播放过程中 video 组件被销毁 tt

property onAdEnded

onAdEnded?: CommonEventFunction<VideoProps.onAdTypeCommonEventDetail>;

贴片广告播放结束时触发 tt

property onAdError

onAdError?: CommonEventFunction<VideoProps.onAdTypeCommonEventDetail>;

贴片广告加载失败时触发 tt

property onAdLoad

onAdLoad?: CommonEventFunction;

贴片广告加载成功时触发，event.detail = { adType: 'preRollAd' | 'postRollAd' } tt

property onAdStart

onAdStart?: CommonEventFunction<VideoProps.onAdTypeCommonEventDetail>;

贴片广告开始播放时触发 tt

property onCastingInterrupt

onCastingInterrupt?: CommonEventFunction;

投屏被中断时触发 weapp, ascf

property onCastingStateChange

onCastingStateChange?: CommonEventFunction;

投屏成功/失败时触发 detail = { type, state: "success"/"fail" } weapp, ascf

property onCastingUserSelect

onCastingUserSelect?: CommonEventFunction;

用户选择投屏设备时触发 detail = { state: "success"/"fail" } weapp, ascf

property onCloseBackground

onCloseBackground?: CommonEventFunction;

关闭小窗播放时触发 tt

property onControlsToggle

onControlsToggle?: CommonEventFunction<VideoProps.onControlsToggleEventDetail>;

切换 controls 显示隐藏时触发。 weapp, swan, ascf

property onControlTap

onControlTap?: CommonEventFunction<{
    controlType;
}>;

点击控件时触发。返回当前点击的控件类型 tt

property onEnded

onEnded?: CommonEventFunction;

当播放到末尾时触发 ended 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onEnterBackground

onEnterBackground?: CommonEventFunction;

进入小窗播放时触发 tt

property onEnterPictureInPicture

onEnterPictureInPicture?: CommonEventFunction;

播放器进入小窗 weapp

property onError

onError?: CommonEventFunction;

视频播放出错时触发 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property onFullscreenChange

onFullscreenChange?: CommonEventFunction<VideoProps.onFullscreenChangeEventDetail>;

当视频进入和退出全屏时触发
alipay, h5, rn, harmony, harmony_hybrid, ascf

property onFullScreenChange

onFullScreenChange?: CommonEventFunction<VideoProps.onFullscreenChangeEventDetail>;

视频进入和退出全屏时触发 weapp, alipay, swan, tt, qq, jd

property onLeaveBackground

onLeaveBackground?: CommonEventFunction;

离开小窗进入 app 事件时触发 tt

property onLeavePictureInPicture

onLeavePictureInPicture?: CommonEventFunction;

播放器退出小窗 weapp

property onLoadedData

onLoadedData?: CommonEventFunction;

否 jd

property onLoadedMetaData

onLoadedMetaData?: CommonEventFunction<VideoProps.onLoadedMetaDataEventDetail>;

视频元数据加载完成时触发 weapp, swan, tt, jd, rn, harmony, ascf

property onLoading

onLoading?: CommonEventFunction;

视频出现缓冲时触发。 alipay

property onLoadStart

onLoadStart?: CommonEventFunction;

否 jd

property onMuteChange

onMuteChange?: CommonEventFunction<{
    isMuted: boolean;
}>;

静音状态改变完成时触发。返回当前是否静音 tt

property onPause

onPause?: CommonEventFunction;

当暂停播放时触发 pause 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onPlay

onPlay?: CommonEventFunction;

当开始/继续播放时触发 play 事件 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onPlayBackRateChange

onPlayBackRateChange?: CommonEventFunction<{
    playbackRate: string;
}>;

视频倍速改变完成时触发。返回改变后的倍速值 tt

property onProgress

onProgress?: CommonEventFunction<VideoProps.onProgressEventDetail>;

加载进度变化时触发，只支持一段加载 weapp, tt, qq, h5, harmony, harmony_hybrid, ascf

property onRenderStart

onRenderStart?: CommonEventFunction;

当视频加载完真正开始播放时触发。 alipay

property onSeekComplete

onSeekComplete?: CommonEventFunction;

seek 完成时触发 weapp, tt, ascf

property onSeeked

onSeeked?: CommonEventFunction;

否 jd, harmony

property onSeeking

onSeeking?: CommonEventFunction;

否 jd, harmony

property onStop

onStop?: CommonEventFunction;

视频播放终止。 alipay

property onTap

onTap?: CommonEventFunction<VideoProps.onTapEventDetail>;

点击视频 view 时触发 alipay

property onTimeUpdate

onTimeUpdate?: CommonEventFunction<VideoProps.onTimeUpdateEventDetail>;

播放进度变化时触发, 触发频率 250ms 一次 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property onUserAction

onUserAction?: CommonEventFunction<VideoProps.onUserActionEventDetail>;

用户操作事件 alipay

property onWaiting

onWaiting?: CommonEventFunction<VideoProps.onWaitingEventDetail>;

视频出现缓冲时触发
weapp, swan, tt, qq, jd, ascf

property pageGesture

pageGesture?: boolean;

在非全屏模式下，是否开启亮度与音量调节手势 false weapp, swan, qq

property pictureInPictureMode

pictureInPictureMode?: ('push' | 'pop')[] | 'push' | 'pop' | '';

设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]） weapp

property pictureInPictureShowProgress

pictureInPictureShowProgress?: string;

是否在小窗模式下显示播放进度 weapp

property playBtnPosition

playBtnPosition?: keyof VideoProps.PlayBtnPosition;

播放按钮的位置 - bottom: controls bar 上 - center: 视频中间
'bottom' weapp, tt, qq, ascf

property poster

poster?: string;

视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property posterForCrawler

posterForCrawler?: string;

用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 weapp

property posterSize

posterSize?: string;

当 poster 高宽比跟视频高宽不匹配时，如何显示 poster，设置规则同 background-size 一致。 alipay

property postRollUnitId

postRollUnitId?: string;

后贴广告的 unit id tt

property preferredPeakBitRate

preferredPeakBitRate?: number;

指定码率上界，单位为比特每秒 weapp

property preRollUnitId

preRollUnitId?: string;

前贴广告的 unit id tt

property provisionUrl

provisionUrl?: string;

DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android) weapp

property referrerPolicy

referrerPolicy?: 'origin' | 'no-referrer';

格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； weapp

property showBackgroundPlaybackButton

showBackgroundPlaybackButton?: boolean;

是否展示后台音频播放按钮 weapp

property showBottomProgress

showBottomProgress?: boolean;

是否展示底部进度条 weapp true

property showCastingButton

showCastingButton?: boolean;

显示投屏按钮。只安卓且同层渲染下生效，支持 DLNA 协议 weapp, ascf

property showCenterPlayBtn

showCenterPlayBtn?: boolean;

是否显示视频中间的播放按钮 true weapp, alipay, swan, qq, h5, rn, harmony_hybrid

property showFullscreenBtn

showFullscreenBtn?: boolean;

是否显示全屏按钮 true weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property showLockBtn

showLockBtn?: string;

全屏模式下，是否显示锁屏按钮 swan

property showMuteBtn

showMuteBtn?: boolean;

是否显示静音按钮 false weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property showNoWifiTip

showNoWifiTip?: string;

非 wifi 环境下是否显示继续播放浮层 swan

property showPlaybackRateBtn

showPlaybackRateBtn?: string;

是否显示倍速控件，点击倍速控件后可选择倍速，可选值： 0.75/1.0/1.25/1.5/2 tt

property showPlayBtn

showPlayBtn?: boolean;

是否显示视频底部控制栏的播放按钮 true weapp, alipay, swan, tt, qq, h5, harmony_hybrid, ascf

property showProgress

showProgress?: boolean;

若不设置，宽度大于240时才会显示 true weapp, swan, qq, h5, harmony_hybrid

property showRateBtn

showRateBtn?: string;

是否显示倍速播放按钮 swan

property showScreenLockButton

showScreenLockButton?: boolean;

是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作 weapp, tt, ascf

property showSnapshotButton

showSnapshotButton?: boolean;

是否显示截屏按钮，仅在全屏时显示 weapp

property showThinProgressBar

showThinProgressBar?: string;

当底部工具条隐藏时，是否显示细进度条（controls=false 时设置无效）。 alipay

property showVslideBtnInFullscreen

showVslideBtnInFullscreen?: string;

全屏模式下，是否显示侧边栏控制按钮 swan

property signature

signature?: string;

设置署名水印 tt

property silentPlay

silentPlay?: string;

是否进入无声视频模式，进入无声视频模式后，视频将静音播放且不响应系统物理音量变化，点击播放器提示无声视频，手势调节失效 swan

property src

src: string;

要播放视频的资源地址 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid, ascf

property title

title?: string;

视频的标题，全屏时在顶部展示 weapp, swan, qq, ascf

property vslideGesture

vslideGesture?: boolean;

在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） false weapp, swan, tt, h5, harmony_hybrid, ascf

property vslideGestureInFullscreen

vslideGestureInFullscreen?: boolean;

在全屏模式下，是否开启亮度与音量调节手势 true weapp, swan, tt, h5, harmony_hybrid, ascf

interface ViewProps

interface ViewProps extends StandardProps {}

property animation

animation?: TaroGeneral.IAnyObject;

用于动画，详见 my.createAnimation 。使用 my.createAnimation 生成的动画是通过过渡（Transition）实现的，只会触发 onTransitionEnd，不会触发 onAnimationStart, onAnimationIteration, onAnimationEnd。 alipay {}

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述 qq

property ariaRole

ariaRole?: string;

无障碍访问，（角色）标识元素的作用 qq

property catchMove

catchMove?: boolean;

是否以 catch 的形式绑定 touchmove 事件 weapp, alipay, swan, tt, qq, jd 3.1.0+

property disableScroll

disableScroll?: boolean;

是否阻止区域内滚动页面。说明：如果 view 中嵌套 view，外层 view 设置 disable-scroll 为 true 时禁止内部的滚动。 alipay false

property hidden

hidden?: boolean;

是否隐藏。 alipay false

property hoverClass

hoverClass?: string;

指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 none weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf 由于 RN 不支持 hoverClass，故 RN 端的 View 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。

property hoverStartTime

hoverStartTime?: number;

按住后多久出现点击态，单位毫秒 50 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property hoverStayTime

hoverStayTime?: number;

手指松开后点击态保留时间，单位毫秒 400 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property hoverStopPropagation

hoverStopPropagation?: boolean;

指定是否阻止本节点的祖先节点出现点击态 false weapp, alipay, swan, tt, qq, jd, ascf

property hoverStyle

hoverStyle?: StyleProp<ViewStyle>;

由于 RN 不支持 hoverClass，故 RN 端的 View 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。 none rn

property onAnimationEnd

onAnimationEnd?: CommonEventFunction;

动画结束时触发。 alipay

property onAnimationIteration

onAnimationIteration?: CommonEventFunction;

每开启一次新的动画过程时触发。（第一次不触发） alipay

property onAnimationStart

onAnimationStart?: CommonEventFunction;

动画开始时触发。 alipay

property onAppear

onAppear?: CommonEventFunction;

当前元素可见面积超过50%时触发。 alipay

property onDisappear

onDisappear?: CommonEventFunction;

当前元素不可见面积超过50%时触发。 alipay

property onFirstAppear

onFirstAppear?: CommonEventFunction;

当前元素首次可见面积达到50%时触发。 alipay

property onLongTap

onLongTap?: CommonEventFunction;

长按 500ms 之后触发，触发了长按事件后进行移动将不会触发屏幕的滚动。 alipay

property onTap

onTap?: CommonEventFunction;

点击。 alipay

property onTouchCancel

onTouchCancel?: CommonEventFunction;

触摸动作被打断，如来电提醒，弹窗。 alipay

property onTouchEnd

onTouchEnd?: CommonEventFunction;

触摸动作结束。 alipay

property onTouchMove

onTouchMove?: CommonEventFunction;

触摸后移动。 alipay

property onTouchStart

onTouchStart?: CommonEventFunction;

触摸动作开始。 alipay

property onTransitionEnd

onTransitionEnd?: CommonEventFunction;

过渡（Transition）结束时触发。 alipay

property role

role?: string;

表示组件的语义角色。设置为 img 时，组件聚焦后读屏软件会朗读出图像；设置为 button 时，聚焦后读屏软件会朗读出按钮。详情请参见 aria-component。 alipay

interface VoipRoomProps

interface VoipRoomProps extends StandardProps {}

property devicePosition

devicePosition?: keyof VoipRoomProps.DevicePosition;

仅在 mode 为 camera 时有效，前置或后置，值为front, back front weapp

property mode

mode?: keyof VoipRoomProps.Mode;

对话窗口类型，自身传入 camera，其它用户传入 video camera weapp

property objectFit

objectFit?: 'fill' | 'contain' | 'cover';

画面与容器比例不一致时，画面的表现形式 weapp "fill"

property onError

onError?: CommonEventFunction;

创建对话窗口失败时触发 weapp

property openId

openId?: string;

进入房间用户的 openid "none" weapp

interface WebViewProps

interface WebViewProps extends StandardProps {}

property onError

onError?: CommonEventFunction<WebViewProps.onErrorEventDetail>;

网页加载失败的时候触发此事件。e.detail = { src } weapp, alipay, tt, qq, h5, rn, harmony_hybrid

property onLoad

onLoad?: CommonEventFunction<WebViewProps.onLoadEventDetail>;

网页加载成功时候触发此事件。e.detail = { src } weapp, alipay, tt, qq, h5, rn, harmony_hybrid, ascf

property onMessage

onMessage?: CommonEventFunction<WebViewProps.onMessageEventDetail>;

网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data } weapp, alipay, swan, tt, qq, jd, ascf

property progressbarColor

progressbarColor?: string;

webview 的进度条颜色 tt

property src

src: string;

webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 weapp, alipay, swan, tt, qq, jd, h5, rn, harmony_hybrid, ascf

property type

type?: string;

若使用web-view组件引入第三方客服，必须填写type="im" tt default

Type Aliases

type BaseEventOrigFunction

type BaseEventOrigFunction<T> = (event: BaseEventOrig<T>) => void;

type BlockProps

type BlockProps = StandardProps;

type CanvasTouchEvent

type CanvasTouchEvent = BaseTouchEvent<CanvasTouch, never>;

type CanvasTouchEventFunction

type CanvasTouchEventFunction = (event: CanvasTouchEvent) => void;

type CommonEvent

type CommonEvent<T = any> = BaseEventOrig<T>;

type CommonEventFunction

type CommonEventFunction<T = any> = BaseEventOrigFunction<T>;

type currentTarget

type currentTarget = Target;

type EventHandler

type EventHandler = (ev: Event) => void;

type ITouchEvent

type ITouchEvent = BaseTouchEvent<ITouch>;

type KeyboardAccessoryProps

type KeyboardAccessoryProps = StandardProps;

type PickerViewColumnProps

type PickerViewColumnProps = StandardProps;

type TouchEventFunction

type TouchEventFunction = (event: ITouchEvent) => void;

Namespaces

namespace @tarojs/components

module '@tarojs/components' {}

namespace AdProps

namespace AdProps {}

interface AdErrCode

interface AdErrCode {}

广告错误码
错误码是通过onError获取到的错误信息。调试期间，可以通过异常返回来捕获信息。在小程序发布上线之后，如果遇到异常问题，可以在[“运维中心“](https://mp.weixin.qq.com/)里面搜寻错误日志，还可以针对异常返回加上适当的监控信息。

property 1000

1000;

后端错误调用失败该项错误不是开发者的异常情况一般情况下忽略一段时间即可恢复。

property 1001

1001;

参数错误使用方法错误可以前往 developers.weixin.qq.com 确认具体教程（小程序和小游戏分别有各自的教程，可以在顶部选项中，“设计”一栏的右侧进行切换。

property 1002

1002;

广告单元无效可能是拼写错误、或者误用了其他APP的广告ID 请重新前往 mp.weixin.qq.com 确认广告位ID。

property 1003

1003;

内部错误该项错误不是开发者的异常情况一般情况下忽略一段时间即可恢复。

property 1004

1004;

无合适的广告广告不是每一次都会出现，这次没有出现可能是由于该用户不适合浏览广告属于正常情况，且开发者需要针对这种情况做形态上的兼容。

property 1005

1005;

广告组件审核中你的广告正在被审核，无法展现广告请前往 mp.weixin.qq.com 确认审核状态，且开发者需要针对这种情况做形态上的兼容。

property 1006

1006;

广告组件被驳回你的广告审核失败，无法展现广告请前往 mp.weixin.qq.com 确认审核状态，且开发者需要针对这种情况做形态上的兼容。

property 1007

1007;

广告组件被封禁你的广告能力已经被封禁，封禁期间无法展现广告请前往 mp.weixin.qq.com 确认小程序广告封禁状态。

property 1008

1008;

广告单元已关闭该广告位的广告能力已经被关闭请前往 mp.weixin.qq.com 重新打开对应广告位的展现。

interface onErrorEventDetail

interface onErrorEventDetail {}

property errCode

errCode: keyof AdErrCode;

interface onSizeEventDetail

interface onSizeEventDetail {}

property height

height: number;

property width

width: number;

namespace AudioProps

namespace AudioProps {}

interface onErrorEventDetail

interface onErrorEventDetail {}

property errMsg

errMsg: keyof MediaError.Code;

interface onTimeUpdateEventDetail

interface onTimeUpdateEventDetail {}

property currentTime

currentTime: number;

当前时间

property duration

duration: number;

持续时间

namespace AudioProps.MediaError

namespace AudioProps.MediaError {}

interface Code

interface Code {}

property 1

1;

获取资源被用户禁止

property 2

2;

网络错误

property 3

3;

解码错误

property 4

4;

不合适资源

namespace ButtonProps

namespace ButtonProps {}

interface FormType

interface FormType {}

form-type 的合法值

property reset

reset;

重置表单

property submit

submit;

提交表单

interface Gender

interface Gender {}

性别的合法值

property 0

0;

未知

property 1

1;

property 2

2;

interface Lang

interface Lang {}

lang 的合法值

property en

en;

英文

property zh_CN

zh_CN;

简体中文

property zh_TW

zh_TW;

繁体中文

interface onContactEventDetail

interface onContactEventDetail {}

property errMsg

errMsg: string;

property path

path: string;

小程序消息指定的路径

property query

query: Record<string, any>;

小程序消息指定的查询参数

interface onCreateLiveActivityEventDetail

interface onCreateLiveActivityEventDetail {}

property code

code: string;

interface onGetPhoneNumberAndRiskLevelEventDetail

interface onGetPhoneNumberAndRiskLevelEventDetail {}

property code

code: string;

interface onGetPhoneNumberEventDetail

interface onGetPhoneNumberEventDetail {}

property code

code?: string;

动态令牌。可通过动态令牌换取用户手机号。
See Also
- https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95

property encryptedData

encryptedData: string;

包括敏感数据在内的完整用户信息的加密数据

property errMsg

errMsg: string;

property iv

iv: string;

加密算法的初始向量

property sign

sign: string;

签名信息，如果在开放平台后台配置了加签方式后有此字段 alipay

interface onGetRealTimePhoneNumberEventDetail

interface onGetRealTimePhoneNumberEventDetail {}

property code

code: string;

interface onGetUserInfoEventDetail

interface onGetUserInfoEventDetail {}

property cloudID

cloudID?: string;

敏感数据对应的云 ID，开通[云开发](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)的小程序才会返回，可通过云调用直接获取开放数据，详细见[云调用直接获取开放数据](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#method-cloud)

property encryptedData

encryptedData: string;

包括敏感数据在内的完整用户信息的加密数据

property errMsg

errMsg: string;

property iv

iv: string;

加密算法的初始向量

property rawData

rawData: string;

不包括敏感信息的原始数据 JSON 字符串，用于计算签名

property signature

signature: string;

使用 sha1(rawData + sessionkey) 得到字符串，用于校验用户信息

property userInfo

userInfo: {
    /** 昵称 */
    nickName: string;
    /** 头像链接 */
    avatarUrl: string;
    /** 头像
     * @supported alipay
     */
    avatar: string;
    /** 性别 */
    gender: keyof Gender;
    /** 省份，如：`Yunnan` */
    province: string;
    /** 城市，如：`Dalian` */
    city: string;
    /** 国家，如：`China` */
    country: string;
};

interface onOpenSettingEventDetail

interface onOpenSettingEventDetail {}

property authSetting

authSetting: Record<string, boolean>;

property errMsg

errMsg: string;

interface openTypeKeys

interface openTypeKeys {}

open-type 的合法值

property alipay

alipay: {
    /** 触发 自定义分享 */
    share;
    /** 支持小程序授权 */
    getAuthorize;
    /** 分享到通讯录好友 */
    contactShare;
    /** 关注生活号 */
    lifestyle;
};

支付宝小程序专属的 open-type 合法值
See Also
- https://opendocs.alipay.com/mini/component/button

property ascf

ascf: {
    /** 获取用户手机号码，当open-type等于该值时，为保障用户隐私，button组件采用同层渲染ArkUI原生functionalButton组件的方式实现。 */
    getPhoneNumber;
    /** 打开授权设置页面。 */
    openSetting;
    /** 打开应用，可以通过app-bundle-name，app-module-name，app-ability-name，app-parameters属性打开指定应用。当前只支持打开系统应用，或者在元服务跳转三方应用的场景下只能打开同系列开发者的应用，否则会遭到系统生态管控拦截，提示应用无法打开 */
    launchApp;
    /** 触发用户分享，用户点击按钮后触发Page.onShareAppMessage事件，只支持分享首页。 */
    share;
    /** 获取服务动态授权码，用于推送服务动态。当open-type等于该值时，必须同时指定activity-type属性。 */
    liveActivity;
    /** 获取手机号和风险等级。 */
    getPhoneNumberAndRiskLevel;
};

property qq

qq: {
    /** 触发用户转发，使用前建议先阅读使用指引
     * @see https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_share.html#%E8%BD%AC%E5%8F%91-2
     */
    share;
    /** 获取用户信息，可以从 onGetUserInfo 回调中获取到用户信息 */
    getUserInfo;
    /** 打开APP，可以通过 app-parameter 属性设定向APP传的参数
     * @see https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_app.html
     */
    launchApp;
    /** 打开授权设置页 */
    openSetting;
    /** 呼起吐个槽反馈页面，开发者可以到官网查看反馈 */
    feedback;
    /** 呼起群资料卡页面，可以通过 group-id 属性设定需要打开的群资料卡的群号，同时 app.json 中必须配置 groupIdList（数量不超过 10 个），表明可以打开群资料卡的群号 */
    openGroupProfile;
    /** 添加好友，对方需要通过该小程序进行授权，允许被加好友后才能调用成功[用户授权](https://q.qq.com/wiki/develop/miniprogram/frame/open_ability/open_userinfo.html#%E6%8E%88%E6%9D%83) */
    addFriend;
    /** 添加彩签，点击后添加状态有用户提示，无回调 */
    addColorSign;
    /** 打开公众号资料卡，可以通过 public-id 属性设定需要打开的公众号资料卡的号码，同时 app.json 中必须配置 publicIdList（目前只能配置 1 个），表明可以打开的公众号资料卡的号码 */
    openPublicProfile;
    /** 添加群应用（只有管理员或群主有权操作，建议先调用 qq.getGroupInfo 获取当前用户是否为管理员，如果是管理员才显示该按钮），添加后给button绑定 onAddGroupApp 事件接收回调数据。 */
    addGroupApp;
    /** 在自定义开放数据域组件中,向指定好友发起分享据 */
    shareMessageToFriend;
};

QQ 小程序专属的 open-type 合法值
See Also
- https://q.qq.com/wiki/develop/miniprogram/component/form/button.html

property tt

tt: {
    /** 触发用户转发, 可以配合 data-channel 属性来设置分享的 channel，具体请参考 ShareParam */
    share;
    /** 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，详情请参见获取手机号 */
    getPhoneNumber;
    /** 跳转到抖音IM客服，详情请参见抖音IM客服能力 */
    im;
    /** 跳转到抖音平台客服，详情请参见平台客服能力 */
    platformIm;
    /** 跳转视频播放页，详情请参见跳转视频播放页 */
    navigateToVideoView;
    /** 跳转抖音号个人页，详情请参见跳转抖音号个人页 */
    openAwemeUserProfile;
    /** 跳转抖音直播间，详情请参见跳转抖音直播间 */
    openWebcastRoom;
    /** 写入系统日历，详情请参见写入系统日历 */
    addCalendarEvent;
    /** 添加到桌面，详情请参见添加到桌面 */
    addShortcut;
    /** 加群，详情请参见加群 */
    joinGroup;
    /** 私信，详情请参见私信 */
    privateMessage;
    /** 主动授权私信，详情请参见主动授权私信 */
    authorizePrivateMessage;
};

TT 小程序专属的 open-type 合法值
See Also
- https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/list/button/#open-type-%E7%9A%84%E5%90%88%E6%B3%95%E5%80%BC

property weapp

weapp: {
    /** 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从回调中获得具体信息
     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html
     */
    contact;
    /** 触发用户转发，使用前建议先阅读使用指引
     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95
     */
    share;
    /** 获取用户手机号，可以从回调中获取到用户信息
     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
     */
    getPhoneNumber;
    /**
     * 手机号实时验证，向用户申请，并在用户同意后，快速填写和实时验证手机号。（*小程序插件中不能使用*）
     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getRealtimePhoneNumber.html
     */
    getRealtimePhoneNumber;
    /** 获取用户信息，可以从回调中获取到用户信息 */
    getUserInfo;
    /** 打开APP，可以通过 app-parameter 属性设定向APP传的参数
     * @see https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html
     */
    launchApp;
    /** 打开授权设置页 */
    openSetting;
    /** 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容 */
    feedback;
    /** 获取用户头像，可以从回调中获得具体信息 */
    chooseAvatar;
    /**
     * 用户同意隐私协议按钮。可通过 bindagreeprivacyauthorization 监听用户同意隐私协议事件
     */
    agreePrivacyAuthorization;
    /**
     * 从基础库 2.32.3 版本起，隐私同意按钮支持与手机号快速验证组件耦合使用，调用方式为：
     * <button open-type="getPhoneNumber|agreePrivacyAuthorization">
     */
    ['getPhoneNumber|agreePrivacyAuthorization'];
    /**
     * 从基础库 2.32.3 版本起，支持隐私同意按钮与手机号实时验证组件耦合使用，调用方式为：
     * <button open-type="getRealtimePhoneNumber|agreePrivacyAuthorization">
     */
    ['getRealtimePhoneNumber|agreePrivacyAuthorization'];
    /**
     * 从基础库 2.32.3 版本起，支持隐私同意按钮与获取用户信息组件耦合使用，调用方式为：
     * <button open-type="getUserInfo|agreePrivacyAuthorization">
     */
    ['getUserInfo|agreePrivacyAuthorization'];
};

interface Size

interface Size {}

size 的合法值

property default

default;

默认大小

property mini

mini;

小尺寸

interface Type

interface Type {}

type 的合法值

property default

default;

白色

property primary

primary;

绿色

property warn

warn;

红色

type OpenType

type OpenType =
    | keyof openTypeKeys['weapp']
    | keyof openTypeKeys['alipay']
    | keyof openTypeKeys['qq']
    | keyof openTypeKeys['tt']
    | keyof openTypeKeys['ascf'];

open-type 的合法值

namespace CameraProps

namespace CameraProps {}

interface DevicePosition

interface DevicePosition {}

device-position 的合法值

property back

back;

后置

property front

front;

前置

interface Flash

interface Flash {}

flash 的合法值

property auto

auto;

自动

property off

off;

关闭

property on

on;

打开

property torch

torch;

常亮

interface FrameSize

interface FrameSize {}

frame-size 的合法值

property large

large;

大尺寸帧数据

property medium

medium;

中尺寸帧数据

property small

small;

小尺寸帧数据

interface Mode

interface Mode {}

mode 的合法值

property normal

normal;

相机模式

property scanCode

scanCode;

扫码模式

interface onInitDoneEventDetail

interface onInitDoneEventDetail {}

property maxZoom

maxZoom: number;

最大变焦

interface onScanCodeEventDetail

interface onScanCodeEventDetail {}

property charSet

charSet: string;

字符集

property fullResult

fullResult: string;

识别结果(完整) alipay

property rawData

rawData: string;

原始数据 weapp

property result

result: string;

识别结果

property type

type: string;

码类型

interface Resolution

interface Resolution {}

resolution 的合法值

property high

high;

property low

low;

property medium

medium;

namespace CanvasProps

namespace CanvasProps {}

interface onErrorEventDetail

interface onErrorEventDetail {}

property errMsg

errMsg: string;

namespace CoverImageProps

namespace CoverImageProps {}

interface Mode

interface Mode {}

mode 的合法值

property 'bottom left'

'bottom left';

裁剪模式，不缩放图片，只显示图片的左下边区域

property 'bottom right'

'bottom right';

裁剪模式，不缩放图片，只显示图片的右下边区域

property 'top left'

'top left';

裁剪模式，不缩放图片，只显示图片的左上边区域

property 'top right'

'top right';

裁剪模式，不缩放图片，只显示图片的右上边区域

property aspectFill

aspectFill;

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

property aspectFit

aspectFit;

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

property bottom

bottom;

裁剪模式，不缩放图片，只显示图片的底部区域

property center

center;

裁剪模式，不缩放图片，只显示图片的中间区域

property heightFix

heightFix;

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

property left

left;

裁剪模式，不缩放图片，只显示图片的左边区域

property right

right;

裁剪模式，不缩放图片，只显示图片的右边区域

property scaleToFill

scaleToFill;

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

property top

top;

裁剪模式，不缩放图片，只显示图片的顶部区域

property widthFix

widthFix;

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

namespace EditorProps

namespace EditorProps {}

interface editorEventDetail

interface editorEventDetail {}

property delta

delta;

property html

html;

property text

text;

namespace FormProps

namespace FormProps {}

interface onSubmitEventDetail

interface onSubmitEventDetail {}

property formId

formId?: string;

当 reportSubmit 为 true 时，返回 formId 用于发送模板消息。

property value

value?: {
    [formItemName: string]: any;
};

当点击 <form> 表单中 form-type 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

namespace FunctionalPageNavigatorProps

namespace FunctionalPageNavigatorProps {}

interface Name

interface Name {}

name 的合法值

property chooseAddress

chooseAddress;

[收货地址功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/choose-address.html)

property loginAndGetUserInfo

loginAndGetUserInfo;

[用户信息功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/user-info.html)

property requestPayment

requestPayment;

[支付功能页](https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/functional-pages/request-payment.html)

interface Version

interface Version {}

version 的合法值

property develop

develop;

开发版

property release

release;

正式版

property trial

trial;

体验版

namespace IconProps

namespace IconProps {}

interface TIconType

interface TIconType {}

icon 的类型

property cancel

cancel;

取消图标

property circle

circle;

圆环图标(多选控件图标未选择)「微信文档未标注属性」

property clear

clear;

清除图标

property download

download;

下载图标

property info

info;

信息图标

property info_circle

info_circle;

带圆环的信息图标「微信文档未标注属性」

property search

search;

搜索图标

property success

success;

成功图标

property success_no_circle

success_no_circle;

成功图标（不带外圈）

property waiting

waiting;

等待图标

property warn

warn;

警告图标

namespace ImageProps

namespace ImageProps {}

interface Mode

interface Mode {}

mode 的合法值

property 'bottom left'

'bottom left';

裁剪模式，不缩放图片，只显示图片的左下边区域

property 'bottom right'

'bottom right';

裁剪模式，不缩放图片，只显示图片的右下边区域

property 'top left'

'top left';

裁剪模式，不缩放图片，只显示图片的左上边区域

property 'top right'

'top right';

裁剪模式，不缩放图片，只显示图片的右上边区域

property aspectFill

aspectFill;

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

property aspectFit

aspectFit;

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

property bottom

bottom;

裁剪模式，不缩放图片，只显示图片的底部区域

property center

center;

裁剪模式，不缩放图片，只显示图片的中间区域

property heightFix

heightFix;

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

property left

left;

裁剪模式，不缩放图片，只显示图片的左边区域

property right

right;

裁剪模式，不缩放图片，只显示图片的右边区域

property scaleToFill

scaleToFill;

缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

property top

top;

裁剪模式，不缩放图片，只显示图片的顶部区域

property widthFix

widthFix;

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

interface onErrorEventDetail

interface onErrorEventDetail {}

property errMsg

errMsg: string;

错误信息

interface onLoadEventDetail

interface onLoadEventDetail {}

property height

height: number | string;

图片高度

property width

width: number | string;

图片宽度

namespace InputProps

namespace InputProps {}

interface ConfirmType

interface ConfirmType {}

Confirm 类型

property done

done;

右下角按钮为“完成”

property go

go;

右下角按钮为“前往”

property next

next;

右下角按钮为“下一个”

property search

search;

右下角按钮为“搜索”

property send

send;

右下角按钮为“发送”

interface inputEventDetail

interface inputEventDetail {}

> 注意：React-Native 端 inputEventDetail 仅实现参数 value，若需实时获取光标位置则可通过 [onSelectionChange](https://reactnative.dev/docs/textinput#onselectionchange) 实现。

property cursor

cursor: number;

光标位置

property keyCode

keyCode: number;

键值

property value

value: string;

输入值

interface inputForceEventDetail

interface inputForceEventDetail {}

property height

height: number;

键盘高度

property value

value: string;

输入值

interface inputValueEventDetail

interface inputValueEventDetail {}

property value

value: string;

输入值

interface onKeyboardHeightChangeEventDetail

interface onKeyboardHeightChangeEventDetail {}

property duration

duration: number;

持续时间

property height

height: number;

键盘高度

interface Type

interface Type {}

Input 类型

property 'safe-password'

'safe-password';

密码安全输入键盘[指引](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/safe-password.html) weapp, alipay

property digit

digit;

带小数点的数字键盘 weapp, alipay, h5, rn, harmony_hybrid

property digitpad

digitpad;

带小数点的数字键盘 alipay

property idcard

idcard;

身份证输入键盘 weapp, alipay, rn

property idcardpad

idcardpad;

身份证输入键盘 alipay

property nickname

nickname;

昵称输入键盘 weapp, alipay

property number

number;

数字输入键盘 weapp, alipay, h5, rn, harmony_hybrid

property numberpad

numberpad;

数字输入键盘 alipay

property text

text;

文本输入键盘 weapp, alipay, h5, rn, harmony_hybrid

namespace LivePlayerProps

namespace LivePlayerProps {}

interface Mode

interface Mode {}

mode 的合法值

property live

live;

直播

property RTC

RTC;

实时通话，该模式时延更低

interface objectFit

interface objectFit {}

objectFit 的合法值

property contain

contain;

图像长边填满屏幕，短边区域会被填充⿊⾊

property fillCrop

fillCrop;

图像铺满屏幕，超出显示区域的部分将被截掉

interface onFullScreenChangeEventDetail

interface onFullScreenChangeEventDetail {}

property direction

direction: number;

方向

property fullScreen

fullScreen: number | boolean;

全屏

interface onNetStatusEventDetail

interface onNetStatusEventDetail {}

property info

info: NetStatus;

interface onStateChangeEventDetail

interface onStateChangeEventDetail {}

property code

code: number;

状态码

interface Orientation

interface Orientation {}

orientation 的合法值

property horizontal

horizontal;

水平

property vertical

vertical;

竖直

interface soundMode

interface soundMode {}

soundMode 的合法值

property ear

ear;

听筒

property speaker

speaker;

扬声器

interface Status

interface Status {}

状态码

property '-2301'

'-2301';

网络断连，且经多次重连抢救无效，更多重试请自行重启播放

property '-2302'

'-2302';

获取加速拉流地址失败

property 2001

2001;

已经连接服务器

property 2002

2002;

已经连接 RTMP 服务器,开始拉流

property 2003

2003;

网络接收到首个视频数据包(IDR)

property 2004

2004;

视频播放开始

property 2005

2005;

视频播放进度

property 2006

2006;

视频播放结束

property 2007

2007;

视频播放Loading

property 2008

2008;

解码器启动

property 2009

2009;

视频分辨率改变

property 2101

2101;

当前视频帧解码失败

property 2102

2102;

当前音频帧解码失败

property 2103

2103;

网络断连, 已启动自动重连

property 2104

2104;

网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀

property 2105

2105;

当前视频播放出现卡顿

property 2106

2106;

硬解启动失败，采用软解

property 2107

2107;

当前视频帧不连续，可能丢帧

property 2108

2108;

当前流硬解第一个I帧失败，SDK自动切软解

property 3001

3001;

RTMP -DNS解析失败

property 3002

3002;

RTMP服务器连接失败

property 3003

3003;

RTMP服务器握手失败

property 3005

3005;

RTMP 读/写失败

namespace LivePusherProps

namespace LivePusherProps {}

interface AudioReverbType

interface AudioReverbType {}

audioReverbType 的合法值

property 0

0;

关闭

property 1

1;

property 2

2;

小房间

property 3

3;

大会堂

property 4

4;

低沉

property 5

5;

洪亮

property 6

6;

金属声

property 7

7;

磁性

interface AudioVolumeType

interface AudioVolumeType {}

audioVolumeType 的合法值

property auto

auto;

自动

property media

media;

媒体音量

property voicecall

voicecall;

通话音量

interface BeautyStyleType

interface BeautyStyleType {}

beautyStyleType 的合法值

property nature

nature;

自然美颜

property smooth

smooth;

光滑美颜

interface FilterType

interface FilterType {}

filterType 的合法值

property aestheticism

aestheticism;

唯美

property blues

blues;

蓝调

property cerisered

cerisered;

樱红

property cool

cool;

清凉

property fresher

fresher;

清新

property nostalgia

nostalgia;

怀旧

property pink

pink;

粉嫩

property romantic

romantic;

浪漫

property solor

solor;

日系

property standard

standard;

标准

property whitening

whitening;

美白

interface LocalMirror

interface LocalMirror {}

localMirror 的合法值

property auto

auto;

前置摄像头镜像，后置摄像头不镜像

property disable

disable;

前后置摄像头均不镜像

property enable

enable;

前后置摄像头均镜像

interface onBgmProgressEventDetail

interface onBgmProgressEventDetail {}

property duration

duration: number;

持续时间

property progress

progress;

进展

interface onErrorEventDetail

interface onErrorEventDetail {}

property errCode

errCode: string | number;

错误码

property errMsg

errMsg: string;

错误信息

interface onNetstatusEventDetail

interface onNetstatusEventDetail {}

property info

info: NetStatus;

网络状态

interface onStateChangeEventDetail

interface onStateChangeEventDetail {}

property code

code: number;

状态码

interface Orientation

interface Orientation {}

orientation 的合法值

property horizontal

horizontal;

水平

property vertical

vertical;

竖直

namespace MapProps

namespace MapProps {}

interface callout

interface callout {}

marker 上的气泡 callout

property anchorX

anchorX: number;

横向偏移量，向右为正数

property anchorY

anchorY: number;

纵向偏移量，向下为正数

property bgColor

bgColor: string;

背景色

property borderColor

borderColor: string;

边框颜色

property borderRadius

borderRadius: number;

边框圆角

property borderWidth

borderWidth: number;

边框宽度

property color

color: string;

文本颜色

property content

content: string;

文本

property display

display: 'BYCLICK' | 'ALWAYS';

'BYCLICK':点击显示; 'ALWAYS':常显

property fontSize

fontSize: number;

文字大小

property padding

padding: number;

文本边缘留白

property textAlign

textAlign: 'left' | 'right' | 'center';

文本对齐方式。有效值: left, right, center

interface circle

interface circle {}

在地图上显示圆

property color

color?: string;

描边的颜色
Remarks
十六进制

property fillColor

fillColor?: string;

填充颜色
Remarks
十六进制

property latitude

latitude: number;

纬度
Remarks
浮点数，范围 -90 ~ 90

property longitude

longitude?: number;

经度
Remarks
浮点数，范围 -180 ~ 180

property radius

radius: number;

半径

property strokeWidth

strokeWidth?: number;

描边的宽度

interface control

interface control {}

在地图上显示控件，控件不随着地图移动。即将废弃，请使用 cover-view
Deprecated

property clickable

clickable?: boolean;

是否可点击
Remarks
默认不可点击

property iconPath

iconPath: string;

显示的图标
Remarks
项目目录下的图片路径，支持本地路径、代码包路径

property id

id?: number;

控件id
Remarks
在控件点击事件回调会返回此id

property position

position: position;

控件在地图的位置
Remarks
控件相对地图位置

interface customCallout

interface customCallout {}

marker 上的自定义气泡 customCallout
customCallout 存在时将忽略 callout 与 title 属性。自定义气泡采用采用 cover-view 定制，灵活度更高。

property anchorX

anchorX: number;

横向偏移量，向右为正数

property anchorY

anchorY: number;

纵向偏移量，向下为正数

property display

display: 'BYCLICK' | 'ALWAYS' | string;

'BYCLICK':点击显示; 'ALWAYS':常显

interface groundOverlays

interface groundOverlays {}

property 'include-points'

'include-points': [
    {
        latitude: number;
        longitude: number;
    },
    {
        latitude: number;
        longitude: number;
    }
];

右上左下

property alpha

alpha: number;

property id

id: string;

刷新的时候需要变更id值

property image

image: string;

property zIndex

zIndex: number;

interface label

interface label {}

marker 上的气泡 label

property anchorX

anchorX: number;

label的坐标，原点是 marker 对应的经纬度

property anchorY

anchorY: number;

label的坐标，原点是 marker 对应的经纬度

property bgColor

bgColor: string;

背景色

property borderColor

borderColor: string;

边框颜色

property borderRadius

borderRadius: number;

边框圆角

property borderWidth

borderWidth: number;

边框宽度

property color

color: string;

文本颜色

property content

content: string;

文本

property fontSize

fontSize: number;

文字大小

property padding

padding: number;

文本边缘留白

property textAlign

textAlign: 'left' | 'right' | 'center';

文本对齐方式。有效值: left, right, center

interface marker

interface marker {}

标记点用于在地图上显示标记的位置

property alpha

alpha?: number;

标注的透明度
Remarks
默认1，无透明，范围 0 ~ 1

property anchor

anchor?: {
    x: number;
    y: number;
};

经纬度在标注图标的锚点，默认底边中点
Remarks
{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

property ariaLabel

ariaLabel?: string;

无障碍访问，（属性）元素的额外描述

property callout

callout?: callout;

标记点上方的气泡窗口
Remarks
支持的属性见下表，可识别换行符。

property customCallout

customCallout?: customCallout;

自定义气泡窗口
Remarks
支持的属性见下表，可识别换行符。

property height

height?: number | string;

标注图标高度
Remarks
默认为图片实际高度

property iconPath

iconPath: string;

显示的图标
Remarks
项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径和网络图片

property id

id?: number;

标记点id
Remarks
marker 点击事件回调会返回此id。建议为每个 marker 设置上 Number 类型 id，保证更新 marker 时有更好的性能。

property label

label?: label;

为标记点旁边增加标签
Remarks
支持的属性见下表

property latitude

latitude: number;

纬度
Remarks
浮点数，范围 -90 ~ 90

property longitude

longitude: number;

经度
Remarks
浮点数，范围 -180 ~ 180

property rotate

rotate?: number;

旋转角度
Remarks
顺时针旋转的角度，范围 0 ~ 360，默认为 0

property title

title?: string;

标注点名
Remarks
点击时显示，callout 存在时将被忽略

property width

width?: number | string;

标注图标宽度
Remarks
默认为图片实际宽度

property zIndex

zIndex?: number;

显示层级

interface onAbilityEventDetail

interface onAbilityEventDetail {}

property ability

ability: string;

property errCode

errCode: number;

property errMsg

errMsg: string;

interface onCalloutTapEventDetail

interface onCalloutTapEventDetail {}

property markerId

markerId: number | string;

interface onControlTapEventDetail

interface onControlTapEventDetail {}

property controlId

controlId: number | string;

interface onInterpolatePointEventDetail

interface onInterpolatePointEventDetail {}

property animationStatus

animationStatus: 'interpolating' | 'complete';

property latitude

latitude: number;

property longitude

longitude: number;

property markerId

markerId: number;

interface onLabelTapEventDetail

interface onLabelTapEventDetail {}

property markerId

markerId: number | string;

interface onMarkerTapEventDetail

interface onMarkerTapEventDetail {}

property markerId

markerId: number | string;

interface onPoiTapEventDetail

interface onPoiTapEventDetail {}

property latitude

latitude: number;

property longitude

longitude: number;

property name

name: string;

interface onPolylineTapEventDetail

interface onPolylineTapEventDetail {}

property latitude

latitude: number;

property longitude

longitude: number;

property polylineId

polylineId: number;

interface onRegionEventDetail

interface onRegionEventDetail<T = keyof RegionChangeDetail.type> {}

property causedBy

causedBy: keyof (T extends 'begin'
    ? RegionChangeDetail.CausedByBegin
    : RegionChangeDetail.CausedByEnd);

导致视野变化的原因
Remarks
有效值为 gesture（手势触发）、update（接口触发或调用更新接口导致）、drag（拖动导致）、scale（缩放导致）

property detail

detail: regionChangeDetail<RegionChangeDetail.type>;

视野改变详情

property type

type: T;

视野变化开始、结束时触发
Remarks
视野变化开始为begin，结束为end

interface panels

interface panels {}

property id

id: number;

property layout

layout: {
    src: string;
};

property position

position: position;

interface point

interface point {}

property latitude

latitude: number;

纬度

property longitude

longitude: number;

经度

interface polygon

interface polygon {}

指定一系列坐标点，根据 points 坐标数据生成闭合多边形

property color

color?: string;

线的颜色，用 8 位十六进制表示，后两位表示 alpha 值，如：#eeeeeeAA。
Remarks
当前 Android 与 iOS 上此属性默认值存在差异（分别为 transparent 与 #ff0000ff ），建议在代码中统一显式设置。 alipay

property dashArray

dashArray?: number[];

边线虚线
Remarks
默认值 [0, 0] 为实线，[10, 10]表示十个像素的实线和十个像素的空白（如此反复）组成的虚线 [0,0] weapp

property displayRanges

displayRanges?: [
    {
        from: number;
        to: number;
    }
];

标明在特定地图缩放级别下展示。
Remarks
[{ from: 12, to: 17}] alipay

property fillColor

fillColor?: string;

填充颜色
Remarks
十六进制

property level

level?: string;

压盖关系 weapp
Remarks
默认为 abovelabels

property points

points: point[];

经纬度数组
Remarks
[{latitude: 0, longitude: 0}]

property strokeColor

strokeColor?: string;

描边的颜色
Remarks
十六进制

property strokeWidth

strokeWidth?: number;

描边的宽度

property width

width?: number;

线的宽度
Remarks
当前 Android 与 iOS 上此属性默认值存在差异（分别为 0 与 5），建议在代码中统一显式设置。 alipay

property zIndex

zIndex?: number;

设置多边形Z轴数值

interface polyline

interface polyline {}

指定一系列坐标点，从数组第一项连线至最后一项

property arrowIconPath

arrowIconPath?: string;

更换箭头图标
Remarks
在 arrowLine 为 true 时生效

property arrowLine

arrowLine?: boolean;

带箭头的线
Remarks
默认 false，开发者工具暂不支持该属性

property borderColor

borderColor?: string;

线的边框颜色

property borderWidth

borderWidth?: number;

线的厚度

property color

color?: string;

线的颜色
Remarks
十六进制

property dottedLine

dottedLine?: boolean;

是否虚线
Remarks
默认 false

property points

points: point[];

经纬度数组
Remarks
[{latitude: 0, longitude: 0}]

property width

width?: number;

线的宽度

interface position

interface position {}

property height

height: number;

控件高度图片宽度

property left

left: number;

距离地图的左边界多远 0

property top

top: number;

距离地图的上边界多远 0

property width

width: number;

控件宽度图片宽度

interface regionChangeDetail

interface regionChangeDetail<T = keyof RegionChangeDetail.type> {}

property causedBy

causedBy: keyof (T extends 'begin'
    ? RegionChangeDetail.CausedByBegin
    : RegionChangeDetail.CausedByEnd);

property centerLocation

centerLocation: point;

property region

region: {
    northeast: point;
    southeast: point;
};

property rotate

rotate: number;

旋转角度

property scale

scale: number;

property skew

skew: number;

倾斜角度

property type

type: T | string;

interface tileOverlay

interface tileOverlay {}

property tileHeight

tileHeight: number;

property tileWidth

tileWidth: number;

property type

type: number;

property url

url: string;

property zIndex

zIndex: number;

namespace MapProps.RegionChangeDetail

namespace MapProps.RegionChangeDetail {}

interface CausedByBegin

interface CausedByBegin {}

property gesture

gesture;

手势触发

property update

update;

接口触发

interface CausedByEnd

interface CausedByEnd {}

property drag

drag;

拖动导致

property scale

scale;

缩放导致

property update

update;

调用更新接口导致

interface type

interface type {}

property begin

begin;

property end

end;

namespace MovableViewProps

namespace MovableViewProps {}

interface onChangeEventDetail

interface onChangeEventDetail {}

property source

source: keyof MovableViewProps.TChangeSource;

触发事件

property x

x: number;

X 坐标

property y

y: number;

Y 坐标

interface onScaleEventDetail

interface onScaleEventDetail {}

property scale

scale: number;

缩放比例

property x

x: number;

X 坐标

property y

y: number;

Y 坐标

interface TChangeSource

interface TChangeSource {}

拖动过程中触发的事件

property ''

'';

setData

property 'out-of-bounds'

'out-of-bounds';

超出移动范围后的回弹

property 'touch-out-of-bounds'

'touch-out-of-bounds';

超出移动范围

property friction

friction;

惯性

property touch

touch;

拖动

namespace NavigatorProps

namespace NavigatorProps {}

interface OpenType

interface OpenType {}

open-type 的合法值

property exit

exit;

退出小程序，target="miniProgram" 时生效

property navigate

navigate;

对应 Taro.navigateTo 或 Taro.navigateToMiniProgram 的功能

property navigateBack

navigateBack;

对应 Taro.navigateBack 的功能

property redirect

redirect;

对应 Taro.redirectTo 的功能

property reLaunch

reLaunch;

对应 Taro.reLaunch 的功能

property switchTab

switchTab;

对应 Taro.switchTab 的功能

interface Target

interface Target {}

target 的合法值

property miniProgram

miniProgram;

其它小程序

property self

self;

当前小程序

interface Version

interface Version {}

version 的合法值

property develop

develop;

开发版

property release

release;

正式版，仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版。

property trial

trial;

体验版

namespace OfficialAccountProps

namespace OfficialAccountProps {}

interface Detail

interface Detail {}

detail 对象

property errMsg

errMsg: string;

错误信息

property status

status: number;

状态码

interface Status

interface Status {}

status 有效值

property '-1'

'-1';

数据解析错误

property '-2'

'-2';

网络错误

property 0

0;

加载成功

property 1

1;

小程序关注公众号功能被封禁

property 2

2;

关联公众号被封禁

property 3

3;

关联关系解除或未选中关联公众号

property 4

4;

未开启关注公众号功能

property 5

5;

场景值错误

property 6

6;

重复创建

namespace OpenDataProps

namespace OpenDataProps {}

interface Lang

interface Lang {}

lang 的合法值

property en

en;

英文

property zh_CN

zh_CN;

简体中文

property zh_TW

zh_TW;

繁体中文

interface Type

interface Type {}

type 的合法值

property groupName

groupName;

拉取群名称

property userAvatarUrl

userAvatarUrl;

用户头像

property userCity

userCity;

用户所在城市

property userCountry

userCountry;

用户所在国家

property userGender

userGender;

用户性别

property userLanguage

userLanguage;

用户的语言

property userNickName

userNickName;

用户昵称

property userProvince

userProvince;

用户所在省份

namespace PageContainerProps

namespace PageContainerProps {}

interface Position

interface Position {}

弹出位置

property bottom

bottom;

下方弹出

property center

center;

中央弹出

property right

right;

右边弹出

property top

top;

上方弹出

namespace PageMetaProps

namespace PageMetaProps {}

interface onResizeEventDetail

interface onResizeEventDetail {}

property deviceOrientation

deviceOrientation?: 'portrait' | 'landscape';

设备方向

property size

size: resizeType;

窗口尺寸

interface onScrollEventDetail

interface onScrollEventDetail {}

property scrollTop

scrollTop: number;

interface resizeType

interface resizeType {}

窗口尺寸类型

property screenHeight

screenHeight?: number;

屏幕高度

property screenWidth

screenWidth?: number;

屏幕宽度

property windowHeight

windowHeight: number;

窗口高度

property windowWidth

windowWidth: number;

窗口宽度

namespace PickerDateProps

namespace PickerDateProps {}

interface ChangeEventDetail

interface ChangeEventDetail {}

property value

value: string;

表示选中的日期

interface Fields

interface Fields {}

property day

day;

选择器粒度为天

property month

month;

选择器粒度为月份

property year

year;

选择器粒度为年

namespace PickerMultiSelectorProps

namespace PickerMultiSelectorProps {}

interface ChangeEventDetail

interface ChangeEventDetail {}

property value

value: number[];

表示变更值的下标

interface ColumnChangeEventDetail

interface ColumnChangeEventDetail {}

property column

column: number;

表示改变了第几列（下标从0开始）

property value

value: number;

表示变更值的下标

namespace PickerRegionProps

namespace PickerRegionProps {}

interface ChangeEventDetail

interface ChangeEventDetail {}

property code

code: string[];

统计用区划代码

property postcode

postcode?: string;

邮政编码

property value

value: string[];

表示选中的省市区

interface Level

interface Level {}

property 'sub-district'

'sub-district';

街道选择器

property city

city;

市级选择器

property province

province;

省级选择器

property region

region;

区级选择器

interface RegionData

interface RegionData {}

property children

children?: RegionData[];

property code

code: string;

property postcode

postcode?: string;

property value

value: string;

namespace PickerSelectorProps

namespace PickerSelectorProps {}

interface ChangeEventDetail

interface ChangeEventDetail {}

property value

value: string | number;

表示变更值的下标

namespace PickerTimeProps

namespace PickerTimeProps {}

interface ChangeEventDetail

interface ChangeEventDetail {}

property value

value: string;

表示选中的时间

namespace PickerViewProps

namespace PickerViewProps {}

interface onChangeEventDetail

interface onChangeEventDetail {}

property value

value: number[];

namespace RadioGroupProps

namespace RadioGroupProps {}

interface onChangeEventDetail

interface onChangeEventDetail {}

property value

value: string[];

namespace RichTextProps

namespace RichTextProps {}

interface HTMLElement

interface HTMLElement {}

元素节点，默认为元素节点全局支持class和style属性，不支持 id 属性。

property attrs

attrs?: Object;

属性
Remarks
支持部分受信任的属性，遵循 Pascal 命名法

property children

children?: Nodes;

子节点列表
Remarks
结构和 nodes 一致

property name

name: string;

标签名
Remarks
支持部分受信任的 HTML 节点

property type

type?: 'node';

HTML 类型

interface Text

interface Text {}

文本节点

property text

text: string;

文本字符串
Remarks
支持 entities ""

property type

type: 'text';

文本类型

interface TSpace

interface TSpace {}

space 的合法值

property emsp

emsp;

中文字符空格大小

property ensp

ensp;

中文字符空格一半大小

property nbsp

nbsp;

根据字体设置的空格大小

namespace ScrollViewProps

namespace ScrollViewProps {}

interface onDragDetail

interface onDragDetail {}

property scrollLeft

scrollLeft: number;

横向滚动条位置

property scrollTop

scrollTop: number;

竖向滚动条位置

property velocity

velocity: number;

滚动速度

interface onScrollDetail

interface onScrollDetail {}

property deltaX

deltaX: number;

property deltaY

deltaY: number;

property isDrag

isDrag?: boolean;

property scrollHeight

scrollHeight: number;

滚动条高度

property scrollLeft

scrollLeft: number;

横向滚动条位置

property scrollTop

scrollTop: number;

竖向滚动条位置

property scrollWidth

scrollWidth: number;

滚动条宽度

interface RefresherStatusChange

interface RefresherStatusChange {}

property dy

dy: number;

property status

status: RefreshStatus;

enum RefreshStatus

const enum RefreshStatus {
    Idle,
    CanRefresh,
    Refreshing,
    Completed,
    Failed,
    CanTwoLevel,
    TwoLevelOpening,
    TwoLeveling,
    TwoLevelClosing,
}

member CanRefresh

CanRefresh

member CanTwoLevel

CanTwoLevel

member Completed

Completed

member Failed

Failed

member Idle

Idle

member Refreshing

Refreshing

member TwoLevelClosing

TwoLevelClosing

member TwoLeveling

TwoLeveling

member TwoLevelOpening

TwoLevelOpening

namespace SliderProps

namespace SliderProps {}

interface onChangeEventDetail

interface onChangeEventDetail {}

property value

value;

namespace swiper/bundle

module 'swiper/bundle' {}

namespace SwiperProps

namespace SwiperProps {}

interface onChangeEventDetail

interface onChangeEventDetail {}

property current

current: number;

当前所在滑块的索引

property currentItemId

currentItemId?: string;

SwiperItem的itemId参数值

property source

source: keyof SwiperProps.TChangeSource;

导致变更的原因

interface onCommonEventDetail

interface onCommonEventDetail {}

property current

current: number;

当前所在滑块的索引

property source

source: keyof SwiperProps.TChangeSource;

导致变更的原因

interface onTransitionEventDetail

interface onTransitionEventDetail {}

property dx

dx: number;

X 坐标

property dy

dy: number;

Y 坐标

interface TChangeSource

interface TChangeSource {}

导致变更的原因

property ''

'';

其它原因

property autoplay

autoplay;

自动播放

property touch

touch;

用户划动

interface TEasingFunction

interface TEasingFunction {}

指定 swiper 切换缓动动画类型

property default

default;

默认缓动函数

property easeInCubic

easeInCubic;

缓入动画

property easeInOutCubic

easeInOutCubic;

缓入缓出动画

property easeOutCubic

easeOutCubic;

缓出动画

property linear

linear;

线性动画

namespace SwitchProps

namespace SwitchProps {}

interface onChangeEventDetail

interface onChangeEventDetail {}

property value

value: boolean;

namespace TextareaProps

namespace TextareaProps {}

interface onBlurEventDetail

interface onBlurEventDetail {}

property cursor

cursor: number;

光标位置

property value

value: string;

输入值

interface onConfirmEventDetail

interface onConfirmEventDetail {}

property value

value: string;

输入值

interface onFocusEventDetail

interface onFocusEventDetail {}

property height

height: number;

键盘高度

property value

value: string;

输入值

interface onInputEventDetail

interface onInputEventDetail {}

property cursor

cursor: number;

光标位置

property keyCode

keyCode: number;

键值

property value

value: string;

输入值

interface onKeyboardHeightChangeEventDetail

interface onKeyboardHeightChangeEventDetail {}

property duration

duration: number;

持续时间

property height

height: number;

键盘高度

interface onLineChangeEventDetail

interface onLineChangeEventDetail {}

property height

height: number;

property heightRpx

heightRpx: number;

property lineCount

lineCount: number;

namespace TextProps

namespace TextProps {}

interface Overflow

interface Overflow {}

property clip

clip;

修剪文本

property ellipsis

ellipsis;

显示省略号

property fade

fade;

淡出

property visible

visible;

文本不截断

interface TSpace

interface TSpace {}

space 的合法值

property emsp

emsp;

中文字符空格大小

property ensp

ensp;

中文字符空格一半大小

property nbsp

nbsp;

根据字体设置的空格大小

namespace VideoProps

namespace VideoProps {}

interface direction

interface direction {}

direction 的合法值

property '-90'

'-90';

屏幕顺时针90度

property 0

0;

正常竖向

property 90

90;

屏幕逆时针90度

interface ObjectFit

interface ObjectFit {}

objectFit 的合法值

property contain

contain;

包含

property cover

cover;

覆盖

property fill

fill;

填充

interface onAdTypeCommonEventDetail

interface onAdTypeCommonEventDetail {}

property adType

adType: 'preRollAd' | 'postRollAd';

广告类型

interface onControlsToggleEventDetail

interface onControlsToggleEventDetail {}

property show

show: boolean;

是否显示

interface onFullscreenChangeEventDetail

interface onFullscreenChangeEventDetail {}

property direction

direction: 'vertical' | 'horizontal';

方向

property fullScreen

fullScreen: number | boolean;

全屏

interface onLoadedMetaDataEventDetail

interface onLoadedMetaDataEventDetail {}

property duration

duration: number;

持续时间

property height

height: number;

视频高度

property width

width: number;

视频宽度

interface onProgressEventDetail

interface onProgressEventDetail {}

property buffered

buffered: number;

百分比

interface onTapEventDetail

interface onTapEventDetail {}

property ptInView

ptInView: {
    x: number;
    y: number;
};

interface onTimeUpdateEventDetail

interface onTimeUpdateEventDetail {}

property currentTime

currentTime: number;

当前时间

property duration

duration: number;

持续时间

property userPlayDuration

userPlayDuration: number;

用户实际观看时长 alipay

property videoDuration

videoDuration: number;

视频总时长 alipay

interface onUserActionEventDetail

interface onUserActionEventDetail {}

property tag

tag: keyof UserActionTag | string;

用户操作的元素

property value

value: number;

interface onWaitingEventDetail

interface onWaitingEventDetail {}

property direction

direction: 'vertical' | 'horizontal';

方向

property fullScreen

fullScreen: number | boolean;

全屏

interface PlayBtnPosition

interface PlayBtnPosition {}

playBtnPosition 的合法值

property bottom

bottom;

controls bar上

property center

center;

视频中间

interface UserActionTag

interface UserActionTag {}

property centerplay

centerplay;

中心播放按钮

property fullscreen

fullscreen;

全屏按钮

property mobilenetplay

mobilenetplay;

网络提醒的播放按钮

property mute

mute;

静音按钮

property play

play;

底部播放按钮

property retry

retry;

重试按钮

namespace VoipRoomProps

namespace VoipRoomProps {}

interface DevicePosition

interface DevicePosition {}

摄像头类型

property back

back;

property front

front;

interface Mode

interface Mode {}

对话窗口类型

property camera

camera;

property video

video;

namespace WebViewProps

namespace WebViewProps {}

interface onErrorEventDetail

interface onErrorEventDetail {}

property src

src: string;

网页链接

interface onLoadEventDetail

interface onLoadEventDetail {}

property src

src: string;

网页链接

interface onMessageEventDetail

interface onMessageEventDetail {}

property data

data: any[];

消息数据，是多次 postMessage 的参数组成的数组

Package Files (101)

Dependencies (10)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@tarojs/components.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@tarojs/components)

HTML

<a href="https://www.jsdocs.io/package/@tarojs/components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 seconds ago.
Package analyzed in 16095 ms.
Missing or incorrect documentation? Open an issue for this package.

@tarojs/components

Install

Overview

Index

Variables

Interfaces

Type Aliases

Namespaces

Variables

variable Ad

See Also

variable AdCustom

Example 1

See Also

variable AnimationVideo

See Also

variable AnimationView

See Also

variable ArCamera

See Also

variable Audio

See Also

Deprecated

variable AwemeData

See Also

variable Block

variable Button

See Also

variable Camera

See Also

variable Canvas

See Also

variable ChannelLive

See Also

variable ChannelVideo

See Also

variable Checkbox

See Also

variable CheckboxGroup

Example 1

See Also

variable CommentDetail

See Also

variable CommentList

See Also

variable ContactButton

See Also

variable CoverImage

See Also

variable CoverView

See Also

variable CustomWrapper

Example 1

variable DoubleTapGestureHandler

variable DraggableSheet

See Also

variable Editor

See Also

variable FollowSwan

See Also

variable ForcePressGestureHandler

variable Form

See Also

variable FunctionalPageNavigator

See Also

variable GridBuilder

See Also

variable GridView

See Also

variable HorizontalDragGestureHandler

variable Icon

See Also

variable Image

See Also

variable InlinePaymentPanel

See Also

variable Input

See Also

variable KeyboardAccessory

Example 1