小程序开发4

#微信小程序开发Day4

小程序的宿主环境-组件

5.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>

/* pages/scavenger/scavenger.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: lightskyblue;
}
swiper-item:nth-child(3) .item{
    background-color: lightsalmon;
}

6.swiper组件的常用属性

属性	类型	默认值	说明
indicator-dots	booolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点的颜色
autoploy	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

7.常用的基础内容组件

• 1.text

  • 文本组件

  • 类似于HTML中的span标签，是一个行内元素

    ​

    8.text组件的基本使用

• 通过text组建的selectable属性，实现长按选中文本内容的效果

<view>
手机号长按选中的效果
<text selectable>18852181310</text>
</view>

• rich-text

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

  9.rich-text组件的基本使用

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

  <rich-text nodes="<h1 style='color: red'>标签：Scvenger.兰淇</h1>"></rich-text>
  

10.其他常用组件

1.button

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

2.image

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

3.navigator

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

10.1—按钮组件

<view>-------通过type指定按钮类型--------</view>
<!-- 按钮组件的基本使用-->
<button>普通按钮</button>
<button type="primary">主色调普通按钮</button>
<button type= "warn">警告普通按钮</button>
<!-- size ="mini"-->
<button type= "warn" size ="mini">警告普通按钮</button>
<!-- plain 镂空按钮-->
<button type="primary" plain>主色调普通按钮</button>

10.2—image组件

<!-- image 图片组件 -->
<image></image>
<image scr="/images/ani.png"></image>

10.3image组件中的mode属性

image组件中的mode属性用来指定图片的剪裁和缩放模式，常用mode属性值如下

mode值	说明
scaleToFill	(默认值)缩放模式，不保持横纵比例缩放图片，使图片的宽高完全拉伸职场填满image元素
aspectFit	缩放模式,保持横纵比例缩放图片，使图片的长边能够完全显示出来，也就是说，可以完整地显示出图片来
aspectFill	缩放模式，保持横纵比例缩放图片，只保证图片的短边能够完全显示出来，也就是说，图片只在水平或垂直方向上保持完整
widthFix	缩放模式，**宽度不变，高度自动变化，**保持原图宽高比不变
heightFix	缩放模式，**高度不变，宽度自动变化，**保持原图宽高比不变

<!-- image 图片组件 -->
<image></image>
<image scr="/images/ani.png"></image>
<image scr="/images/ani.png" mode="aspectFit"></image>
<image scr="/images/ani.png" mode="aspectFill"></image>
<image scr="/images/ani.png" mode="widthFix"></image>
<image scr="/images/ani.png" mode="heightFix"></image>