当前位置:网站首页>微信小程序基本组件使用介绍
微信小程序基本组件使用介绍
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重要属性
边栏推荐
- php导出百万数据
- @component(““)
- Jenkins remote build project timeout problem
- Operation suggestions for today's spot Silver
- 2022制冷与空调设备运行操作复训题库及答案
- The configuration that needs to be modified when switching between high and low versions of MySQL 5-8 (take aicode as an example here)
- Ansible
- C语言通信行程卡后台系统
- Use and analysis of dot function in numpy
- Detailed explanation of uboot image generation process of Hisilicon chip (hi3516dv300)
猜你喜欢
Cnopendata American Golden Globe Award winning data
Detailed explanation of uboot image generation process of Hisilicon chip (hi3516dv300)
2022年全国最新消防设施操作员(初级消防设施操作员)模拟题及答案
Jenkins remote build project timeout problem
Sign up now | oar hacker marathon phase III, waiting for your challenge
resource 创建包方式
Mysql高低版本切换需要修改的配置5-8(此处以aicode为例)
nacos
leetcode:105. 从前序与中序遍历序列构造二叉树
SQL优化的魅力!从 30248s 到 0.001s
随机推荐
Gslx680 touch screen driver source code analysis (gslx680. C)
【经验分享】如何为visio扩展云服务图标
pytest+allure+jenkins環境--填坑完畢
Button wizard script learning - about tmall grabbing red envelopes
C语言航班订票系统
[Stanford Jiwang cs144 project] lab4: tcpconnection
vus.SSR在asynData函数中请求数据的注意事项
自定义类加载器加载网络Class
Determining the full type of a variable
即刻报名|飞桨黑客马拉松第三期等你挑战
【VHDL 并行语句执行】
【斯坦福计网CS144项目】Lab4: TCPConnection
Resource create package method
Solve could not find or load the QT platform plugin "xcb" in "
LeetCode 40:组合总和 II
Weibo publishing cases
leetcode:105. Constructing binary trees from preorder and inorder traversal sequences
[UTCTF2020]file header
Cnopendata list data of Chinese colleges and Universities
知识点滴 - 关于苹果认证MFI