【微信小程序】2|轮播图 | 我的咖啡店-综合实训

轮播图

引言

        在微信小程序中，轮播图是一种常见的用户界面元素，用于展示广告、产品图片等。本文将通过“我的咖啡店”小程序的轮播图实现，详细介绍如何在微信小程序中创建和管理轮播图。

轮播图数据准备

首先，在home.js文件中，我们需要准备轮播图的数据。这些数据通常包括图片的URL地址，我们将它们存储在data对象的bannerList数组中：

Page({data: {bannerList: ['https://i-blog.csdnimg.cn/direct/420b00699f0643d88fd7bd549cba78a4.png','https://i-blog.csdnimg.cn/direct/d41b0f66fc404023b4796cb0dd8bafaa.png','https://i-blog.csdnimg.cn/direct/92f3b715f4d94723a6b9b1d941d16aa3.png','https://i-blog.csdnimg.cn/direct/2c21368a3870417f9ca522b2c0975b5d.png']}
})

轮播图布局

接下来，在home.wxml文件中，我们使用<swiper>组件来创建轮播图。<swiper>组件是微信小程序提供的用于创建轮播图的组件，它支持自动播放、循环播放等功能。

<view class="home"><swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular><swiper-item wx:for="{{bannerList}}" wx:key="index"><image src="{{item}}" referrerPolicy="no-referrer" class="b-img" /></swiper-item></swiper>
</view>

        在这段代码中，indicator-dots属性用来显示轮播图的指示点，indicator-active-color设置指示点的激活颜色，autoplay属性设置为true表示自动播放，interval属性设置自动播放的时间间隔（以毫秒为单位），circular属性设置为true表示循环播放。

轮播图样式

最后，在home.wxss文件中，我们定义了轮播图的样式。这里我们设置了图片的宽度为100%，并且高度固定为592rpx：

image {width: 100%;display: block;
}swiper {height: 592rpx;
}.b-img {height: 592rpx;
}

  1px == 2rpx是微信小程序中的一个换算关系，rpx是微信小程序特有的尺寸单位，用于适配不同屏幕。

结语

        通过上述步骤，我们成功在“我的咖啡店”小程序中实现了轮播图功能。用户可以轻松地在小程序首页浏览不同的图片。如果你在实现过程中遇到图片加载问题，可能是由于网络原因或者图片链接的问题。请检查图片链接的合法性，并在必要时重试。希望这篇文章能帮助你在开发自己的微信小程序时，更好地实现轮播图功能。

完整代码

home.js

// pages/home/home.jsPage({//页面的初始数据data: {// 轮播图数据bannerList: ['https://i-blog.csdnimg.cn/direct/420b00699f0643d88fd7bd549cba78a4.png','https://i-blog.csdnimg.cn/direct/d41b0f66fc404023b4796cb0dd8bafaa.png','https://i-blog.csdnimg.cn/direct/92f3b715f4d94723a6b9b1d941d16aa3.png','https://i-blog.csdnimg.cn/direct/2c21368a3870417f9ca522b2c0975b5d.png']},})

home.wxml

<!--pages/home/home.wxml--><!-- div ==> view  img ==> image --><view class="home"><!-- 轮播图开始 --><swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular><!-- wx:for="{{数据}}" wx:key  默认 index下标   item每一项 --><swiper-item wx:for="{{bannerList}}" wx:key="index"><image src="{{item}}" referrerPolicy="no-referrer" class="b-img" /></swiper-item></swiper><!-- 轮播图结束 --></view>

home.wxss

/* pages/home/home.wxss *//* 1px == 2rpx  */image {width: 100%;display: block;}swiper {height: 592rpx;}.b-img {height: 592rpx;}

展示