小程序开发【6】

IWSXQY
64 阅读1分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情”

1.swiper和swiper-item组件的基本使用

实现轮播图的效果：

  1. 先实现一下轮播图的框架：
<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>

2 给轮播图设置一下样式

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

swiper-item:nth-child(1) .item{
  background-color: violet;
}

swiper-item:nth-child(2) .item{
  background-color: yellow;
}

swiper-item:nth-child(3) .item{
  background-color:blue;
}

image.png

image.png

2.swiper组件的常用属性

image.png

在框架里加上上面一个属性，就可以实现下面的效果：

image.png

代码如下：

<swiper class="swiper-container" indicator-dots>
<!-- 第一个轮播图 -->
<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>

对于下面的显示面板指示点设置颜色，不仅可以显示指示点的颜色，还可以显示当前选中的颜色：

image.png

代码如下：

<swiper class="swiper-container" indicator-dots indicator-color="black" indicator-active-color="red">
<!-- 第一个轮播图 -->
<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>

可以设置轮播图自动播放，在框架内增加一个属性即可：

image.png

代码如下：

<swiper class="swiper-container" indicator-dots indicator-color="black" indicator-active-color="red" autoplay>
<!-- 第一个轮播图 -->
<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>

可以设置一下自动切换播放的时间：

1000=1秒

image.png

代码如下：

<swiper class="swiper-container" indicator-dots indicator-color="black" indicator-active-color="red" autoplay interval="3000">
<!-- 第一个轮播图 -->
<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>

如果想实现衔接活动，也就是说划到最后一个之后还可以继续划到第一个：

image.png

<swiper class="swiper-container" indicator-dots indicator-color="black" indicator-active-color="red" autoplay interval="3000" circular>
<!-- 第一个轮播图 -->
<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>

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情”

avatar
文章
阅读
粉丝