basic label
viewview
view: similar to div, block-level elements
texttext _
text: similar to span, inline element
Only text nesting is supported within the text component
Nodes other than text nodes cannot be long-pressed to select
Font icon icon
type: the type of icon
【可选success/success_no_circle/info/warn/waiting/cancel/download/search/clear】
size: the size of the icon [default 23, default unit is px, support unit rpx/px/rem]
color: the color of the icon
page jump navigator
url: the jump link in the applet
open-type: Jump method [by default, navigate opens a new page, and redirect opens on the current page]
Example:
<navigator url="/pages/other/other" >跳转其他页面</navigator>Carousel and scroll view
轮播swiper/swiper -item
swiper attribute:
indicator-dots: whether to display panel indicator points [default false]
indicator-color: indicator point color [default rgba(0, 0, 0, .3)]
indicator-active-color: currently selected indicator point color [ Default #000000]
autoplay: whether to automatically switch [default false]
interval: automatic switching time interval [default 5000]
duration: sliding animation duration [default 500]
circular: whether to use joint sliding [default false]
vertical: whether the sliding direction is vertical [ Default false]
Example:
<swiper autoplay="true" circular="true">
<swiper-item>
<image mode="heightFix" src="../../images/swiper/1_800x400.png"></image>
</swiper-item>
</swiper>scroll view scroll -view
Scrollable view area: Things can’t be placed, you can use left/right/up and down scrolling to display
scroll-x: Allow horizontal scrolling [default false]
scroll-y: Allow vertical scrolling [default false]
scroll-top: Set the position of the vertical scroll bar
scroll-left: Set the horizontal scroll bar position
refresher-enabled: Enable custom pull-down refresh [default false]
example
<scroll-view class="scroll-container" scroll-x="true">
<view class="scroll-item">1</view>
<view class="scroll-item">1</view>
<view class="scroll-item">1</view>
</scroll-view>
.scroll-container {
/* 规定容器内元素不进行换行 */
white-space: nowrap;
}
.scroll-item {
display: inline-block;
width: 100%;
height: 400rpx;
background-color: aquamarine;
}form
input box input
value [required]: the initial content of the input box
placeholder [required]: the placeholder when the input box is empty
password: whether it is a password type
disabled: whether it is disabled
maxlength: the maximum input length, when it is set to -1, there is no limit to the maximum Length
focus: get the focus
type: type of input [text text/number/idcard/digit number with decimal point/nickname]
confirm-type: set the text of the button in the lower right corner of the keyboard, only when type='text' Take effect [send to send/search search/next next/go to/done to complete]
Multi-line input box textarea
value: the content of the input box
placeholder: the placeholder when the input box is empty
disabled: whether to disable [default false]
maxlength: maximum input length [default 140, when set to -1, there is no limit to the maximum length]
focus: get focus [default false]
auto-height: Whether to automatically increase the height [default false]
switch selector switch
checked: whether to check [default false]
disabled: whether to disable [default false]
type: style [valid value: switch, checkbox]
color: switch color [default #04BE02]
single button radio
Form a group with radio-group
checkbox checkbox
Form a group with checkbox-group
button button
type: the style type of the button [primary green/default white/warn red]
size: the size of the button [default default size/mini small size]
plain: whether the button is hollow
disabled: whether loading is disabled
: whether there is a loading icon before the name
form-type : For form components, clicking will trigger the submit/reset event of the form component respectively
multimedia
picture image
src: image resource address
mode: image cropping and scaling mode
optional values:
scaleToFill scaling mode, zooming 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 scaling mode, maintaining the aspect ratio Scales the image so that the long side of the image is fully displayed. That is to say, the picture can be displayed completely.
The aspectFill zoom mode keeps the aspect ratio to zoom the picture, and only ensures that the short side of the picture can be fully displayed. That is, the picture is usually only complete in the horizontal or vertical direction, and interception will occur in the other direction.
widthFix scaling mode, the width remains unchanged, the height changes automatically, and the aspect ratio of the original image remains unchanged
heightFix scaling mode, the height remains unchanged, the width automatically changes,
and the aspect ratio of the original image remains unchanged The top area of the picture
is bottom cropping mode, the picture
is not zoomed, and only the bottom area of the picture is displayed
. The cropping mode is not zoomed, and only the middle area of the picture is displayed
. Do not zoom the picture, only show the right area of the picture
top left cropping mode, do not zoom the picture, only show the top left area of the picture
top right cropping mode, do not zoom the picture, only show the top right area of the picture
bottom left cropping mode, do not zoom the picture , only display the lower left area of the image
bottom right cropping mode, do not zoom the image, only display the lower right area of the image
audio audio
The function of switching music can be realized by dynamically modifying src
id: the unique identifier of the audio component
src: the resource address of the audio to be played
loop: whether to play in a loop [default false]
controls: whether to display the default control [default false]
poster: the default control Image resource address of the audio cover
name: the name of the audio on the default control [default unknown audio]
author: the name of the author on the default control [default unknown author]
video video
src: The resource address of the video to be played, which supports network paths and local temporary paths.
duration: Specifies the video duration
controls: Whether to display the default playback controls (play/pause button, playback progress, time) [default true]
autoplay: whether to automatically play [default false]
loop: whether to play in a loop [default false]
muted: whether to play mute [default false]
initial-time: specify the initial playback position of the video [default 0]
show-mute-btn: whether to display the mute button [default false]
danmu-list : Danmu list
danmu-btn: Whether to display the bullet chat button, only valid during initialization, and cannot be changed dynamically [default false]
enable-danmu: Whether to display bullet chat, valid only during initialization, and cannot be dynamically changed [default false]
Camera /Scan code QR code camera
mode: application mode, valid only during initialization, and cannot be changed dynamically [normal: camera mode scanCode: scan code mode] [default normal] device-
position: camera orientation [front: front back: rear] [default back]
flash : Flash [auto/on/off] [default auto]
map map
Maps, mini-program map implementation functions are relatively basic. If you want to achieve complete map capabilities, please refer to Tencent Maps. Tencent
Maps: https://lbs.qq.com/product/miniapp/home/
longitude: center longitude
latitude: center Latitude
scale: zoom level, the value range is 3-20 [default 16]
min-scale: minimum zoom level [default 3]
max-scale: maximum zoom level [default 20]
Example:
<map latitude="23.099994" longitude="113.324520" scale="12" min-scale="10" max-scale="18"></map>Selector
common selector
<picker bindchange="bindPickerChange" value="{
{index}}" range="{
{array}}">
<view class="picker">
当前选择：{
{array[index]}}
</view>
</picker>
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
index: 0
},
bindPickerChange(e) {
this.setData({
index: e.detail.value
})
}
})
multi-column selector
<picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{
{multiIndex}}" range="{
{multiArray}}">
<view class="picker">
当前选择：{
{multiArray[0][multiIndex[0]]}}，{
{multiArray[1][multiIndex[1]]}}，{
{multiArray[2][multiIndex[2]]}}
</view>
</picker>
Page({
data: {
multiArray: [
['无脊柱动物', '脊柱动物'],
['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
['猪肉绦虫', '吸血虫']
],
multiIndex: [0, 0, 0],
},
bindMultiPickerChange: function (e) {
this.setData({
multiIndex: e.detail.value
})
}
})
time selector
<picker mode="time" value="{
{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
当前选择: {
{time}}
</view>
</picker>
Page({
data: {
time: '12:01'
},
bindTimeChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
time: e.detail.value
})
}
})date picker
<picker mode="date" value="{
{date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange">
<view class="picker">
当前选择: {
{date}}
</view>
</picker>
Page({
data: {
date: '2030-09-01'
},
bindDateChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
}
})Province area selector
<picker mode="region" bindchange="bindRegionChange" value="{
{region}}">
<view class="picker">
当前选择：{
{region[0]}}，{
{region[1]}}，{
{region[2]}}
</view>
</picker>
Page({
data: {
region: ['广东省', '广州市', '海珠区']
},
bindRegionChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
Progress bar and slider selector
Basic progress bar progress
percent: percentage 0~100
show-info: whether to display the percentage on the right side of the progress bar [default false]
border-radius: rounded corner size [default 0]
font-size: right percentage font size [default 16]
stroke-width: The width of the progress bar line [default 6]
activeColor: the color of the progress bar [default #09BB07]
backgroundColor: the color of the unselected progress bar [default #EBEBEB]
active: the animation of the progress bar from left to right [default false]
duration: the progress The number of milliseconds required to increase by 1% [default 30]
sliding selector slider
step: step size [value must be greater than 0 and divisible by (max - min)]
show-value: whether to display the current value [default false]
min number: minimum value [default 0]
max number: maximum value [default 100] 】
disabled: whether to disable
value: the current value [default 0]
backgroundColor: the color of the background bar [default #e9e9e9 ]
activeColor: the selected color [default #1aad19]
block-color: the color of the slider [default #ffffff]