小程序组件 —— 22 组件案例 - 轮播区域绘制

这一节我们实现轮播图最外层的盒子,也就是把轮播图的最外层搭好,先不给轮播图添加图片,因为图片属于新的组件,组件里面有一些知识点,需要单独分开讲;

回顾一下,在进行传统网页开发时,实现轮播图的时候,我们首先使用 html、css 实现轮播图的结构样式,然后使用 JS 控制轮播图的效果,或者直接使用插件实现轮播图的功能,而在小程序中实现小程序功能则相对简单很多;

在小程序中,如果想实现轮播图,只需要两个组件:swiperswiper-item

  • swiper:滑块视图容器,可以简单理解为轮播图最外层的容器,是轮播图的盒子,swiper 中不能放置其它任何内容,只能放置 swiper-item 组件,如果放置了其它内容,内容是不会进行展示的;
  • swiper-item:只可放置在 swiper 组件中,宽高自动设置为 100%,也就是占满 swiper 这个容器的宽和高,代表 swiper 中的每一项,也就是每一张轮播图;

下面打开微信开发者工具,实现轮播图最外层的结构:

  • 切换到首页目录,打开 index.wxml 文件,在轮播图区域中实现轮播图的结构,在最外层写一个 swiper,swiper 是轮播图最外层的盒子,注意在 swiper 内部只能设置 swiper-item,在 swiper-item 中编写内容才能在页面上正常显示编写的内容;我们需要三张轮播图,所以需要三个 swiper-item,其代码如下:

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

    通过上面的代码就已经把轮播图的结构写好了,我们可以到模拟器中滑动界面观察轮播图的效果:

    在这里插入图片描述

  • 由于我们还没有编写 css 样式,所以目前轮播图的效果还不是很明显,下面我们来添加一些样式,我们打开 index.scss 文件,添加对应的样式代码如下:

    // 轮播图区域样式
    .swiper {swiper {height: 360rpx;background-color: skyblue;swiper-item{// & 在 Sass 中代表的是父选择器,引用的意思// swiper-item:first-child 表示取父选择器的第一个 swiper-item// swiper-item:last-child 表示取父选择器的最后一个 swiper-item&:first-child{background-color: lightsalmon;}&:last-child{background-color: lightseagreen;}}}
    }
    

    这里为了区分不同的 swiper-item,使用伪类选择器来设置不同 swiper-item 的背景颜色,具体效果如下:

    在这里插入图片描述

  • 目前轮播图是不能够自动播放的,需要通过手动进行滑动,如果想轮播图自己播放,需要给 swiper 添加一个 autoplay 属性 ,这个属性接收一个布尔值作为参数,我们设置为 true,即可实现自动播放效果:

    在这里插入图片描述
    如果一个属性的值是布尔值,属性值可以不写,不写表示其值为 true,这样我们同样可以实现自动播放效果,如下:

在这里插入图片描述

  • 设置了自动切换之后,可以继续设置切换间隔时长,我们可以在 swiper 中使用 interval 属性设置切换间隔,这里我们设置为间隔 1s 进行切换,如下:

在这里插入图片描述

  • 设置自动切换、切换时长后,我们可以继续对轮播图添加其它属性,比如指示当前是第几场轮播图的选点功能,我们可以在 swiper 中添加一个 indicator-dots 属性,其属性值是布尔值,因此我们可以不填属性值,默认为 true,具体如下所示:

在这里插入图片描述

  • 如果感觉选点不符合样式需求,可以根据实际情况进行修改,比如可以使用 indicator-color 属性修改选点的颜色,如下:

在这里插入图片描述

  • 上面被激活的选点的颜色为黑色,如果我们觉得不好看,可以在 swiper 中使用 indicator-active-color 属性来调整激活后选点的颜色:

在这里插入图片描述

  • 目前轮播图到第三张图片之后,会往前切换到第一张,当我们希望轮播图往后切换到第一张的时候,这个时候我们可以加另外一个 circular 属性,其属性值为布尔值,所以我们可以不写属性值,默认为 true,如下所示:

在这里插入图片描述

上面只讲了 swiper 中的一部分属性功能,具体更详细的功能,可以前往官方文档进行学习;

参考视频:尚硅谷微信小程序开发教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/891446.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【文献精读笔记】Explainability for Large Language Models: A Survey (大语言模型的可解释性综述)(二)

****非斜体正文为原文献内容&#xff08;也包含笔者的补充&#xff09;&#xff0c;灰色块中是对文章细节的进一步详细解释&#xff01; 3.1.2 基于注意力的解释&#xff08;Attention-Based Explanation&#xff09; 注意力机制可以揭示输入数据中各个部分之间的关系&#…

【centos8 镜像修改】centos8 镜像修改阿里云

要将 CentOS 8 的镜像源修改为阿里云镜像&#xff0c;你需要编辑 /etc/yum.repos.d/ 目录下的 .repo 文件。以下是具体的步骤&#xff1a; 备份原始的 .repo 文件&#xff1a; 在编辑之前&#xff0c;建议备份原始的 .repo 文件&#xff0c;以便在出现问题时可以恢复。 sudo cp…

git reset --hard(重置到当前提交,所有未提交的更改都会被永久丢弃)

git reset --hard 是一个强大的命令&#xff0c;它会将你的工作目录、暂存区和当前分支的 HEAD 指针重置到指定的提交状态&#xff0c;所有未提交的更改都会被永久丢弃。因此&#xff0c;使用这个命令时需要非常小心。 基本用法 重置到当前提交&#xff08;丢弃所有未提交的更…

WebRTC的三大线程

WebRTC中的三个主要线程&#xff1a; signaling_thread&#xff0c;信号线程&#xff1a;用于与应用层交互worker_thread&#xff0c;工作线程&#xff08;最核心&#xff09;&#xff1a;负责内部逻辑处理network_thread&#xff0c;网络线程&#xff1a;负责网络数据包的收发…

25考研总结

11408确实难&#xff0c;25英一直接单科斩杀&#x1f62d; 对过去这一年多备考的经历进行复盘&#xff0c;以及考试期间出现的问题进行思考。 考408的人&#xff0c;政治英语都不能拖到最后&#xff0c;408会惩罚每一个偷懒的人&#xff01; 政治 之所以把政治写在最开始&am…

linux ext4文件系统

Ext4&#xff08;第四扩展文件系统&#xff0c;简称为 EXT4&#xff09;是Linux操作系统中广泛使用的日志文件系统。它是Ext3文件系统的后继者&#xff0c;提供了更多的特性和改进&#xff0c;以适应更大的存储设备和更复杂的文件系统操作。以下是Ext4文件系统的一些主要特点&a…

Singleton: WebRTC中ThreadManager中的单例模式

1. 什么是单例模式&#xff1a; 旨在确保一个类只有一个实例&#xff0c;并提供全局访问点。 应用场景&#xff1a;需要一个全局唯一的实例&#xff0c;避免资源浪费。 2. 单例模式的实现&#xff1a; Lazy Initialization&#xff08;懒汉式&#xff09;&#xff08;延迟初…

人工智能:变革时代的核心驱动力

求各位观众老爷看一看 先声明一下&#xff0c;该内容由于篇幅过长&#xff0c;可能会有一些地方存在一些小问题请大家谅解 观众老爷们&#xff0c;点个免费的赞和关注呗&#xff0c;您们的支持就是我最大的动力~ 人工智能&#xff1a;变革时代的核心驱动力 一、引言 在当今…

单元测试入门和mockup

Java 新手入门&#xff1a;Java单元测试利器&#xff0c;Mock详解_java mock-CSDN博客 这个是典型的before when assert三段式&#xff0c;学一下单测思路 这个没有动态代理&#xff0c;所以是直接class(对比下面) Jmockit使用笔记_增加代码覆盖率_覆盖try catch_使用new Mock…

数组方法 | vue修改数组

数组方法 修改原数组 push() 方法&#xff08;在数组结尾处&#xff09;向数组添加一个新的元素 var list["数学","历史"]; list.push("英语"); ["数学","历史","英语"]unshift() 方法&#xff08;在开头&…

智能化人才招聘系统是怎样的?

随着企业规模的扩大和业务范围的拓展&#xff0c;人才招聘成为了企业发展的关键环节。然而&#xff0c;市面上的人才招聘系统琳琅满目&#xff0c;质量参差不齐&#xff0c;许多企业发现&#xff0c;并非所有系统都能满足他们的需求&#xff0c;特别是智能化的需求。今天&#…

MongoDB 固定集合

MongoDB 固定集合 MongoDB中的固定集合&#xff08;Capped Collections&#xff09;是一种具有固定大小的集合&#xff0c;当集合中的数据达到其最大大小时&#xff0c;它会自动覆盖最早的文档。这种类型的集合在MongoDB中用于实现高效的、固定大小的循环缓冲区。本文将详细介…

SpringBoot 实现登录功能

目录 下发JWT 令牌依赖文件令牌生成令牌验证 统一验证技术过滤器 Filter快速使用实现登录校验 拦截器 Interceptor快速使用实现登录校验 下发JWT 令牌 全称: JSON Web Token 官网&#xff1a; https://jwt.io/ 以JSON 的数据格式安全传输信息&#xff0c;利用 base64 进行编…

PHP关键字Self、Static和parent的区别

简介 在使用PHP代码时&#xff0c;您可能经常会遇到parent::、static::和self::。但是当你第一次作为一个开发人员开始的时候&#xff0c;有时候你会很困惑&#xff0c;不知道它们是做什么的&#xff0c;以及它们之间的区别。 在我第一次作为开发人员开始工作后的很长一段时间…

Disruptor 有哪些典型的使用场景?

大家好&#xff0c;我是君哥。 Disruptor 是一款高性能的内存有界队列&#xff0c;它通过内存预分配、无锁并发、解决伪共享问题、使用 RingBuffer 取代阻塞队列等措施来大幅提升队列性能。 但开发者们往往对它的使用场景不太了解&#xff0c;到底应该在哪些场景使用呢&#…

[MySQL报错]关于发生net start mysql 服务无法启动,服务没有报告任何错误的五种解决方案。

咋直接进入主题。 我遇到的问题是net start mysql 服务无法启动&#xff0c;服务没有报告任何错误 其问题出在哪里呢 一.ini文件配置问题 在于你没有给你下载好的mysql文件中配置.ini文件。 该如何配置呢。那就是先在文件夹中创建一个文本文件&#xff0c;把下面内容复制进去…

HTML5新特性|01 音频视频

音频 1、Audio (音频) HTML5提供了播放音频文件的标准 2、control(控制器) control 属性供添加播放、暂停和音量控件 3、标签: <audio> 定义声音 <source> 规定多媒体资源,可以是多个<!DOCTYPE html> <html lang"en"> <head><…

goView二开低代码平台1.0

官网文档地址&#xff1a;GoView 说明文档 | 低代码数据可视化开发平台 简介&#xff1a;GoView 是一个拖拽式低代码数据可视化开发平台&#xff0c;通过拖拽创建数据大屏&#xff0c;使用Vue3框架&#xff0c;Ts语言和NaiveUI组件库创建的开源项目。安装步骤和地址文档里都有…

2024年中国新能源汽车用车发展怎么样 PaperGPT(一)

概述 在国家政策的强力扶持下&#xff0c;2024年中国新能源汽车市场迎来了新的发展机遇。本文将基于《中国新能源汽车用车报告&#xff08;2024年&#xff09;》的数据&#xff0c;对新能源汽车的市场发展和用车趋势概述。 新能源汽车市场发展 政策推动&#xff1a;国家和地…

数据表中列的完整性约束概述

文章目录 一、完整性约束概述二、设置表字段的主键约束三、设置表字段的外键约束四、设置表字段的非空约束五、设置表字段唯一约束六、设置表字段值自动增加七、设置表字段的默认值八、调整列的完整性约束 一、完整性约束概述 完整性约束条件是对字段进行限制&#xff0c;要求…