小程序的宿主环境 - 组件
小程序的宿主环境 - 组件
view 组件的基本使用
练习将三个view组件横向排列
pages/list/list.wxml
<!--pages/list/list.wxml-->
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
pages/list/list.wxss
/* pages/list/list.wxss */
/*后代选择器*/
.container1 view{
width : 100px;
height : 100px;
text-align: center;/*横向剧中*/
line-height: 100px;/*纵向剧中*/
}
/*C3伪类选择器*/
.container1 view:nth-child(1) {
background-color : lightgreen;
}
.container1 view:nth-child(2) {
background-color : lightskyblue;
}
.container1 view:nth-child(3){
background-color : lightpink;
}
.container1{
/*设置父级元素属性*/
display: flex;/*设置横向排列*/
justify-content : space-around;/*横向上分散对齐*/
}
运行效果图
scroll-view 组件的基本使用
练习纵向滑动
pages/list/list.wxml
<!--pages/list/list.wxml-->
<!-- scroll-y 属性 : 允许纵向滚动-->
<!-- scroll-x 属性 : 允许横向滚动-->
<!-- 注意 : 使用竖向滚动时,必须给 scroll-view 一个固定高度-->
<scroll-view class="container_y" scroll-y="true">
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
</scroll-view>
pages/list/list.wxss
/* pages/list/list.wxss */
/*后代选择器*/
.container1 view{
width : 100px;
height : 100px;
text-align: center;/*横向剧中*/
line-height: 100px;/*纵向剧中*/
}
/*C3伪类选择器*/
.container1 view:nth-child(1) {
background-color : lightgreen;
}
.container1 view:nth-child(2) {
background-color : lightskyblue;
}
.container1 view:nth-child(3){
background-color : lightpink;
}
.container_y{
/*设置父级元素属性*/
border : 1px solid red;
/* 给scroll-view固定宽度高度 */
width : 100px;
height : 120px;
}
运行效果:
练习横向滑动
pages/list/list.wxml
<scroll-view class="container_x" scroll-x="true">
<view class="container2">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
</scroll-view>
pages/list/list.wxss
/*后代选择器*/
.container2 view{
width : 100px;
height : 100px;
text-align: center;/*横向剧中*/
line-height: 100px;/*纵向剧中*/
}
/*C3伪类选择器*/
.container2 view:nth-child(1) {
background-color : lightgreen;
}
.container2 view:nth-child(2) {
background-color : lightskyblue;
}
.container2 view:nth-child(3){
background-color : lightpink;
}
.container2{
/*设置父级元素属性*/
background-color: rgb(94, 29, 114);
width: 300px;
height: 100px;
display: flex;/*设置横向排列*/
}
.container_x{
border:1px solid rgb(236, 154, 60) ;
/* 给scroll-view固定宽度高度 */
width: 120px;
height: 100px;
}
运行效果:
swiper 和 swiper-item 组件的基本使用
实现如图的轮播图效果 :
pages/list/list.wxml
<!--pages/list/list.wxml-->
<!-- 轮播图的结构 -->
<swiper class="swiper-container" indicator-dots indicator-color="pink" indicator-active-color="blue" autoplay interval="2000" 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/list/list.wxss
/* pages/list/list.wxss */
/* 轮播图的样式 */
.swiper-container {
height : 150px;
}
.item {
height : 100%;
line-height : 150px;
text-align : center;
}
/*C3伪类选择器*/
swiper-item:nth-child(1) .item {
background-color : lightgreen;
}
swiper-item:nth-child(2) .item{
background-color : lightskyblue;
}
swiper-item:nth-child(3) .item{
background-color : lightpink;
}
效果图:
swiper属性说明
属性说明见官网:传送门
常用的基础内容组件
① text
●文本组件
●类似于 HTML 中的 span 标签,是一个行内元素
② rich-text
●富文本组件
●支持把 HTML 字符串渲染为 WXML 结构
text 组件的基本使用
通过 text 组件的 selectable 属性,实现长按选中文本内容的效果 :
在小程序里面只有text组件支持长按选中
<view>
长按选中效果
<text selectable>100866666666</text>
</view>
rich-text组件的nodes属性将HTML字符串渲染成WXML结构
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>
效果图
其它常用组件 button.
① 按钮组件
●功能比 HTML 中的 button 按钮丰富
● 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
② image
●图片组件
● image 组件默认宽度约 300px、高度约 240px
③ navigator
●页面导航组件 类似于 HTML 中的a链接
button 按钮的基本使用
pages/list/list.wxml
<!--pages/list/list.wxml-->
<!-- 按钮组件的基本使用 -->
<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>
效果图:
image 组件的基本使用
image 组件的 mode 属性 image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下 :
<!--pages/list/list.wxml-->
<!-- image图片组件 -->
<image></image>
<image src="/images/1.jpg" mode="heightFix"></image>
/* pages/list/list.wxss */
image{
border: 1px solid red;
}
运行效果: