微信小程序学习之组件

目录

一.常用的视图组件

1.view

2.scroll-view

3.swiper和swiper-item

4.text

5.rich-text 

6.button

7.image

8.navigator

一.常用的视图组件

1.view

1. 普通视图区域
2. 类似与HTML中的div，是一个块级元素
3. 常用来实现页面的布局效果

 使用效果：

wxml文件：

  A
  B
  C

 wxss文件：

.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{
  display: flex;/*将三个view横向排列*/
  justify-content: space-around;/*横向分散对其齐*/
}

效果图：

2.scroll-view

1. 可滚动的视图区域
2. 常用来实现滚动列表效果

 使用效果：

wxml文件：

  A
  B
  C

 wxss文件：

.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

1. 轮播图容器组件和轮播图item组件

 使用效果：

wxml文件：

  
    A
  
  
    B
  
  
    C
  
 

 wxss文件：

.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 属性

  
    A
  
  
    B
  
  
    C
  
 

效果图：可与上进行对比

4.text

1. 文本组件
2. 类似与HTML中的span标签，是一个行内元素

使用效果：

wxml文件：

  手机号支持长按选中保存
  18814231000

 效果图：

5.rich-text 

1. 富文本组件
2. 支持把HTML字符串渲染为WXML结构

 通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构：

wxml文件：

  手机号支持长按选中保存
  18814231000

效果图：

 6.button

1. 按钮组件
2. 功能比HTML中的button按钮丰富
3. 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权等）

使用效果：

wxml文件：

普通按钮
主色调按钮
警告按钮


普通按钮
主色调按钮
警告按钮


普通按钮
主色调按钮
警告按钮

 效果图：

 

 7.image

1. 图片组件
2. image组件默认高度约300px、高度约240px

使用效果：

wxml文件：

wxss文件：

image{
  border: 1px solid red;
}

效果图：

 

 

 例如更改属性mode为aspectFit，自适应的，效果图：

 

 

 8.navigator

1. 页面导航组件
2. 类似于HTML中的a链接