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

news2024/12/24 19:59:46

轮播图

引言

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

轮播图数据准备

首先，在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.js

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

<!--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;

}