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

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

展示

相关文章:

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

轮播图 引言 在微信小程序中&#xff0c;轮播图是一种常见的用户界面元素&#xff0c;用于展示广告、产品图片等。本文将通过“我的咖啡店”小程序的轮播图实现&#xff0c;详细介绍如何在微信小程序中创建和管理轮播图。 轮播图数据准备 首先&#xff0c;在home.js文件中&a…...

React与Vue的区别(相同点和不同点)

前言 JavaScript是世界上最流行的语言之一&#xff0c;React和Vue是JS最流行的两个框架。但各有优缺点&#xff0c;本文将详细对比两大框架 一、框架背景 React React是由Facebook开发的用于构建用户界面的JavaScript库&#xff0c;Facebook对市场上JavaScript MVC框架都不太…...

Python语言的文件操作

Python语言的文件操作 在现代编程中&#xff0c;文件操作是每个程序员都需要掌握的基本技能之一。无论是数据的持久化存储、日志的记录&#xff0c;还是配置信息的读取&#xff0c;文件操作都是不可或缺的一部分。Python作为一种高级编程语言&#xff0c;其简单易用的文件操作…...

前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现

工具介绍&#xff1a; pako.js 前端压缩解压的库&#xff08;包含 zlib 和gzip 两种实现&#xff0c;这里只介绍 zlib&#xff09; pako 2.0.4 API documentation Java8 原生支持 zlib 和 gzip 业务场景 因为数据太大&#xff0c;网络环境不可控。故前端需要将数据 A 先压缩…...

unity 打包出来的所有执行文件内容打包成一个exe程序

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、使用Enigma Virtual Box1.下载安装包&#xff08;根据需要32位还是64位。一般是64位&#xff09;2.改个语言&#xff0c;方便使用&#xff08;改了后重启才…...

华为管理变革之道:组织文化与活力

目录 企业文化是什么&#xff1f; 为什么活下去是华为的文化&#xff1f; 活下来&#xff0c;是华为公司的最低纲领&#xff0c;也是华为公司的最高纲领&#xff01; 资源终会枯竭&#xff0c;唯有文化才能生生不息 企业文化之一&#xff1a;以客户为中心 企业文化之二&a…...

仿闲鱼的二手交易小程序软件开发闲置物品回收平台系统源码

市场前景 闲置物品交易软件的市场前景广阔&#xff0c;主要基于以下几个方面的因素&#xff1a; 环保意识提升&#xff1a;随着人们环保意识的增强&#xff0c;越来越多的人开始关注资源的循环利用&#xff0c;闲置物品交易因此受到了广泛的关注。消费升级与时尚节奏加快&…...

PostgreSQL CRUD 操作指南

PostgreSQL CRUD 操作指南 连接数据库 -- 连接到特定数据库 psql -U postgres -d xianxia-- 列出所有数据库 \l-- 切换数据库 \c xianxia-- 列出所有表 \dt-- 查看表结构 \d table_name基本 CRUD 操作 CREATE&#xff08;创建&#xff09; -- 创建新表 CREATE TABLE users …...

4X4规模S盒分量布尔函数计算工具(附各大常见分组加密算法S盒查找表和其对应分量布尔函数截图)

