微信小程序的轮播图学习报告

news/2024/12/25 3:37:13/

小程序>微信小程序轮播图学习报告

好久都没分享新内容了,实在惭愧惭愧。今天给大家做一个小程序轮播图的学习报告。

先给大家看一下我的项目状态:

在这里插入图片描述

很空昂!像一个正在修行的老道,空的什么也没有。

但是我写了 4 个 view 容器,随手写的啦…

稍后,我要写 swiper 标签,swiper标签是实现轮播图的关键。

轮播图绘制

小程序的轮播图和以往的前端开发不同。大多数东西 都是封装好的,我们在用的时候只需要调用人家封装好的就可以了。

小程序"><view class="swiper"><swiper><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item></swiper>
</view>

在这块代码块中,我在 view 容器里,设置了 swiper 标签,刚才有提过,swiper 标签是小程序中实现轮播图的关键。而 swiper 标签下的 swiper-item 可以看成是一个子标签。

就好像 swiper 是一位父亲,而swiper-item 是这位父亲的各个儿子,儿子们如果想像父亲一样驰骋猎场,就必须是该父亲的儿子,所以创建在 swiper 下面。而每个儿子都是该轮播图的一部分。

效果如下:

这儿啊!我本来真的想放效果的,图片不太看的出来,录制了几秒钟的视频,插入不进来,回头俺私下去找个 可以截 GIF 的工具。

麻烦大家自己测试吧。

样式调制

现在轮播图已经有了,只不过很丑很丑。。
在调整调整样式。

在这里插入图片描述

找到该界面文件下的 wxss文件,我这里改的是 scss。不过都没关系啊,你也可以改一下,
下边我们要去这个文件里设置局部的样式。

小程序">.swiper {swiper {height: 360rpx;background-color: skyblue;swiper-item {// & 连接符 在 scss 文件中 代表 父类选择器引用的意思。// 运行后会被解析为 swiper-item&:first-child {background-color: lightsalmon;}&:last-child {background-color: lightseagreen;}}
}
}

在这个文件中,我写上了这块代码段。

调用刚才wxml界面定义的名字。告诉他 我要给他设置的样式。

由于过于基础,不进行详细介绍了,初学的小伙伴 可以评论区交流。

更多的属性介绍

轮播图自动播放

移步至 wxml 文件中,我们给 swiper 添加 autoplay 属性。 该熟悉的默认值为 true,不写值 也可以。

小程序"><view class="swiper"><swiper autoplay="true"><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item></swiper>
</view>

轮播时常设置

通过interval 属性,将轮播时常调整成 两秒

小程序"><view class="swiper"><swiper autoplay="true" interval="2000"><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item></swiper>
</view>

底部导航

indicator-dots 属性值 也是布尔类型。默认为 true
indicator-color 属性可以设置底部导航原点的颜色

设置小圆点激活时的样式通过 indicator-active-color 进行调制

小程序"><view class="swiper"><swiper autoplay="true" interval="2000" indicator-dots="true"><swiper-item>1</swiper-item><swiper-item>2</swiper-item><swiper-item>3</swiper-item></swiper>
</view>

轮播顺序调制

小程序"><!-- 轮播顺序设置通过 circular 进行设置 默认为 true -->

设置图片到轮播图中

写困了。这里简单介绍一下吧。眼皮打架了…

小程序"><view class="swiper"><swiper autoplay="true" interval="2000" indicator-dots="true"><swiper-item><image src="图片路径" mode="" /></swiper-item></swiper>
</view>

如果 只是学习了解一下,就这样把图片加进去,然后到 scss 文件中 去调整样式。

小程序">.swiper {swiper {height: 360rpx;background-color: skyblue;swiper-item {image {// 宽和高 设置为 占满轮播图width: 100%;height: 100%;}&:first-child {background-color: lightsalmon;}&:last-child {background-color: lightseagreen;}}
}
}

好了奥 伙伴们,简单分享一下 困了 该咪西了.


http://www.ppmy.cn/news/1557900.html

相关文章

C05S07-Tomcat服务架设

一、Tomcat 1. Tomcat概述 Tomcat也是一个Web应用程序&#xff0c;具有三大核心功能。 Java Servlet&#xff1a;Tomcat是一个Servlet容器&#xff0c;负责管理和执行Java Servlet、服务端的Java程序&#xff0c;处理客户端的HTTP请求和响应。Java Server&#xff1a;服务端…

Unity全局雾效

1、全局雾效是什么 全局雾效&#xff08;Global Fog&#xff09;是一种视觉效果&#xff0c;用于在3D场景中模拟大气中的雾气对远处物体的遮挡 它通过在场景中加入雾的效果&#xff0c;使得距离摄像机较远的物体看起来逐渐被雾气覆盖&#xff0c;从而创造出一种朦胧、模糊的视…

MMAudio - 自动给视频配音效

MMAudio 在给定视频和/或文本输入的情况下生成同步音频。我们的关键创新是多模式联合训练&#xff0c;它允许对广泛的视听和音频文本数据集进行训练。此外&#xff0c;同步模块将生成的音频与视频帧对齐。 419 Stars 26 Forks 2 Issues NA 贡献者 MIT License Python 语言 代码…

Docker环境下MySQL数据库持久化部署全攻略

概述 在当今的软件开发领域&#xff0c;Docker容器技术已经成为应用部署和管理的新标准。它不仅简化了应用的部署流程&#xff0c;还为数据管理提供了灵活的解决方案。特别是在涉及到MySQL数据库时&#xff0c;数据持久化是一个不可忽视的重要环节。本文将分享如何在Docker中部…

websocket 局域网 webrtc 一对一 多对多 视频通话 的示例

基本介绍 WebRTC&#xff08;Web Real-Time Communications&#xff09;是一项实时通讯技术&#xff0c;它允许网络应用或者站点&#xff0c;在不借助中间媒介的情况下&#xff0c;建立浏览器之间点对点&#xff08;Peer-to-Peer&#xff09;的连接&#xff0c;实现视频流和&am…

SQLite 是一个轻量级的嵌入式数据库,不需要安装服务器,直接使用文件即可。

下载 SQLite 命令行工具 访问 SQLite 官方网站。 下载适合你操作系统的命令行工具&#xff08;例如 sqlite3.exe&#xff09;。 创建 SQLite 数据库文件 打开命令行工具&#xff08;例如 Windows 的 cmd 或 PowerShell&#xff09;。 导航到你希望保存数据库文件的目录。 运…

QT的前景与互联网岗位发展

qt是用来干什么的 --》桌面应用开发&#xff08;做电脑的应用程序&#xff0c;面对客户端&#xff09;。 主要用于开发跨平台的应用程序和用户界面&#xff08;UI&#xff09;。它是一个全面的C库集合&#xff0c;提供了构建软件应用所需的各种工具和功能。 客户端开发的重…

MySQL的并发控制与MVCC机制深度解析

目录 1. MySQL中的并发问题2. 数据库的隔离级别3. MVCC&#xff08;多版本并发控制&#xff09;机制3.1 MVCC的实现原理3.2 Read View详解3.3 当前读与快照读 4. MVCC在不同隔离级别下的工作方式5. MVCC解决幻读问题6. MVCC的优缺点优点&#xff1a;缺点&#xff1a; 7. MVCC在…