The style class the view that is tapped. When hoverClass="none", the tap state is not displayed.
hoverStopPropagation
Boolean
false
Specifies whether to block the tapped state from the ancestor node of this node.
hoverStartTime
Number
50
Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTime
Number
400
Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
onClick
Event handler
A click event triggered.
onLongPress
Event handler
The finger leaves the screen after it taps and holds on the screen for more than 350 ms. If an event callback function is specified and this event is triggered, the click event is not triggered.
Specifies the location of the vertical scroll bar.
scrollLeft
Number, String
No
Specifies the location of the horizontal scroll bar.
scrollIntoView
String
No
Specifies the direction to which the scroll bar can be moved. Its value should be the ID of a child element (the ID cannot begin with a number), and this child element is scrolled in the direction specified in this property.
onScrollToUpper
Event handler
No
Triggered when the scroll bar is moved to the top or left side. event.detail = { direction }
onScrollToLower
Event handler
No
Triggered when the scroll bar is moved to the bottom or right side. event.detail = { direction }
onScroll
Event handler
No
Triggered when the scroll bar is moving. event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
upperThreshold
Number, String
50
No
Specifies the distance from the top/left of the page when a scrolltoupper event is triggered.
lowerThreshold
Number, String
50
No
Specifies the distance from the bottom/right of the page when a scrolltoupper event is triggered.
fastDeceleration
boolean
false
use fast rate of deceleration after the user lifts their finger. (only work with enhanced: true and only work on iOS)
Swiper view container. Which can only be placed swiper-item Component, otherwise it results in undefined behavior.（Version > 3.0.0）
Property
Type
Default Value
Required
Description
scrollX
Boolean
false
No
Supports horizontal scrolling.
indicatorDots
boolean
false
no
Whether to display panel pointer
indicatorColor
color
rgba(0, 0, 0, .3)
no
Indicating point color
indicatorActiveColor
color
#000000
no
Currently selected pointer color
autoplay
boolean
false
no
Whether to switch automatically
current
number
0
no
The current slider index
interval
number
5000
no
Automatic switching time interval
duration
number
500
no
Slide animation length
circular
boolean
false
no
Whether or not to use the slip
vertical
boolean
false
no
Is the sliding direction longitudinal?
previous-margin
number
0
no
A leading margin, which can be used to expose a small portion of the previous item
next-margin
number
0
no
Back margin, can be used to reveal a small part of the next item
snap-to-edge
boolean
false
no
When the number of swiper-item is greater than or equal to 2, when circular is turned off and previous-margin or next-margin is turned on, you can specify whether this margin should be applied to the first or last element
displayMultipleItems
number
1
no
Number of sliders displayed simultaneously
easingFunction
string
"default"
no
Designation swiper Toggle Slow Animation Type
bindchange
eventhandle
no
current When it changes, it triggers change Event, event.detail = {current, source}
bindtransition
eventhandle
no
swiper-item Is triggered when the location of transition Event, event.detail = {dx: dx, Two: two}
bindanimationfinish
eventhandle
no
Triggers at the end of the animation animationfinish Event, event.detail Ditto
tip: If in bindchange In the event callback function of setData change current Value, it is possible to cause setData Is constantly called, so usually please change current Prevalue detection source Field to determine if it was caused by user touch.
The color of the icon. It is the same as the color of the css.
type Type=|'circle'|'download'|'info'|'safe-success'|'safe-warn'|'success'|'success-circle'|'success-no-circle'|'waiting'|'waiting-circle'|'warn'|'info-circle'|'cancel'|'search'|'clear'|'back'|'delete'|'success-no-circle-thin'|'arrow'|'arrow-bold'|'back-arrow'|'back-arrow-thin'|'close'|'close-thin'|'back-circle'
BMP use base64 (background-image: url(data:image/svg+xml,..);) internally.
Currently, two nodes are supported, which are distinguished according to the type: element node and text node. It is the element node by default. HTML nodes are displayed in the rich text area.
Specifies whether the input is password-type content.
placeholder
String
The placeholder used when the input box is empty.
placeholderStyle
String
Specifies the style of the placeholder.
placeholderClass
String
input-placeholder
Specifies the style class of the placeholder.
disabled
Boolean
false
Specifies whether to disable the component.
maxlength
Number
140
The maximum length. When it is set to -1, the maximum length is not limited.
cursorSpacing
Number
0
Specifies the distance between the cursor and the keyboard. It is either the distance between the input box and the bottom of the screen or the distance specified via cursorSpacing, whichever is smaller..
autoFocus
Boolean
false
(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focus
Boolean
false
Gets focus.
confirmType
String
done
Sets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHold
Boolean
false
Specifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
cursor
Number
Specifies the cursor position during focusing.
selectionStart
Number
-1
The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEnd
Number
-1
The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPosition
Boolean
true
Specifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboard
Boolean
false
Specifies whether to hide the keyboard when clicking page while the input is focused.
onInput
Event handler
Triggered when the user taps the keyboard. event.detail = { value, cursor, keyCode }, where keyCode is the key value.box.
onFocus
Event handler
Triggered when the input box is focused. event.detail = { value, height }, where height is the height of the keyboard.
onBlur
Event handler
Triggered when the input box is unfocused. event.detail = { value }.
onConfirm
Event handler
Triggered when the Done button is tapped. event.detail = { value }.
onKeyboardHeightChange
Event handler
Triggered when the height of the keyboard changes. event.detail = { height, duration}.
Specifies the style of the placeholder. Only color, font-size, and font-weight styles are supported.
placeholderClass
String
textarea-placeholder
Specifies the style class of the placeholder.
disabled
Boolean
false
Specifies whether to disable the component.
maxlength
Number
140
The maximum length. When it is set to -1, the maximum length is not limited.
autoFocus
Boolean
false
(Will be discarded soon. Use the focus instead.) Auto focus. The keyboard is automatically displayed.
focus
Boolean
false
Gets focus.
autoHeight
Boolean
false
Specifies whether the height automatically increases. If this property is specified, style.height does not take effect.
fixed
Boolean
false
If the textarea is in an area of position:fixed, the value of the specified property should always be true.
cursorSpacing
Number
0
Specifies the distance between the cursor and the keyboard. It is either the distance between textarea and the bottom of the screen or the distance specified via cursorSpacing, whichever is smaller.
cursor
Number
-1
Specifies the cursor position during focusing.
showConfirmBar
Boolean
true
Specifies whether to display the bar containing the Done button above the keyboard.
selectionStart
Number
-1
The start position of the cursor. It takes effect only during auto focusing, and needs to used with selection-end.
selectionEnd
Number
-1
The end position of the cursor. It takes effect only during auto focusing, and needs to used with selection-start.
adjustPosition
Boolean
true
Specifies whether to automatically push up the page when the keyboard is displayed.
holdKeyboard
Boolean
false
Specifies whether to hide the keyboard when clicking page while the input is focused.
disableDefaultPadding
Boolean
false
Specifies whether to remove the default padding behavior on iOS.
confirmType
String
return
Sets the text on the lower-right button on the keyboard. It takes effect only when type='text'.
confirmHold
Boolean
false
Specifies whether the keyboard is not hidden when the lower-right button on the keyboard is tapped.
onInput
Event handler
Triggered when the user taps the keyboard. event.detail = { value, cursor, keyCode }, where keyCode is the key value.box.
onFocus
Event handler
Triggered when the input box is focused. event.detail = { value, height }
onBlur
Event handler
Triggered when the input box is unfocused. event.detail = { value, cursor }.
onLineChange
Event handler
Called when the number of lines in the input box changes. event.detail = { height: number, heightRpx: number, lineCount: number }
onConfirm
Event handler
Triggered when the Done button is tapped. event.detail = { value }.
onKeyboardHeightChange
Event handler
Triggered when the height of the keyboard changes. event.detail = { height, duration}.
if developer need change the caret-color of input component, developer should use css class to set it instead of inline style
<!-- bxml --><Textareaclass="caret-color-red"></Textarea><!-- css class --><style>.caret-color-red{caret-color:red;}</style>### Label| Property | Type | Default Value | Required | Description || -------- | ------ | ------------- | -------- | ---------------------------- || for | String | | | The ID of the bound control. |### Picker| Property | Type | Default Value | Required | Description || -------- | ------------- | ------------- | -------- | ------------------------------------------- || mode | String | `selector` | | The type of the picker. || disabled | Boolean | `false` | | Specifies whether to disable the component. || onCancel | Event handler | | | Triggered when selection is canceled. |#### Valid values of `mode`| Value | Description || --------------- | -------------------- || `selector` | Common picker. || `multiSelector` | Multi-column picker. || `time` | Time picker. || `date` | Date picker. |In addition to the preceding general properties, picker has different properties specific to different modes.#### Common picker: mode = selector| Property | Type | Default Value | Required | Description || --------- | ------------- | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------- || range | Array | `[]` | | Valid when the mode is selector or multiSelector. || range-key | string | | | Specifies the key value of the object as the content to be displayed on the picker when range is an object array. || value | Number | `0` | | Indicates the sequence number (starting from 0 in the subscript) of the item selected in range. || onChange | Event handler | | | A change event is triggered when value is changed. `event.detail = {value}`. |#### Common picker: mode = multiSelector| Property | Type | Default Value | Required | Description || -------------- | ------------------ | ------------- | -------- | ----------------------------------------------------------------------------------------------------------------- || range | Array/object array | `[]` | | Valid when the mode is selector or multiSelector. || range-key | string | | | Specifies the key value of the object as the content to be displayed on the picker when range is an object array. || value | Number | `[]` | | Indicates the sequence number (starting from 0 in the subscript) of the item selected in range. || onChange | Event handler | | | A change event is triggered when value is changed. `event.detail = {value}`. || onColumnChange | Event handler | | | Triggered when the column changes. `event.detail = {value, column}`. |#### Time picker: mode = time| Property | Type | Default Value | Required | Description || -------- | ------------- | ------------- | -------- | ----------------------------------------------------------------------------- || value | String | | | The selected time, in the form of "hh:mm". || start | String | | | The start of the valid time range, in the form of "hh:mm". || end | String | | | The end of the valid time range, in the form of "hh:mm". || onChange | Event handler | | | A change event triggered when the value is changed. `event.detail = {value}`. |#### Date picker: mode = date| Property | Type | Default Value | Required | Description || -------- | ------------- | ------------- | -------- | ------------------------------------------------------------------------------- || value | String | today | | The selected date, in the form of "YYYY-MM-DD". || start | String | | | TThe start of the valid date range, in the form of "YYYY-MM-DD". || end | String | | | The end of the valid date range, in the form of "YYYY-MM-DD". || fields | String | `day` | | The granularity of the picker. Valid values include "year", "month", and "day". || onChange | Event handler | | | AA change event triggered when the value is changed. `event.detail = {value}`. |##### Valid values of `fields`| Value | Description || ------- | --------------------------------------- || `year` | The granularity of the picker is year. || `month` | The granularity of the picker is month. || `day` | The granularity of the picker is day. |### Radio| Property | Type | Default Value | Required | Description || -------- | ------- | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- || value | String | | | The ID of the radio component. When it is selected, a radio-group change event is triggered, carrying the value of radio. || disabled | Boolean | `false` | | Specifies whether to disable the component. || checked | Boolean | `false` | | Specifies whether to select the radio by default. || Color | String | `#F0B90B` | | The color of the radio. It is the same as the color of the css. |### RadioGroup| Property | Type | Default Value | Required | Description || -------- | ------------- | ------------- | -------- | ---------------------------------------------------------------------------------------- || onChange | Event handler | | | A change event triggered when selected options in radio-group change. `detail = {value}` |### Slider| Property | Type | Default Value | Required | Description || --------------- | ------------- | ------------- | -------- | -------------------------------------------------------------------------------------- || min | Number | `0` | | The minimum value. || max | Number | `100` | | The maximum value. || step | Number | `1` | | The step. Its value must be greater than 0, and can be exactly divided by (max – min). || disabled | Boolean | `false` | | Specifies whether to disable the component. || value | Number | | | The current value. || showValue | Boolean | `false` | | Specifies whether to display the current value. || activeColor | String | `#F0B90B` | | The selected color. || backgroundColor | String | `#e9e9e9` | | The color of the background bar. || onChange | Event handler | | | The event triggered after the swiper is dragged. `event.detail = {value}`. || onChanging | Event handler | | | The event triggered during dragging of the swiper. `event.detail = {value}`. |### Switch| Property | Type | Default Value | Required | Description || -------- | ------------- | ------------- | -------- | ------------------------------------------------------------------------------------ || checked | Boolean | `false` | | Specifies whether the item is selected. || disabled | Boolean | `false` | | Specifies whether to disable the component. || Color | String | `#F0B90B` | | The color of the switch component. It is the same as the color of the css component. || onChange | Event handler | | | A change event triggered when checked changes. `event.detail = {value}`. |## Navigators### Navigator| Property | Type | Default Value | Required | Description || ---------- | ------------------------------------ | ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || target | String | `self` | | Specifies the target to be redirected from. It is the current Mini Program by default. || url | String | | | The redirection link in the current Mini Program. || appId | String | | | The appId of the Mini Program to be opened. It is valid when target="miniProgram". || path | String | | | The path of the page to be opened. It is valid when target="miniProgram". If the value is empty, the homepage is opened. || extraData | object | | | The data to be passed to the target Mini Program. It is valid when target="miniProgram". The target Mini Program can obtain this data from App.onLaunch() and App.onShow(). || version | 'preview', 'experience', 'published' | `published` | | The `channel` of the Mini Program to be opened. It is valid when target="miniProgram". || type | 'app', 'web', 'webview' | `app` | | The type of the Mini Program to be opened. It is valid when target="miniProgram". || rev | String | | | The rev of the Mini Program to be opened. It is valid when target="miniProgram". || onSuccess | Event handler | | | The callback function for a successful API call. || onFail | Event | | | The callback function for a failed API call. || onComplete | Event | | | The callback function used when the API call completed (always executed whether the call succeeds or fails). |> BMP use `mpService.navigateTo(url)` internally.#### Valid values of `target`| Value | Description || ------------- | --------------------- || `self` | Current Mini Program. || `miniProgram` | Other Mini Programs. |#### Usage of target='miniProgram'```js<NavigatorappId={}path={}extraData={}version={}type={}rev={}target="miniProgram"onSuccess={}onFail={}onComplete={}> Link</Navigator>
It is recommended to use numeric values for width and height instead of auto or *%.
Before version 4.0.0, if the mode attribute is used and the value is not scaleToFill, it will be rendered with background-image; otherwise, it will be rendered with the <img /> tag.
If the value of src is a http resource, BMP will use mpService.downloadFile(src) to download image.
The image reuqests from <Image /> will have header: Referer: https://servicesbinance.com/${mp-app-id}/${mp-app-version}
Zoom mode, which scales the image without maintaining the aspect ratio, so that the width and height of the image are completely stretched to fill the image element.
aspectFit
Zoom mode, which maintains the aspect ratio and zooms the image so that the long side of the image is fully displayed. That is, the picture can be displayed completely.
aspectFill
Zoom mode, which maintains the aspect ratio and zooms the image, only ensuring that the short side of the image can be fully displayed. That is, the picture is usually only complete in the horizontal or vertical direction, the other direction will be cropped.
widthFix
Zoom mode, the width remains unchanged, the height changes automatically, and the aspect ratio of the original image remains unchanged
heightFix
Zoom mode, the height does not change, the width changes automatically, and the aspect ratio of the original image remains unchanged
top
Crop mode, do not scale the picture, only show the top area of the picture
bottom
Crop mode, do not zoom the picture, only show the bottom area of the picture
center
Crop mode, do not zoom the picture, only show the middle area of the picture
left
Crop mode, do not zoom the picture, only display the left area of the picture
right
Crop mode, do not zoom the picture, only display the right area of the picture
top left
Crop mode, do not zoom the picture, only display the upper left area of the picture
top right
Crop mode, do not zoom the picture, only display the upper right area of the picture
bottom left
Crop mode, do not zoom the picture, only display the lower left area of the picture
bottom right
Crop mode, do not zoom the picture, only display the lower right area of the picture
Disables screen scrolling and swipe-down-to-refresh features when the a finger taps to move on the canvas and a gesture event is bound.
onTouchStart
Event handler
No
Finger touch starts.
onTouchMove
Event handler
No
Finger moves after touch.
onTouchEnd
Event handler
No
Finger touch ends.
onTouchCancel
Event handler
No
Finger touch is interrupted by call reminder, pop-up window, etc.
onLongTap
Event handler
No
Triggered when a finger taps and holds on the screen for 500 ms. After this event is triggered, moving on the screen does not trigger screen scrolling.
And it is recommended that developers put the webview-sdk file on their own CDN so that they can provide users with a uniform and controlled speed experience.
web-view page code：
<scriptsrc="https://public.bnbstatic.com/static/js/mp-webview-sdk/webview-v1.0.1.min.js"></script><script>// PostMessage from web page to mini-program bn.miniProgram.postMessage({ foo:'bar'})// Receive messages from mini-program. bn.onMessage=function(e){console.log(e)// { data: 'baz' }}</script>