小程序的宿主环境 - 组件

小程序的宿主环境 - 组件

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;
}

运行效果：