微信小程序前端开发-电商购物小程序-轮播图的制作

目录

一、开发环境

 二、什么是轮播图

 三、制作过程

1.js界面

 2.wxml界面

四、 成果界面展示

---

一、开发环境

1. 操作系统：Windows 11
2. 开发工具：微信开发者工具、HBuilderX

 二、什么是轮播图

轮播图是一种常见的网页设计元素，用于在一个固定区域内循环展示多张图片或内容。

微信小程序的轮播图是一种常见的展示广告、推荐内容或重要信息的方式。它可以通过自动轮播或手动切换的方式呈现给用户，提升用户体验和吸引力。它通常用于展示广告、推荐内容或重要信息。 如视频所示。

微信小程序轮播图示例

 三、制作过程

1.js界面

在制作电商网购首页轮播图时，我首先需要获取轮播图的数据。我使用了异步请求的方式，通过调用接口获取轮播图的相关信息。这些信息包括图片的链接、标题、描述等。通过异步获取数据，我可以在小程序中实现动态绑定数据的功能，使轮播图能够根据后台数据的变化进行更新。 

若对异步获取数据、动态绑定数据有不理解的地方，可翻阅写文章-CSDN创作中心https://mp.csdn.net/mp_blog/creation/editor/132782411

其名为getImgs()的JavaScript函数。它使用wx.request()函数向URL 'http://xxx.xxx.xx......'发起HTTP请求。在接收到成功的响应后，会执行success回调函数，并将响应数据赋值给数据对象的imgs属性，使用this.setData()方法进行更新。

根据代码中使用的wx对象，可以推断这段代码是用于微信小程序开发的。wx.request()函数用于发起异步的HTTP请求，然后使用响应数据更新数据对象中的imgs属性。

 getImgs() {
    wx.request({
      url: 'http://xxx.xxx.xx......',
      success: (res) => {
        this.setData({
          imgs: res.data.banners
        });
      }
    });
  },

 2.wxml界面

在小程序的首页页面中使用了 swiper 组件来创建轮播图。swiper 是一个常用的轮播图组件，可以实现图片的自动轮播和手动切换功能。

swiper标签：创建一个轮播图容器，用于包裹swiper-item。

circular属性：设置为true，表示轮播图可以循环播放，即从最后一张切换到第一张时会自动切换。

indicator-dots属性：设置为true，表示显示轮播图的指示点。

autoplay属性：设置为true，表示自动播放轮播图。

interval属性：设置轮播图切换的时间间隔，单位为毫秒。

duration属性：设置轮播图切换的动画时长，单位为毫秒。

swiper-item标签：用于包裹每一张轮播图的内容。

wx:for属性：用于循环遍历imgs数组中的图片路径，生成多个swiper-item。

image标签：用于显示图片，设置style属性的width为100%可以使图片充满整个swiper-item。

//微信小程序的WXML语言编写
<!-- 轮播图 -->
<swiper circular="{{true}}" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{1000}}" duration="{{500}}">
    <swiper-item wx:for="{{imgs}}">
         <image style="width: 100%;" src="{{item}}" mode=""/>
    </swiper-item> 
</swiper>

在 swiper 组件中，我设置了相关属性，如自动播放、切换速度等。我通过设置 circular 属性为 true，可以实现循环播放的效果；通过设置 indicator-dots 属性为 true，可以显示轮播图的指示点；通过设置 autoplay 属性为 true，可以实现自动播放的效果；通过设置 interval 属性为 1000，可以设置轮播图的切换间隔时间为 1 秒；通过设置 duration 属性为 500，可以设置轮播图的切换动画时间为 0.5 秒。经过这些属性的设置，我可以控制轮播图的展示效果和行为。

四、 成果界面展示

轮播图详细视频在上方有展示