微信小程序开发之组件view，scroll-view，swiper，text,rich-text,button,image,navigator

1.介绍：

        view：就类似于div

        scroll-view：滑动框，必须设置一顶范围的高度，否则不能滑动

        swiper：轮播图

        text:文本组件，类似与span标签

        rich-text:富文本

        button:按钮

        image:图片组件,会有默认的高度与宽度

        navigator:页面导航，类似a链接

2.代码：

D:\小程序\pages\list\list.wxml:就相当于html页面

  A
  B
  C

D:\小程序\pages\list\list.wxss:就是css

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: aqua;
}
.container1 view:nth-child(2){
  background-color: blue;
}
.container1 view:nth-child(3){
  background-color: chocolate;
}

.container1{
  /* 让布局横向 */
  /* display: flex; */
  /* 让view之间平均分格开 */
  /* justify-content: space-around; */

  /* 切换样式 */
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

3.轮播图：

3.1.代码实现：

html：

  
      A
  
  
  
      B
  
  
  
    C
  

 css：

/* pages/list2/list2.wxss */
.swiper-container{
  height: 150px;

}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: rgb(177, 71, 71);
}
swiper-item:nth-child(2) .item{
  background-color: royalblue;
}
swiper-item:nth-child(3) .item{
  background-color: hotpink;
}

4.text:                selectable:长按选中                   rich-text:渲染

    手机号支持长按选中
    123456

5.button:

        属性：size：调整大小，plain：镂空，type：类型按钮

默认
主色调
警告
--------------------min-------------------
默认
主色调
警告
------------------------镂空-------------------
默认
主色调
警告

6.image: