开始

轮播图
image.png
用到官网提供的swiper组件。
image.png
输入uswi
image.png
生成的代码
image.png

  1. <!-- 轮播图 -->
  2.                         <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
  3.                             <swiper-item>
  4.                                 <view class="swiper-item"></view>
  5.                             </swiper-item>
  6.                             <swiper-item>
  7.                                 <view class="swiper-item"></view>
  8.                             </swiper-item>
  9.                         </swiper>

image.png
image.png
复制3个里面，放图片就可以了。
image.png

  1. <swiper :indicator-dots="true" 
  2.                         :autoplay="true" 
  3.                         :interval="3000" 
  4.                         :duration="1000">
  5.                             <swiper-item>
  6.                                 <image src="../../static/demo/banner1.jpg" mode=""></image>
  7.                             </swiper-item>
  8.                             <swiper-item>
  9.                                 <image src="../../static/demo/banner2.jpg" mode=""></image>
  10.                             </swiper-item>
  11.                             <swiper-item>
  12.                                 <image src="../../static/demo/banner2.jpg" mode=""></image>
  13.                             </swiper-item>
  14.                         </swiper>

加个样式
image.png

  1. class="topic-swiper"

image.png
轮播图加一些间距，然后就是图片要100%撑满
image.png

优化

增加内边距，然后 图片100%宽度。
image.png

  1. .topic-swiper{
  2.     padding: 0 20upx 20upx 20upx;
  3. }
  4. .topic-swiper image{
  5.     width: 100%;
  6. }

image.png

增加圆角
image.png

  1. .topic-swiper image{
  2.     width: 100%;
  3.     border-radius: 10upx;
  4. }

image.png

本节代码

  1. <!-- 轮播图 -->
  2.                         <swiper class="topic-swiper" :indicator-dots="true" 
  3.                         :autoplay="true" 
  4.                         :interval="3000" 
  5.                         :duration="1000">
  6.                             <swiper-item>
  7.                                 <image src="../../static/demo/banner1.jpg" mode=""></image>
  8.                             </swiper-item>
  9.                             <swiper-item>
  10.                                 <image src="../../static/demo/banner2.jpg" mode=""></image>
  11.                             </swiper-item>
  12.                             <swiper-item>
  13.                                 <image src="../../static/demo/banner2.jpg" mode=""></image>
  14.                             </swiper-item>
  15.                         </swiper>
  1. .topic-swiper{
  2.     padding: 0 20upx 20upx 20upx;
  3. }
  4. .topic-swiper image{
  5.     width: 100%;
  6.     border-radius: 10upx;
  7. }

结束