当前位置:网站首页>微信小程序基本组件使用介绍
微信小程序基本组件使用介绍
2022-07-07 04:42:00 【Aricl.】
目录
1、视图容器 view
- 普通视图区域
- 类似于HTML中的div,是一个块级元素
- 常用来实现页面的布局效果
页面结构:
<!--pages/view/view.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
页面样式:
/* pages/view/view.wxss */
.container1 view{
width: 100px;/*盒子的宽度与高度*/
height: 100px;
text-align: center;/*居中显示*/
line-height: 100px; /*文本的行间距*/
}
.container1 view:nth-child(1){
background-color:lightcoral;/*设置子块的背景颜色*/
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: magenta;
}
.container1{
display: flex;/*盒子横向布局*/
justify-content: space-around;/*分散布局*/
}
2、滚动视图容器 scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
页面结构:
<!--pages/view/view.wxml-->
<!-- scroll-x 横向滚动 scroll-y 纵向滚动 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
页面样式:
/* pages/view/view.wxss */
.container1 view{
width: 100px;/*盒子的宽度与高度*/
height: 100px;
text-align: center;/*居中显示*/
line-height: 100px; /*文本的行间距*/
}
.container1 view:nth-child(1){
background-color:lightcoral;/*设置子块的背景颜色*/
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: magenta;
}
.container1{
/*包裹滚动列表的边框线及其宽度*/
border :1px solid red;
width: 100px;
/*给其强制限定一个高度,超过该高度的部分将进行滚动显示*/
height: 130px;
}
3.轮播图 swiper&swiper-item
- 滑块视图容器
- 可内置swiper-item组件
- 一般用来实现图片的自动播放展示(这里以view块代替展示)
页面结构:
<!--pages/swiper/swiper.wxml-->
<text>轮播图效果展示</text>
<!-- 轮播图的结构 ,最外层为包裹性容器-->
<swiper class="swiper-container" indicator-dots indicator-color="white" autoplay circular>
<!-- 第一张轮播图 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 第二张轮播图 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第三张轮播图 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
页面样式:
/* 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;
}
一些其它常用属性
4.文本组件text&富文本组件rich-text
- text类似于HTML中的span标签,是一个行内元素
- text可实现长按选中复制的功能(只能使用text)
- rich-text可以通过nodes属性节点,把HTML字符串渲染成对应的UI结构
页面结构:
<!--文本text与富文本rich-text的演示-->
<text>文本text:</text>
<view>
手机号支持长按选中效果:
<!-- selectable属性表示文本可长按被选中,且只有在text标签中才有效 -->
<text selectable>1234567896</text>
</view>
<text>富文本rich-text:</text>
<rich-text nodes="<h1 style='color:red;'>hello world</h1>"></rich-text>
属性
5.按钮组件button
- 其功能比HTML中的button丰富
- 可以通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户的授权、获取用户信息、打开定位服务等)
页面结构:
<view>----------通过type属性指定按钮类型---------</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>----------设置size=mini变成小尺寸按钮---------</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>----------设置plain属性成为“镂空”型按钮---------</view>
<button size="mini" plain="">默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain="">警告按钮</button>
属性
6.图片组件image
- 用于展示图片元素
- 组件默认的宽度约为300px,高度约为240px
页面结构:
<!--pages/image/image.wxml-->
<text>添加图片演示</text>
<!-- heightFix高度固定,宽度自适应填满边框区域 -->
<image src="/images/2.jfif" mode="heightFix"></image>
<!-- widthFix宽度固定,高度自适应填满边框区域 -->
<image src="/images/2.jfif" mode="widthFix"></image>
属性
image mode重要属性
边栏推荐
- Cnopendata American Golden Globe Award winning data
- [unity] several ideas about circular motion of objects
- Sign up now | oar hacker marathon phase III, waiting for your challenge
- Operation suggestions for today's spot Silver
- 2022-07-06: will the following go language codes be panic? A: Meeting; B: No. package main import “C“ func main() { var ch chan struct
- Wechat applet data binding multiple data
- [2022 actf] Web Topic recurrence
- 有 Docker 谁还在自己本地安装 Mysql ?
- misc ez_ usb
- 知识点滴 - 关于苹果认证MFI
猜你喜欢
KBU1510-ASEMI电源专用15A整流桥KBU1510
misc ez_usb
Technology cloud report: from robot to Cobot, human-computer integration is creating an era
2022 tea master (intermediate) examination questions and mock examination
图解GPT3的工作原理
[CV] Wu Enda machine learning course notes | Chapter 8
[guess-ctf2019] fake compressed packets
Figure out the working principle of gpt3
[experience sharing] how to expand the cloud service icon for Visio
【斯坦福计网CS144项目】Lab4: TCPConnection
随机推荐
C语言航班订票系统
Ansible
Zhilian + AV, AITO asked M7 to do more than ideal one
[Stanford Jiwang cs144 project] lab4: tcpconnection
[UVM practice] Chapter 1: configuring the UVM environment (taking VCs as an example), run through the examples in the book
KBU1510-ASEMI电源专用15A整流桥KBU1510
Info | webrtc M97 update
微博发布案例
What is the interval in gatk4??
Technology cloud report: from robot to Cobot, human-computer integration is creating an era
Live online system source code, using valueanimator to achieve view zoom in and out animation effect
【斯坦福计网CS144项目】Lab4: TCPConnection
2022 simulated examination question bank and online simulated examination of tea master (primary) examination questions
@component(““)
[experience sharing] how to expand the cloud service icon for Visio
What is the difference between TCP and UDP?
After the interview, the interviewer roast in the circle of friends
探索Cassandra的去中心化分布式架构
LeetCode 90:子集 II
Numbers that appear only once