洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。
439
2023-11-11
微信小程序学习之常用的视图组件
−目录一.常用的视图组件1.view2.scroll-view3.swiper和swiper-item4.text5.rich-text 6.button7.image8.navigator总结
一.常用的视图组件
1.view
普通视图区域类似与HTML中的div，是一个块级元素常用来实现页面的布局效果使用效果：
wxml文件：
?
1
2
3
4
5
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
wxss文件：
效果图：
2.scroll-view
可滚动的视图区域常用来实现滚动列表效果使用效果：
wxml文件：
?
1
2
3
4
5
6
7
8
<!-- scroll-y属性：允许纵向滚动 -->
<!-- scroll-x属性：允许横向滚动 -->
<!-- 注意：使用竖向滚动时，必须给scroll-view一个固定高度 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss文件：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container1 view{
width: 100px;/*宽*/
height: 100px;/*高*/
text-align: center;/*居中*/
line-height: 100px;/*纵向居中*/
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
/*给三个view加上不同的颜色*/
.container1{
border: 1px solid red;
/*给scroll-view一个固定高度*/
height: 120px;
width: 100px;
}
效果图：
可以使用鼠标上下拖动，达到滚动的效果！
3.swiper和swiper-item
轮播图容器组件和轮播图item组件
使用效果：
wxml文件：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 轮播图区域 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper class="swiper-container">
<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>
wxss文件：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.swiper-container{
height: 150px;/*轮播图高度*/
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightblue;
}
swiper-item:nth-child(3) .item{
background-color: lightcoral;
}
效果图：
l circular实现衔接滑动，滑倒C，往右滑动回到A，类似循环队列！！
例如：加上 indicator-dots 属性
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 轮播图区域 -->
<!-- indicator-dots 属性：显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
<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>
效果图：可与上进行对比
4.text
文本组件类似与HTML中的span标签，是一个行内元素使用效果：
wxml文件：
?
1
2
3
4
5
<view>
手机号支持长按选中保存
<text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable)，view中不可长按保存 -->
效果图：
5.rich-text
富文本组件支持把HTML字符串渲染为WXML结构通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构：
wxml文件：
?
1
2
3
4
5
6
<view>
手机号支持长按选中保存
<text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable)，view中不可长按保存 -->
<rich-text nodes="<h1 style=color:red;>标题<h1>"></rich-text>
效果图：
6.button
按钮组件功能比HTML中的button按钮丰富通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权等）使用效果：
wxml文件：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 按钮组件的基本使用 -->
<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
效果图：
7.image
图片组件image组件默认高度约300px、高度约240px使用效果：
wxml文件：
?
1
2
3
<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg"></image>
wxss文件：
?
1
2
3
image{
border: 1px solid red;
}
效果图：
例如更改属性mode为aspectFit，自适应的，效果图：
?
1
2
3
<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg" mode="aspectFit"></image>
8.navigator
页面导航组件类似于HTML中的a链接总结
到此这篇关于微信小程序学习之常用的视图组件的文章就介绍到这了,更多相关微信小
您可能感兴趣的文章:微信小程序 Button 组件详解及简单实例微信小程序实现图片预加载组件微信小程序 Image组件实例详解微信小程序自定义组件封装及父子间组件传值的方法微信小程序button组件使用详解
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
- 洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。
- 洞察企业如何通过FinClip提升跨平台小程序加载效率，适应多样化市场需求
- 洞察提升小程序标签管理，实现高效的金融行业数字化转型
- 洞察如何通过ios app灵活实现微信小程序的跨平台管理
- 洞察如何利用第三方app跳转到微信小程序提升企业运营效率
- 洞察探索小程序支付功能实现的最佳策略，如何通过FinClip技术简化支付流程并提升用户体验，助力企业数字化转型
- 洞察探索如何利用 FinClip 提供的跨平台小程序技术，实现高效的支付管理与合规运营
- 如何借助FinClip提升App小程序支付的敏捷性和合规性？
- 在数字化转型中，企业如何通过小程序支付提升客户体验和运营效率？
- 小程序开发设计在提升企业数字化转型效率中的关键作用
推荐文章
热评文章
暂时没有评论，来抢沙发吧~