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 链接
原文链接: https://blog.csdn.net/qq_53568730/article/details/135718593