Logo for jsDocs.io

@tarojs/components

  • Version 3.6.7
  • Published
  • 8.74 MB
  • 10 dependencies
  • MIT license

Install

npm i @tarojs/components
yarn add @tarojs/components
pnpm add @tarojs/components

Overview

Taro 组件库

Index

Variables

Interfaces

Type Aliases

Namespaces

Variables

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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/ad.html

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')}
          />
        )
      }
    }

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/ad.html

variable Audio

const Audio: ComponentType<AudioProps>;

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

    Deprecated

    weapp, swan, qq, h5 @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 Block

const Block: ComponentType<BlockProps>;

variable Button

const Button: ComponentType<ButtonProps>;

  • 按钮 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony @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>
          </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>
      </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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/button.html

variable Camera

const Camera: ComponentType<CameraProps>;

  • 系统相机 media weapp, alipay, swan, tt, qq, jd, rn, harmony

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html

variable CheckboxGroup

const CheckboxGroup: ComponentType<CheckboxGroupProps>;

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

    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>
        )
      }
    }

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/checkbox-group.html

variable CoverImage

const CoverImage: ComponentType<CoverImageProps>;

  • 覆盖在原生组件之上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。 viewContainer weapp, alipay, swan, qq, jd, h5, harmony @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

variable CustomWrapper

const CustomWrapper: ComponentType<CustomWrapperProps>;

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

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/form.html

variable FunctionalPageNavigator

const FunctionalPageNavigator: ComponentType<FunctionalPageNavigatorProps>;

  • 仅在插件中有效，用于跳转到插件功能页 navig weapp

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/functional-page-navigator.html

variable GridView

const GridView: ComponentType<GridViewProps>;

  • 网格布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 viewContainer 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 @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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/icon.html

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/image.html

variable Input

const Input: ComponentType<InputProps>;

  • 输入框。该组件是原生组件，使用时请注意相关限制 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/input.html

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>
        )
      }
    }

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/keyboard-accessory.html

variable Label

const Label: ComponentType<LabelProps>;

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

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/label.html

variable ListView

const ListView: ComponentType<ListViewProps>;

  • 列表布局容器，仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 viewContainer weapp

    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

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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/map.html#map

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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

variable MovableArea

const MovableArea: ComponentType<MovableAreaProps>;

  • movable-view 的可移动区域 viewContainer weapp, alipay, swan, tt, qq, jd, h5, rn @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html

variable MovableView

const MovableView: ComponentType<MovableViewProps>;

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

variable NativeSlot

const NativeSlot: ComponentType<NativeSlotProps>;

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

    Example 1

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

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

    See Also

    • https://github.com/NervJS/taro/pull/12627

const NavigationBar: ComponentType<NavigationBarProps>;

  • 页面导航条配置节点，用于指定导航栏的一些属性。只能是 PageMeta 组件内的第一个节点，需要配合它一同使用。 通过这个节点可以获得类似于调用 Taro.setNavigationBarTitle Taro.setNavigationBarColor 等接口调用的效果。 navig weapp, harmony

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/navigation-bar.html

const Navigator: ComponentType<NavigatorProps>;

  • 页面链接 navig weapp, alipay, swan, tt, qq, jd, harmony, h5

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/navigator.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 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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

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 等接口调用的效果。 weapp, alipay

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html

variable Picker

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

  • 从底部弹起的滚动选择器 forms weapp, swan, alipay, tt, h5, rn, harmony @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

variable PickerView

const PickerView: ComponentType<PickerViewProps>;

  • 嵌入页面的滚动选择器 其中只可放置 picker-view-column 组件，其它节点不会显示 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html

variable PickerViewColumn

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

  • 滚动选择器子项 仅可放置于 <PickerView /> 中，其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致 forms weapp, swan, alipay, tt, h5, rn, harmony

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

variable Radio

const Radio: ComponentType<RadioProps>;

  • 单选项目 forms weapp, alipay, swan, tt, qq, h5, rn, harmony @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/radio.html

variable RadioGroup

const RadioGroup: ComponentType<RadioGroupProps>;

  • 单项选择器，内部由多个 Radio 组成。 forms weapp, alipay, swan, tt, qq, jd, h5, rn, harmony

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

variable RootPortal

const RootPortal: ComponentType<RootPortalProps>;

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

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html viewContainer weapp @example_react

      import { useState } from 'react'
      import { RootPortal, View, Button } from '@tarojs/components'
      

      export default function RootPortalExample {
        const [show, setShow] = useState(false)
        const toggle = () => {
          setShow(!show)
        }
        render () {
          return (
            <View>
              <Button onClick={toggle}>显示root-portal</Button>
              {
                show && (<RootPortal><View>content</View></RootPortal>)
              }
            </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 @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>

    See Also

    • https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

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 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。 viewContainer 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)