文章结尾有S盒分量布尔函数计算工具下载地址 Serpent {0x3,0x8,0xF,0x1,0xA,0x6,0x5,0xB,0xE,0xD,0x4,0x2,0x7,0x0,0x9,0xC} LBlock {0xE,0x9,0xF,0x0,0xD,0x4,0xA,0xB,0x1,0x2,0x8,0x3,0x7,0x6,0xC,0x5} GOST {0x4,0xA,0x9,0x2,0xD,0x8,0x0,0xE,0x6,0xB,0x1,0xC,0x7,0xF,0x5,0…...

模拟——郑益慧_笔记1_绪论

B站视频链接 模电是数电的基础&#xff1b;参考书&#xff1a; 模拟电子技术基础&#xff08;第四版&#xff09;华成英、童诗白主编&#xff0c;高等教育出版社&#xff1b;电子技术基础 模拟部分 康华光主编&#xff0c;高等教育出版社&#xff1b; 电子技术的发展史 电子…...

金融租赁系统的发展与全球化战略实施探讨

内容概要 金融租赁系统的演变并非一帆风顺&#xff0c;像一场跌宕起伏的电影。首先&#xff0c;咱们得看看它的起源及现状。随着经济的快速发展&#xff0c;金融租赁逐渐作为一种灵活的融资手段崭露头角。在中国市场中&#xff0c;企业对设备和技术更新换代的需求日益迫切&…...

vue3入门教程:计算属性

计算属性的基本用法 计算属性是通过computed函数创建的&#xff0c;它接受一个getter函数作为参数&#xff0c;并返回一个只读的响应式ref对象。该ref对象通过.value属性暴露getter函数的返回值。 <template><div><p>原始数据: {{ count }}</p><p…...

Docker怎么关闭容器开机自启,批量好几个容器一起操作?

环境&#xff1a; WSL2 docker v25 问题描述&#xff1a; Docker怎么关闭容器开机自启&#xff0c;批量好几个容器一起操作&#xff1f; 解决方案&#xff1a; 在 Docker 中&#xff0c;您可以使用多种方法来关闭容器并配置它们是否在系统启动时自动启动。以下是具体步骤和…...

shell脚本(全)

shell脚本概述 第一个shell脚本 shell注释 shell变量 shell位置参数 shell字符串 shell内置命令 shell命令替换 输出 流程控制IF export命令 退出脚本 运行Shell脚本 实例导航 shell脚本概述 在说什么是shell脚本之前&#xff0c;先说说什么是shell。 从程序员的…...

华为手机建议使用adb卸载的app

按需求自行卸载 echo 卸载智慧搜索 adb shell pm uninstall -k --user 0 com.huawei.search echo 卸载智慧助手 adb shell pm uninstall -k --user 0 com.huawei.intelligent echo 卸载讯飞语音引擎 adb shell pm uninstall -k --user 0 com.iflytek.speechsuite echo 卸载快应…...

论文解读 | EMNLP2024 一种用于大语言模型版本更新的学习率路径切换训练范式

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 作者简介 王志豪&#xff0c;厦门大学博士生 刘诗雨&#xff0c;厦门大学硕士生 内容简介 新数据的不断涌现使版本更新成为大型语言模型&#xff08;LLMs&#xff…...

Java基础(Json和Java对象)

定义好实体类 package com.pyb.pojo; ​ /*** version 1.0* Author 彭彦彬* Date 2024/12/24 20:47* 注释*/ public class Person {private String username;private String password; ​public Person() {} ​public Person(String username, String password) {this.username…...

Linux 中检查 Apache Web Server (httpd) 正常运行时间的 4 种方法

注&#xff1a;机翻&#xff0c;未校。 4 Ways To Check Uptime of Apache Web Server (httpd) on Linux November 28, 2019 by Magesh Maruthamuthu We all know about the purpose of uptime command in Linux. 我们都知道 Linux 中 uptime 命令的目的。 It is used to c…...

Linux驱动开发--字符设备驱动开发

一、概述 字符设备是 Linux 驱动中最基本的一类设备驱动,字符设备就是一个一个字节,按照字节 流进行读写操作的设备,读写数据是分先后顺序的。比如我们最常见的点灯、按键、 IIC、 SPI, LCD 等等都是字符设备,这些设备的驱动就叫做字符设备驱动。 Linux 应用程序对驱动程…...

MarkItDown的使用(将Word、Excel、PDF等转换为Markdown格式)

MarkItDown的使用&#xff08;将Word、Excel、PDF等转换为Markdown格式&#xff09; 本文目录&#xff1a; 零、时光宝盒&#x1f33b; 一、简介 二、安装 三、使用方法 3.1、使用命令行形式 3.2、用 Python 调用 四、总结 五、参考资料 零、时光宝盒&#x1f33b; &a…...

如何快速解决Hackintosh配置难题:OpCore-Simplify终极解决方案指南

如何快速解决Hackintosh配置难题&#xff1a;OpCore-Simplify终极解决方案指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为复杂的OpenCore …...

【AI】Datadog

Datadog是当前全球范围内最主流的商业可观测性平台&#xff0c;是一个将监控、安全与AI分析深度整合的SaaS服务。 作为业界公认的领军者&#xff0c;其核心价值在于提供了一个 “大一统”的中央控制台&#xff0c;帮助企业技术团队全面洞察其整个技术栈的运行状况。在AI快速发展…...

[颠覆性定位技术] Android厘米级定位方案:从算法移植到产业落地

[颠覆性定位技术] Android厘米级定位方案&#xff1a;从算法移植到产业落地 【免费下载链接】RtkGps Playing with rtklib on android 项目地址: https://gitcode.com/gh_mirrors/rt/RtkGps 在移动互联网与物联网深度融合的今天&#xff0c;位置服务已从传统的米级精度向…...

淘宝 API 技术架构与实战指南:从实时数据流到 AIGC 融合的电商开发新范式

在数字经济加速渗透的今天&#xff0c;淘宝开放平台 API 已从简单的数据交互工具进化为支撑电商创新的核心基础设施。2025 年&#xff0c;淘宝 API 体系迎来重大技术跃迁&#xff0c;实时数据流、GraphQL 接口与隐私合规构成新的技术三角&#xff0c;推动电商开发进入 "毫…...

UE5蓝图实战:用JsonLibrary插件轻松搞定WebUI数据交互(附完整节点图)

UE5蓝图实战&#xff1a;用JsonLibrary插件轻松搞定WebUI数据交互 在虚幻引擎5的蓝图开发中&#xff0c;WebUI插件为开发者提供了强大的网页交互能力。然而&#xff0c;当涉及到前后端数据交换时&#xff0c;JSON格式的处理往往成为新手开发者的绊脚石。本文将带你深入探索Json…...

如何将数据从小米传输到三星?完整教程

从小米手机换到三星设备似乎很麻烦&#xff0c;尤其是在传输所有重要数据的时候。好在有几种可靠的方法可供选择&#xff0c;包括三星的智能切换功能。但是三星智能切换功能能兼容小米吗&#xff1f; 在本指南中&#xff0c;我们将解答这个问题&#xff0c;并探索如何轻松高效…...

探索TMSpeech:解锁Windows本地实时语音转文字的高效工作流

探索TMSpeech&#xff1a;解锁Windows本地实时语音转文字的高效工作流 【免费下载链接】TMSpeech 腾讯会议摸鱼工具 项目地址: https://gitcode.com/gh_mirrors/tm/TMSpeech 还在为会议记录手忙脚乱&#xff1f;还在为在线课程跟不上节奏而烦恼&#xff1f;TMSpeech为你…...

【限时解密】UE6.5.2 Preview版C++27调试增强包(含DWARF5符号扩展插件):仅开放72小时申请通道

第一章&#xff1a;UE6.5.2 Preview版C27调试增强包核心特性概览Unreal Engine 6.5.2 Preview 版首次集成 C27 调试增强包&#xff08;C27 Debug Enhancement Pack&#xff09;&#xff0c;该包并非语言标准实现&#xff0c;而是基于 Clang 19 与 MSVC 2025 工具链深度定制的调…...

揭秘量子比特态演化模拟:用现代C++20实现HHL算法,内存开销降低73%的关键技巧

第一章&#xff1a;量子比特态演化模拟的理论基础与工程挑战 量子比特态演化模拟是连接量子力学原理与可执行计算任务的核心桥梁。其理论根基植根于薛定谔方程的幺正演化描述&#xff1a;任意闭合量子系统的时间演化由哈密顿量 $H(t)$ 决定&#xff0c;满足 $|\psi(t)\rangle …...

革新性英雄联盟客户端增强工具:League-Toolkit全方位功能解析

革新性英雄联盟客户端增强工具&#xff1a;League-Toolkit全方位功能解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 英雄联盟玩家在日常游…...