@tarojs/components

@tarojs/components

Version 4.0.5
Published 18 days ago
4.68 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 @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 @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
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 @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 @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

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 @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 @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

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 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 @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 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 @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 Icon

const Icon: ComponentType<IconProps>;

图标。组件属性的长度单位默认为 px base weapp, alipay, swan, tt, qq, jd, h5, rn, harmony, harmony_hybrid @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 @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 @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 @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 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 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 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 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 @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 PageContainer

const PageContainer: ComponentType<PageContainerProps>;

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

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

从底部弹起的滚动选择器 forms weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid @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 @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
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 @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 @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
See Also
- https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html

variable RichText

const RichText: ComponentType<RichTextProps>;

富文本 base weapp, swan, alipay, tt, h5, rn, harmony, harmony_hybrid @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 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 @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

@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 DraggableSheet

See Also

variable Editor

See Also

variable FollowSwan

See Also

variable Form

See Also

variable FunctionalPageNavigator

See Also

variable GridBuilder

See Also

variable GridView

See Also

variable Icon

See Also

variable Image

See Also

variable InlinePaymentPanel

See Also

variable Input

See Also

variable KeyboardAccessory

Example 1

See Also

variable Label

See Also