微信小程序-02

swiper 和 swiper-item 组件的基本使用
轮播图

<!--pages/list/list.wxml-->
<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/list/list.wxss */
.swiper-container{
  height:150px;
}
.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: seagreen;
}
swiper-item:nth-child(2) .item{
  background-color:springgreen;
}
swiper-item:nth-child(3) .item{
  background-color:wheat;
}

swiper 组件的常用属性

text
文本组件
类似于 HTML 中的 span 标签，是一个行内元素
通过 text 组件的 selectable 属性，实现长按选中文本内容的效果

<view>
手机号支持长按选中
<text selectable>18884567893</text>
</view>

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

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

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

image
图片组件
image 组件默认宽度约 300px、高度约 240px

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