@tarojs/components
- Version 3.6.20
- Published
- 8.78 MB
- 10 dependencies
- MIT license
Install
npm i @tarojs/components
yarn add @tarojs/components
pnpm add @tarojs/components
Overview
Taro 组件库
Index
Variables
- Ad
- AdCustom
- Audio
- Block
- Button
- Camera
- Canvas
- ChannelLive
- ChannelVideo
- Checkbox
- CheckboxGroup
- CoverImage
- CoverView
- CustomWrapper
- Editor
- Form
- FunctionalPageNavigator
- GridView
- Icon
- Image
- Input
- KeyboardAccessory
- Label
- ListView
- LivePlayer
- LivePusher
- Lottie
- Map
- MatchMedia
- MovableArea
- MovableView
- NativeSlot
- NavigationBar
- Navigator
- OfficialAccount
- OpenData
- PageContainer
- PageMeta
- Picker
- PickerView
- PickerViewColumn
- Progress
- Radio
- RadioGroup
- RichText
- RootPortal
- ScrollView
- ShareElement
- Slider
- Slot
- StickyHeader
- StickySection
- Swiper
- SwiperItem
- Switch
- Text
- Textarea
- Video
- View
- VoipRoom
- WebView
Interfaces
ButtonProps
- appParameter
- ariaLabel
- dataAwemeId
- dataIsHalfPage
- disabled
- formType
- groupId
- guildId
- hoverClass
- hoverStartTime
- hoverStayTime
- hoverStopPropagation
- hoverStyle
- lang
- loading
- onAddFriend
- onAddGroupApp
- onAgreePrivacyAuthorization
- onChooseAddress
- onChooseAvatar
- onChooseInvoiceTitle
- onContact
- onError
- onFollowLifestyle
- onGetAuthorize
- onGetPhoneNumber
- onGetRealTimePhoneNumber
- onGetUserInfo
- onJoinGroup
- onLaunchApp
- onLogin
- onOpenAwemeUserProfile
- onOpenSetting
- onSubscribe
- onTap
- openId
- openType
- plain
- publicId
- scope
- sendMessageImg
- sendMessagePath
- sendMessageTitle
- sessionFrom
- shareMessageFriendInfo
- shareMessageImg
- shareMessageTitle
- shareMode
- shareType
- showMessageCard
- size
- subscribeId
- templateId
- type
CoverViewProps
- ariaLabel
- ariaRole
- disableLowerScroll
- disableUpperScroll
- enableBackToTop
- fixedBottom
- fixedLeft
- fixedRight
- fixedTop
- lowerThreshold
- onScroll
- onScrollToLower
- onScrollToUpper
- onTouchCancel
- onTouchEnd
- onTouchMove
- onTouchStart
- scrollAnimationDuration
- scrollIntoView
- scrollLeft
- scrollTop
- scrollWithAnimation
- scrollX
- scrollY
- trapScroll
- upperThreshold
InputProps
- adjustPosition
- alwaysEmbed
- alwaysSystem
- ariaLabel
- autoFocus
- clueType
- confirmHold
- confirmType
- controlled
- cursor
- cursorSpacing
- disabled
- focus
- holdKeyboard
- maxlength
- name
- nativeProps
- onBlur
- onConfirm
- onFocus
- onInput
- onKeyboardHeightChange
- onNickNameReview
- password
- placeholder
- placeholderClass
- placeholderStyle
- placeholderTextColor
- randomNumber
- safePasswordCertPath
- safePasswordCustomHash
- safePasswordLength
- safePasswordNonce
- safePasswordSalt
- safePasswordTimeStamp
- selectionEnd
- selectionStart
- type
- value
LivePlayerProps
- autoPauseIfNavigate
- autoPauseIfOpenNative
- autoplay
- backgroundMute
- enableAutoRotation
- enableCasting
- enableMetadata
- id
- maxCache
- minCache
- mode
- muted
- objectFit
- onAudioVolumeNotify
- onCastingInterrupt
- onCastingStateChange
- onCastingUserSelect
- onEnterPictureInPicture
- onError
- onFullScreenChange
- onLeavePictureInPicture
- onMetaDataChange
- onNetStatus
- onStateChange
- orientation
- pictureInPictureMode
- referrerPolicy
- signature
- soundMode
- src
LivePusherProps
- aspect
- audioQuality
- audioReverbType
- audioVolumeType
- autoFocus
- autopush
- backgroundMute
- beauty
- beautyStyle
- customEffect
- devicePosition
- enableAgc
- enableAns
- enableCamera
- enableMic
- enableVideoCustomRender
- eyeBigness
- faceThinness
- filter
- fps
- localMirror
- maxBitrate
- minBitrate
- mirror
- mode
- muted
- onAudioVolumeNotify
- onBgmComplete
- onBgmProgress
- onBgmStart
- onEnterPictureInPicture
- onError
- onLeavePictureInPicture
- onNetStatus
- onStateChange
- orientation
- pictureInPictureMode
- remoteMirror
- skinSmoothness
- skinWhiteness
- url
- videoHeight
- videoWidth
- voiceChangerType
- waitingImage
- waitingImageHash
- whiteness
- zoom
MapProps
- circles
- controls
- covers
- customMapStyle
- enable3D
- enableAutoMaxOverlooking
- enableBuilding
- enableOverlooking
- enablePoi
- enableRotate
- enableSatellite
- enableScroll
- enableTraffic
- enableZoom
- groundOverlays
- includePadding
- includePoints
- latitude
- layerStyle
- longitude
- markers
- maxScale
- minScale
- onAbilityFailed
- onAbilitySuccess
- onAnchorPointTap
- onAuthSuccess
- onCalloutTap
- onCallOutTap
- onControlTap
- onError
- onInitComplete
- onInterpolatePoint
- onLabelTap
- onMarkerTap
- onPanelTap
- onPoiTap
- onPolylineTap
- onRegionChange
- onTap
- onUpdated
- optimize
- panels
- polygon
- polygons
- polyline
- rotate
- scale
- setting
- showCompass
- showLocation
- showScale
- skew
- subkey
- theme
- tileOverlay
ScrollViewProps
- ariaLabel
- bounces
- cacheExtent
- clip
- disableLowerScroll
- disableUpperScroll
- enableBackToTop
- enableFlex
- enablePassive
- enhanced
- fastDeceleration
- lowerThreshold
- minDragDistance
- onDragEnd
- onDragging
- onDragStart
- onRefresherAbort
- onRefresherPulling
- onRefresherRefresh
- onRefresherRestore
- onRefresherStatusChange
- onRefresherWillRefresh
- onScroll
- onScrollEnd
- onScrollStart
- onScrollToLower
- onScrollToUpper
- onTouchCancel
- onTouchEnd
- onTouchMove
- onTouchStart
- padding
- pagingEnabled
- refresherBackground
- refresherBallisticRefreshEnabled
- refresherDefaultStyle
- refresherEnabled
- refresherThreshold
- refresherTriggered
- refresherTwoLevelCloseThreshold
- refresherTwoLevelEnabled
- refresherTwoLevelPinned
- refresherTwoLevelScrollEnabled
- refresherTwoLevelThreshold
- refresherTwoLevelTriggered
- reverse
- scrollAnchoring
- scrollAnimationDuration
- scrollIntoView
- scrollIntoViewAlignment
- scrollIntoViewWithinExtent
- scrollLeft
- scrollTop
- scrollWithAnimation
- scrollX
- scrollY
- showScrollbar
- trapScroll
- type
- upperThreshold
SwiperProps
- acceleration
- activeClass
- adjustHeight
- adjustVerticalHeight
- autoplay
- cacheExtent
- changingClass
- circular
- current
- currentItemId
- disableProgrammaticAnimation
- disableTouch
- disableTouchmove
- displayMultipleItems
- duration
- easingFunction
- full
- indicatorActiveColor
- indicatorColor
- indicatorDots
- interval
- nextMargin
- onAnimationEnd
- onAnimationFinish
- onChange
- onTransition
- previousMargin
- scrollWithAnimation
- skipHiddenItemLayout
- snapToEdge
- swipeRatio
- swipeSpeed
- touchAngle
- vertical
- zoom
TextareaProps
- adjustKeyboardTo
- adjustPosition
- ariaLabel
- autoFocus
- autoHeight
- confirmHold
- confirmType
- controlled
- cursor
- cursorSpacing
- disabled
- disableDefaultPadding
- fixed
- focus
- holdKeyboard
- maxlength
- name
- nativeProps
- onBlur
- onConfirm
- onFocus
- onInput
- onKeyboardHeightChange
- onLineChange
- placeholder
- placeholderClass
- placeholderStyle
- selectionEnd
- selectionStart
- showConfirmBar
- showCount
- value
VideoProps
- adUnitId
- autoPauseIfNavigate
- autoPauseIfOpenNative
- autoplay
- backgroundPoster
- certificateUrl
- controls
- danmuBtn
- danmuList
- definition
- direction
- duration
- enableAutoRotation
- enableDanmu
- enablePlayGesture
- enablePlayInBackground
- enableProgressGesture
- floatingMode
- initialTime
- isDrm
- isLive
- licenseUrl
- loop
- mobilenetHintType
- muted
- nativeProps
- objectFit
- onAdClose
- onAdEnded
- onAdError
- onAdLoad
- onAdStart
- onCastingInterrupt
- onCastingStateChange
- onCastingUserSelect
- onCloseBackground
- onControlsToggle
- onControlTap
- onEnded
- onEnterBackground
- onEnterPictureInPicture
- onError
- onFullscreenChange
- onFullScreenChange
- onLeaveBackground
- onLeavePictureInPicture
- onLoadedData
- onLoadedMetaData
- onLoading
- onLoadStart
- onMuteChange
- onPause
- onPlay
- onPlayBackRateChange
- onProgress
- onRenderStart
- onSeekComplete
- onSeeked
- onSeeking
- onStop
- onTap
- onTimeUpdate
- onUserAction
- onWaiting
- pageGesture
- pictureInPictureMode
- pictureInPictureShowProgress
- playBtnPosition
- poster
- posterForCrawler
- posterSize
- postRollUnitId
- preferredPeakBitRate
- preRollUnitId
- provisionUrl
- referrerPolicy
- showBackgroundPlaybackButton
- showBottomProgress
- showCastingButton
- showCenterPlayBtn
- showFullscreenBtn
- showLockBtn
- showMuteBtn
- showNoWifiTip
- showPlaybackRateBtn
- showPlayBtn
- showProgress
- showRateBtn
- showScreenLockButton
- showSnapshotButton
- showThinProgressBar
- showVslideBtnInFullscreen
- signature
- silentPlay
- src
- title
- vslideGesture
- vslideGestureInFullscreen
Type Aliases
Namespaces
MapProps
- callout
- circle
- control
- customCallout
- groundOverlays
- label
- marker
- onAbilityEventDetail
- onCalloutTapEventDetail
- onControlTapEventDetail
- onInterpolatePointEventDetail
- onLabelTapEventDetail
- onMarkerTapEventDetail
- onPoiTapEventDetail
- onPolylineTapEventDetail
- onRegionEventDetail
- panels
- point
- polygon
- polyline
- position
- regionChangeDetail
- tileOverlay
Variables
variable Ad
const Ad: ComponentType<AdProps>;
Banner 广告 open weapp, swan, tt, qq @example_react
class App extends Component {render () {return (<AdunitId=''adIntervals={60}onLoad={() => console.log('ad onLoad')}onError={() => console.log('ad onError')}onClose={() => console.log('ad onClose')}/>)}}@example_vue
<template><adunit-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 (<AdCustomunitId=''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'><Audiosrc='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"><audioid="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 (<Buttonsize={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"><buttonv-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>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_reactclass 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
// jsclass 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
// jsclass 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 支持。 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 @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_reactexport default class PageView extends Component {constructor() {super(...arguments)}render() {return (<View className='components-page'><Imagestyle='width: 300px;height: 100px;background: #fff;'src='nerv_logo.png'/><Imagestyle='width: 300px;height: 100px;background: #fff;'src='https://camo.githubusercontent.com/3e1b76e514b895760055987f164ce6c95935a3aa/687474703a2f2f73746f726167652e333630627579696d672e636f6d2f6d74642f686f6d652f6c6f676f2d3278313531333833373932363730372e706e67'/></View>)}}@example_vue
<template><view class="components-page"><imagestyle="width: 300px;height: 100px;background: #fff;"src="nerv_logo.png"/><imagestyle="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 支持。 skyline 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><mapid="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, h5 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
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, 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 等接口调用的效果。
:::info Taro v3.6.19 开始支持 开发者需要在页面配置里添加:
enablePageMeta: true
:::weapp, alipay @example_react
// page.config.tsexport default definePageConfig({ enablePageMeta: true, ... })// page.tsxfunction Index () {return (<View><PageMetapageStyle={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>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.valuethis.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.valueconsole.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, harmonySee 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_reactexport default class PageView extends Component {constructor() {super(...arguments)}onScrollToUpper() {}// or 使用箭头函数// onScrollToUpper = () => {}onScroll(e){console.log(e.detail)}render() {const scrollStyle = {height: '150px'}const scrollTop = 0const Threshold = 20const 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 (<ScrollViewclassName='scrollview'scrollYscrollWithAnimationscrollTop={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
的共享元素会产生动画。当前页面容器退出时,会产生返回动画。 skyline weapp, alipay @example_react// index.jsimport { 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><PageContainershow={show}overlay={false}closeOnSlideDownduration={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, sagittisvarius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibhmollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas nequemauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi acimperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittisligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisirisus. Vestibulum eleifend dignissim.</View><Button className="screen2-button" onClick={showPrev} hidden={!show} hoverClass="none">Click Me</