微信小程序的轮播图学习报告

微信小程序轮播图学习报告

好久都没分享新内容了，实在惭愧惭愧。今天给大家做一个小程序轮播图的学习报告。

先给大家看一下我的项目状态：

很空昂！像一个正在修行的老道，空的什么也没有。

但是我写了 4 个 view 容器，随手写的啦...

稍后，我要写 swiper 标签，swiper标签是实现轮播图的关键。

轮播图绘制

小程序的轮播图和以往的前端开发不同。大多数东西都是封装好的，我们在用的时候只需要调用人家封装好的就可以了。

小程序复制代码

<view class="swiper">
  <swiper>
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

在这块代码块中，我在 view 容器里，设置了 swiper 标签，刚才有提过，swiper 标签是小程序中实现轮播图的关键。而 swiper 标签下的 swiper-item 可以看成是一个子标签。

就好像 swiper 是一位父亲，而swiper-item 是这位父亲的各个儿子，儿子们如果想像父亲一样驰骋猎场，就必须是该父亲的儿子，所以创建在 swiper 下面。而每个儿子都是该轮播图的一部分。

效果如下：

这儿啊！我本来真的想放效果的，图片不太看的出来，录制了几秒钟的视频，插入不进来，回头俺私下去找个可以截 GIF 的工具。

麻烦大家自己测试吧。

样式调制

现在轮播图已经有了，只不过很丑很丑。。

在调整调整样式。

找到该界面文件下的 wxss文件，我这里改的是 scss。不过都没关系啊，你也可以改一下，

下边我们要去这个文件里设置局部的样式。

小程序复制代码

.swiper {
  swiper {
    height: 360rpx;
    background-color: skyblue;

    swiper-item {
    // & 连接符 在 scss 文件中 代表 父类选择器引用的意思。
    // 运行后会被解析为 swiper-item
     &:first-child {
        background-color: lightsalmon;
     }

     &:last-child {
       background-color: lightseagreen;
     }
  }
}
}

在这个文件中，我写上了这块代码段。

调用刚才wxml界面定义的名字。告诉他我要给他设置的样式。

由于过于基础，不进行详细介绍了，初学的小伙伴可以评论区交流。

更多的属性介绍

轮播图自动播放

移步至 wxml 文件中，我们给 swiper 添加 autoplay 属性。该熟悉的默认值为 true，不写值也可以。

小程序复制代码

<view class="swiper">
  <swiper autoplay="true">
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

轮播时常设置

通过interval 属性，将轮播时常调整成两秒

小程序复制代码

<view class="swiper">
  <swiper autoplay="true" interval="2000">
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

底部导航

indicator-dots 属性值也是布尔类型。默认为 true

indicator-color 属性可以设置底部导航原点的颜色
设置小圆点激活时的样式通过 indicator-active-color 进行调制

小程序复制代码

<view class="swiper">
  <swiper autoplay="true" interval="2000" indicator-dots="true">
    <swiper-item>
      1
    </swiper-item>
    <swiper-item>
      2
    </swiper-item>
    <swiper-item>
      3
    </swiper-item>
  </swiper>
</view>

轮播顺序调制

小程序复制代码

<!-- 轮播顺序设置通过 circular 进行设置 默认为 true -->

设置图片到轮播图中

写困了。这里简单介绍一下吧。眼皮打架了...

小程序复制代码

<view class="swiper">
  <swiper autoplay="true" interval="2000" indicator-dots="true">
    <swiper-item>
    <image src="图片路径" mode="" />
    </swiper-item>
  </swiper>
</view>

如果只是学习了解一下，就这样把图片加进去，然后到 scss 文件中去调整样式。

小程序复制代码

.swiper {
  swiper {
    height: 360rpx;
    background-color: skyblue;

    swiper-item {
      image {
      // 宽和高 设置为 占满轮播图
        width: 100%;
        height: 100%;
      }
     &:first-child {
        background-color: lightsalmon;
     }

     &:last-child {
       background-color: lightseagreen;
     }
  }
}
}

好了奥伙伴们，简单分享一下困了该咪西了.