本篇的主要内容就是 swiper 组件，它可以实现首页上方的滚动视图

首先新建一个页面，基本的框架就是<swiper>内嵌很多<swiper-item>

1
2
3
4
5
<swiper>
  <swiper-item>111</swiper-item>
  <swiper-item>222</swiper-item>
  <swiper-item>333</swiper-item>
</swiper>

这实在是过于方便了，现在去找三张图加进去

1
2
3
4
5
6
7
8
9
10
11
<swiper>
  <swiper-item>
    <image src="/images/1.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2.jpg"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/3.jpg"></image>
  </swiper-item>
</swiper>

但是很明显，图片并没有按正常比例显示

稍微修改一下样式

1
2
3
4
5
6
7
8
9
10
11
<swiper class="banner">
  <swiper-item>
    <image src="/images/1.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/2.jpg" mode="widthFix"></image>
  </swiper-item>
  <swiper-item>
    <image src="/images/3.jpg" mode="widthFix"></image>
  </swiper-item>
</swiper>
1
2
.banner{height: 400rpx; border: 1px solid red; }
.banner image{width: 100%;}

看上去还行，下面来看一下 <swiper> 中的属性，在文档中都有

有几个属性是比较常用的

  • indicator-dots ：是否显示面板指示点
  • indicator-color ：指示点颜色
  • indicator-active-color ： 当前选中的指示点颜色
  • autoplay ：是否自动切换
  • interval ：自动切换时间间隔
  • circular ：轮播