微信小程序中如何实现轮播图效果

更新时间：2024年03月16日 11:05:43 作者：-希冀-

这篇文章主要介绍了微信小程序中实现轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

一、swiper视图容器组件

swiper是轮播图的外层容器，所以使用轮播图就必须使用到swiper标签。

二、swiper相关属性

存在默认样式：
1 width 100%
2 height 150px

三、swiper-item轮播项

只能放置在swiper组件中。表示每一个轮播项。

四、代码实现

<!-- index.wxml代码如下 -->
<view>
  <swiper interval="1000" indicator-dots="true" autoplay="true" circular="true">
    <swiper-item>
      <image mode="widthFix" src="https://img-blog.csdnimg.cn/5589ae9720df44fda0967faaa288a553.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
    </swiper-item>
    <swiper-item class="cri"> 
      <image mode="widthFix" src="https://img-blog.csdnimg.cn/5580029c6bed471487fe93983088cbae.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
    </swiper-item>
      <swiper-item>
        <image mode="widthFix" src="https://img-blog.csdnimg.cn/1472745c740d42caa002fb5b24b0069a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBALeW4jOWGgC0=,size_20,color_FFFFFF,t_70,g_se,x_16"></image>
      </swiper-item>
  </swiper>
</view>

编译效果：

五、注意事项

当切换机型后，就可以方向，图片的宽高与效果不一样

1.分析和升级版本，解决换机型的宽高问题

①先找出原图片的宽度和高度，我这里的原图宽高是491*327
②等比例给swiper 定宽度和高度
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
由上面可以推出：
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
即 swiper 高度 = calc(100vw * 327 / 491)
③需要知道的是：css中vm是视口单位，1vw=视口宽度的百分之一，而swiper 宽度的默认是100%，即相当于100vm
所以只需要在相对应的wcss中加入如下样式即可

swiper {
  width: 100%;
  height: calc(100vw * 327 /  491);
}
image {
  width: 100%;
}

此时编译再观察效果，任何机型都能达到预期效果啦

到此这篇关于微信小程序中实现轮播图效果的文章就介绍到这了,更多相关小程序轮播图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

关于javascript中this关键字(翻译+自我理解)
在传统面向对象语言中，this关键字是个很乖的小孩，从不乱跑，该是谁的就是谁的。可是在JavaScript中，我们发现它不那么乖，有时甚至把我们搞的晕头转向的。所以有必要对它稍微做个总结。
2010-10-10
Bootstrap零基础入门教程(二)
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了Bootstrap零基础入门教程(二) 的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
2016-07-07
在JavaScript中模拟类(class)及类的继承关系
众所周知,JavaScript中没有类,然而我们却可以动手实现一个拥有继承特性的类,所以接下来我们要讨论的便是在JavaScript中模拟类(class)及类的继承关系:
2016-05-05
关于前端面试中常提到的LRU缓存策略详析
LRU缓存就是一种常用策略,下面这篇文章主要给大家介绍了关于前端面试中常提到的LRU缓存策略的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
JS常见问题整理(持续更新)
JS常见问题在开发过程中会经常遇到过，本文整理了一些实际开发中存在的问题，晒出来与大家一起分享，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
JS优化与惰性载入函数实例分析
这篇文章主要介绍了JS优化与惰性载入函数,结合具体实例形式分析了JS惰性载入的原理、实现技巧与相关注意事项,需要的朋友可以参考下
2017-04-04
JS获取多维数组中相同键的值实现方法示例
这篇文章主要介绍了JS获取多维数组中相同键的值实现方法,结合实例形式分析了JS数组遍历、判断、键值获取等操作技巧,需要的朋友可以参考下
2017-01-01
js计算德州扑克牌面值的方法
这篇文章主要介绍了js计算德州扑克牌面值的方法,实例分析了javascript计算扑克面值的算法技巧,需要的朋友可以参考下
2015-03-03
JavaScript实现京东购物放大镜和选项卡效果的方法分析
这篇文章主要介绍了JavaScript实现京东购物放大镜和选项卡效果的方法,结合实例形式分析了javascript基于事件响应、数值计算与页面元素动态修改实现图片放大功能以及tab选项卡切换效果相关操作技巧,需要的朋友可以参考下
2018-07-07
详解JS HTML Web端使用MQTT通讯测试
这篇文章主要介绍了JS HTML Web端使用MQTT通讯测试,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04