目录

一、scroll-view

（1）作用

（2）用法

二、swiper和swiper-item

（1）作用

（2）用法

三、text

（1）作用

（2）使用

四、rich-text

（1）作用

（2）使用

五、button

（1）作用

（2）使用

六、image

（1）作用

（2）使用

---

前言：

本文主要介绍刚学习微信小程序需要学习的一些基本组件

一、scroll-view

（1）作用

可滚动的视图区域，常用来实现滚动列表效果（有横向滚动和纵向滚动）

（2）用法

//wxml文件
class="scrollcon" scroll-y>    //这里scroll-y表示纵向滚动
  <view>Aview>                            //换成scroll-x表示横向滚动
  <view>Bview>
  <view>Cview>

/**index.wxss**/
 
.scrollcon view{
  /* 这里设置的宽高表示的是包含的这个ABC*/
  width: 200px;
  height: 100px;
  text-align: center;
}
 
.scrollcon view:nth-child(1){
  background-color: lightcoral;
}
 
.scrollcon view:nth-child(2){
  background-color: lightgreen;
}
 
.scrollcon view:nth-child(3){
  background-color: lightseagreen;
}
 
.scrollcon{
  /* 这里设置的宽高是纵向滚动的这个列表*/
  height: 200px;
  width: 200px;
  border: 1px solid red;
}

二、swiper和swiper-item

（1）作用

实现轮播图的效果

（2）用法

class="swip" indicator-dots indicator-color="white">
 <swiper-item>
   <view class="item">Aview>
 swiper-item>
  
  <swiper-item>
   <view class="item">Bview>
  swiper-item> 
  
  <swiper-item>
    <view class="item">Cview>
  swiper-item>

/**index.wxss**/
 
.swip{
  height:150px;
}
.item{
  height: 100%;
  text-align: center;
}
 
swiper-item:nth-child(1) view{
  background-color: lightcoral;
}
 
swiper-item:nth-child(2) view{
  background-color: lightgray;
}
swiper-item:nth-child(3) view{
  background-color: lightgreen;
}

swiper组件的常用属性：

    属性                     说明
indicator-dots             是否显示面板的指示点，默认是不显示的，如果需要使用该值，直接写上
indicator-color            指示点的颜色
indicator-active-color     当前选中的指示点的颜色
autoplay                   是否自动切换
interval                   自动切换的时间间隔，单位是毫秒 
circular                   是否采用写接滑动

三、text

（1）作用

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

（2）使用

通过text组件的selectable属性，可以实现长按选中文本内容的效果
 
666

四、rich-text

（1）作用

通过该组件的nodes节点，可以吧HTML字符串渲染为对应的UI结构

（2）使用

"
666
">

五、button

（1）作用

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

（2）使用

 
 <button type="primary">主色调按钮button>
 <button type="warn">警告按钮button>
 <button type="default">默认按钮button>
 
 
 <button type="primary">正常按钮button>
 <button type="primary">1button>
 <button type="primary" size="mini">小尺寸按钮button>
 <button type="primary" size="mini">1button>
 
 
 <button type="primary" plain>镂空按钮button>

六、image

（1）作用

图片组件，默认宽度约为300px，高度为240px

（2）使用

  <image src="指定图片的路径">image>

 mode值           说明
 scaleToFill    默认值，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
 aspectFit      缩放模式，保持纵横比，可以将图片完整的显示出来
 aspectFill     保证图片的短边显示出来，也就是说图片通常只能在水平或者垂直方向上是完整的，另外一个方向则会发生截取
 widthFix       宽度不变，高度自动发生变化，保持原图的宽高比不会发生变化。 
 heightFix      高度不变，宽度会发生自动变化，保持原图的宽高比不会发生变化