目录
一、scroll-view
（1）作用
（2）用法
二、swiper和swiper-item
（1）作用
（2）用法
三、text
（1）作用
（2）使用
四、rich-text
（1）作用
（2）使用
（1）作用
（2）使用
六、image
（1）作用
（2）使用
前言：
本文主要介绍刚学习微信小程序需要学习的一些基本组件
一、scroll-view
（1）作用
可滚动的视图区域，常用来实现滚动列表效果（有横向滚动和纵向滚动）
（2）用法
//wxml文件 <scroll-view class="scrollcon" scroll-y> //这里scroll-y表示纵向滚动<view>A</view> //换成scroll-x表示横向滚动<view>B</view><view>C</view> </scroll-view>/**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）用法
<swiper class="swip" indicator-dots indicator-color="white"> <!--第一项--><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>/**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属性，可以实现长按选中文本内容的效果<text selectable>666</text>
四、rich-text
（1）作用
通过该组件的nodes节点，可以吧HTML字符串渲染为对应的UI结构
（2）使用
<rich-text nodes="<h1 style='color: red;'>666</h1>"></rich-text>
五、button
（1）作用
按钮组件，功能比HTML中的button按钮丰富，通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户权限，获取用户信息等等）
（2）使用
<view><!--通过type指定属性--><button type="primary">主色调按钮</button><button type="warn">警告按钮</button><button type="default">默认按钮</button><!--通过size=“mini”小尺寸按钮--><button type="primary">正常按钮</button><button type="primary">1</button><button type="primary" size="mini">小尺寸按钮</button><button type="primary" size="mini">1</button><!--plain镂空按钮--><button type="primary" plain>镂空按钮</button> </view>
六、image
（1）作用
图片组件，默认宽度约为300px，高度为240px
（2）使用
<view><image src="指定图片的路径"></image> </view>mode值 说明scaleToFill 默认值，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素aspectFit 缩放模式，保持纵横比，可以将图片完整的显示出来aspectFill 保证图片的短边显示出来，也就是说图片通常只能在水平或者垂直方向上是完整的，另外一个方向则会发生截取widthFix 宽度不变，高度自动发生变化，保持原图的宽高比不会发生变化。 heightFix 高度不变，宽度会发生自动变化，保持原图的宽高比不会发生变化
