一，view和scroll-view组件的基本使用

view组件实现横向布局效果：flex（display：flex;）

可以把view类似于HTML的div标签。

scroll-view组件:实现纵向滚动效果

scroll-y属性：允许纵向滚动

scroll-x属性：允许横向滚动

❣️注意：使用纵向滚动时，必须给scroll-view一个固定高度

（思考：不给固定高度，都不知道滚到哪里去了。）

<scroll-view class="container1" scroll-y>
</scroll-view>

在list.wxss中设定固定高度。

.container1{
  border:1px solid red;
  width:100px;
  height:120px;
}

二，swiper和swiper-item组件的基本使用

实现轮播图效果

<!--轮番图的结构-->
<swiper class="swiper-container">
  <!--第一个轮番图-->
  <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>

 

三，text和rich-text的组件的基本使用

text类似于HTM中的span标签，是一个行内元素。（文本组件）

rich-text支持把HTML字符串渲染成WXML结构。（富文本组件）

 

text组件中的selectable属性，实现长按复制的操作。

<view>
  手机号支持长按选中效果
  <text selectable>15675101340</text>
</view>

rich-text组件的nodes属性节点，把HTML字符串渲染成对应的UI结构。（商品详情页会用）

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

 

四，button和image组件的基本使用

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

image组件，小程序默认宽度300px，高度约为240px。

通过type属性指定按钮颜色类型

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

 

size="mini" 小尺寸按钮

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

 

plain 镂空按钮

<button plain>普通按钮</button>