当前位置:网站首页>Introduction to basic components of wechat applet
Introduction to basic components of wechat applet
2022-07-07 07:56:00 【Aricl.】
Catalog
2、 Scroll view container scroll-view
3. Shuffling figure swiper&swiper-item
4. Text component text& Rich text component rich-text
1、 View container view
- Normal view area
- Be similar to HTML Medium div, Is a block level element
- Commonly used to achieve the layout effect of the page
Page structure :
<!--pages/view/view.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
Page style :
/* pages/view/view.wxss */
.container1 view{
width: 100px;/* The width and height of the box */
height: 100px;
text-align: center;/* centered */
line-height: 100px; /* Line spacing of text */
}
.container1 view:nth-child(1){
background-color:lightcoral;/* Set the background color of the sub block */
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: magenta;
}
.container1{
display: flex;/* Box horizontal layout */
justify-content: space-around;/* Decentralized layout */
}
2、 Scroll view container scroll-view
- Scrollable view area
- It is often used to achieve the effect of scrolling lists
Page structure :
<!--pages/view/view.wxml-->
<!-- scroll-x Roll horizontally scroll-y Roll vertically -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
Page style :
/* pages/view/view.wxss */
.container1 view{
width: 100px;/* The width and height of the box */
height: 100px;
text-align: center;/* centered */
line-height: 100px; /* Line spacing of text */
}
.container1 view:nth-child(1){
background-color:lightcoral;/* Set the background color of the sub block */
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: magenta;
}
.container1{
/* The border line of the package scroll list and its width */
border :1px solid red;
width: 100px;
/* Give it a mandatory height , The part beyond this height will be scrolled */
height: 130px;
}
3. Shuffling figure swiper&swiper-item
- Slider view container
- Built in swiper-item Components
- It is generally used to realize the automatic playback and display of pictures ( Here we use view Block instead of display )
Page structure :
<!--pages/swiper/swiper.wxml-->
<text> Effect display of rotation picture </text>
<!-- Structure of rotation chart , The outermost layer is a wrapping container -->
<swiper class="swiper-container" indicator-dots indicator-color="white" autoplay circular>
<!-- The first rotating picture -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- The second rotating picture -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- The third rotating picture -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
Page style :
/* pages/swiper/swiper.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightblue;
}
swiper-item:nth-child(2) .item{
background-color: lightgreen;
}
.swiper-item:nth-child(3) .item{
background-color: lightseagreen;
}
Some other common properties
4. Text component text& Rich text component rich-text
- text Be similar to HTML Medium span label , It's an in-line element
- text It can realize the function of long press to select and copy ( Only use text)
- rich-text Can pass nodes Attribute node , hold HTML Render the string to the corresponding UI structure
Page structure :
<!-- Text text And rich text rich-text The presentation of -->
<text> Text text:</text>
<view>
The mobile phone number supports the long press selection effect :
<!-- selectable Property indicates that the text can be selected by long pressing , And only in text Only in the label -->
<text selectable>1234567896</text>
</view>
<text> Rich text rich-text:</text>
<rich-text nodes="<h1 style='color:red;'>hello world</h1>"></rich-text>
attribute
5. Button components button
- Its functional ratio HTML Medium button Enrich
- Can pass open-type Attribute can call various functions provided by wechat ( Customer service 、 forward 、 Get the user's authorization 、 Get user information 、 Open location services, etc )
Page structure :
<view>---------- adopt type Property specifies the button type ---------</view>
<button> Default button </button>
<button type="primary"> Main tone button </button>
<button type="warn"> Warning button </button>
<view>---------- Set up size=mini Become a small button ---------</view>
<button size="mini"> Default button </button>
<button type="primary" size="mini"> Main tone button </button>
<button type="warn" size="mini"> Warning button </button>
<view>---------- Set up plain Property becomes “ Hollowing out ” Type button ---------</view>
<button size="mini" plain=""> Default button </button>
<button type="primary" size="mini" plain> Main tone button </button>
<button type="warn" size="mini" plain=""> Warning button </button>
attribute
6. Picture components image
- Used to show image elements
- The default width of the component is about 300px, The height is about 240px
Page structure :
<!--pages/image/image.wxml-->
<text> Add a picture presentation </text>
<!-- heightFix Fixed height , Width adaptively fills the border area -->
<image src="/images/2.jfif" mode="heightFix"></image>
<!-- widthFix Fixed width , Fill the border area with height adaptation -->
<image src="/images/2.jfif" mode="widthFix"></image>
attribute
image mode Important attributes
边栏推荐
- [P2P] local packet capturing
- [UVM foundation] what is transaction
- Value sequence (subsequence contribution problem)
- 开源生态|打造活力开源社区,共建开源新生态!
- Regular e-commerce problems part1
- 【webrtc】m98 screen和window采集
- [performance pressure test] how to do a good job of performance pressure test?
- C language flight booking system
- 【斯坦福计网CS144项目】Lab3: TCPSender
- [2022 actf] Web Topic recurrence
猜你喜欢
即刻报名|飞桨黑客马拉松第三期等你挑战
Visualization Document Feb 12 16:42
Problem solving: unable to connect to redis
Qt学习27 应用程序中的主窗口
Linux server development, redis source code storage principle and data model
通信设备商,到底有哪些岗位?
为什么要了解现货黄金走势?
快速使用 Jacoco 代码覆盖率统计
有 Docker 谁还在自己本地安装 Mysql ?
Kbu1510-asemi power supply special 15A rectifier bridge kbu1510
随机推荐
Solution: could not find kf5 (missing: coreaddons dbusaddons doctools xmlgui)
【obs】win-capture需要winrt
有 Docker 谁还在自己本地安装 Mysql ?
[UVM basics] summary of important knowledge points of "UVM practice" (continuous update...)
Linux server development, redis protocol and asynchronous mode
图解GPT3的工作原理
SQL优化的魅力!从 30248s 到 0.001s
buuctf misc USB
Linux server development, MySQL stored procedures, functions and triggers
Sign up now | oar hacker marathon phase III, waiting for your challenge
3D reconstruction - stereo correction
[Stanford Jiwang cs144 project] lab3: tcpsender
[2022 actf] Web Topic recurrence
Mysql高低版本切换需要修改的配置5-8(此处以aicode为例)
Custom class loader loads network class
Cnopendata list data of Chinese colleges and Universities
开源生态|打造活力开源社区,共建开源新生态!
Tongda injection 0day
自定义类加载器加载网络Class
[P2P] local packet capturing