当前位置: 首页 > article >正文

【微信小程序】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.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;

}

展示


http://www.kler.cn/a/449058.html

相关文章:

  • springboot中使用gdal将表中的空间数据转shapefile文件
  • UG NX二次开发(C#)-机电概念设计-UIStyler中selection块选择信号等对象的过滤器设置
  • 使用Vue+Django开发的旅游路书应用
  • 《计算机组成及汇编语言原理》阅读笔记:p48-p81
  • GitLab的安装与卸载
  • 0009.基于springboot+layui的ERP企业进销存管理系统
  • 服务器建立-错误:pyenv环境建立后python版本不对
  • 如何解决 ‘adb‘ 不是内部或外部命令,也不是可运行的程序或批处理文件的问题
  • 观成科技:轻量级内网穿透工具natpass加密流量分析
  • Qt中的异步相关类
  • JDK11下载安装和配置超详细过程
  • c++介绍
  • Vue3之状态管理Vuex
  • 选择屏幕的用法
  • Lua脚本在FreeSWITCH中的应用
  • VBA技术资料MF243:利用第三方软件复制PDF数据到EXCEL
  • Nginx 负载均衡的实现
  • 智能体实战(六顶思考帽)一、六顶思考帽智能体实现(基于柳丁思考帽理论,让大模型在不同角度对问题进行思考并给出答案)
  • Highcharts 饼图:数据可视化利器
  • 谷歌集群数据集:负载均衡云服务测试数据
  • 自动驾驶控制算法-横向误差微分方程LQR前馈控制
  • 深度学习在语音识别中的应用
  • 【Spring】控制反转(IoC)与依赖注入(DI)—依赖注入的分类与方式
  • Hive其七,序列化和反序列化,Serd,存储格式,压缩,以及视图view
  • 【解决】Linux更新系统内核后Nvidia-smi has failed...
  • vscode Ctrl D 复制到下一行 快捷键