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

《微信小程序开发从入门到实战》学习九十三

news 2025/7/4 0:47:34

7.1 视图容器组件

7.1.3 swiper与swiper-item组件

swiper组件的显示效果如下图所示：

indicator-dots、indicator-color和indicator-active-color三个属性用于设置swiper组件下方的指示点。设置指示点的颜色时，可以使用HexColor，也可以使用rgba。rgba后面括号中的四个数字分别表示red、green、blue和alpha的值，前三个值即颜色的RGB数值，取值范围是0~255，对应十六进制的00~FF。Alpha的值表示的是颜色的透明度，它的取值范围是0~1的小数，从0到1表示透明度从完全透明逐渐变为不透明。

current属性用于设置swiper组件当前显示的滑块，其值对应swiper-item所处位置的序号（从0开始）。如果将current的值设定为一个固定的数值，则该值表示swiper显示的初始滑块的序号。如果将current的值设定为一个变量，则当变量的值改变时，swiper显示的滑块也会随之切换（之前还以为index是指位置，原来是滑块序号索引）

autoplay设置true,swiper自动切换滑块的内容，和自动切换的时间间隔interval组合使用。

duration设置滑块滑动的动画时长，对手动和自动切换都生效。希望该切换的动画类型，组合easing-function使用。

circle为true则最后一个滑块和第一个滑块衔接，滑块内容会循环重复。

vertical，滑块的滑动方向默认为横向，设置vertical为true,滑块的滑动方向会变为纵向。

previous-margin和next-margin可以设置滑块的前后边距。设置边距后可以显示出当前的swiper-item前后相领项的一部分内容。

bindchange和bindtransition和bindanimation三个属性可以用于绑定事件监听函数。

swiper组件实例代码如下：

<swiper indicator-dots>

<swiper-item><image src="/imgs/btn-img1.png" class="slide-image" width="355" height="150"></image></swiper-item>

<swiper-item><image src="/imgs/btn-img2.png" class="slide-image" width="355" height="150"></image></swiper-item>

</swiper>

相关文章：

《微信小程序开发从入门到实战》学习九十三

7.1 视图容器组件 7.1.3 swiper与swiper-item组件 swiper组件的显示效果如下图所示&#xff1a; indicator-dots、indicator-color和indicator-active-color三个属性用于设置swiper组件下方的指示点。设置指示点的颜色时&#xff0c;可以使用HexColor&#xff0c;也可以使用r…...

编程日记 2024/1/26 20:31:37

Java服务端使用freemarker+wkhtmltoimage生成Echart图片

目录 1.通过 freemarker 将ftl转成html 1.1 freemarker 手册: 1.2 添加freemarker maven依赖 1.3 添加 echart-test.ftl 模版文件 1.4 添加 FreemarkerTool 工具类 1.5 添加测试main方法 1.6 运行,生成echart-test-时间戳.html 文件 2. 通过wkhtmltoimage将html 转为p…...

编程日记 2024/1/26 20:30:36

一款颜值与实力并存的翻页时钟(免费）

FliTik是一款颜值与实力并存的翻页时钟&#xff0c;安卓端是完全免费的&#xff0c;无任何广告&#xff0c;极简风 &#xff0c;软件默认是12小时制&#xff0c;可以在设置中启用24小时制&#xff0c;并且还支持设置显示秒钟、日期、文案&#xff0c;滴答声和语音报时。 支持横…...

编程日记 2024/1/26 20:28:34

Objective-C方法的声明实现及调用

1.无参数的方法 1)声明 a.位置&#xff1a;在interface括弧的外面 b.语法&#xff1a; - (返回值类型)方法名称; interface Person : NSObject -(void) run; end 2)实现 a.位置&#xff1a;在implementation中实现 b.语法&#xff1a;加大括弧将方法实现的代码写在大括孤之中 …...

编程日记 2024/1/26 20:25:31

第十四届蓝桥杯国赛 C++ B 组 C 题——班级活动（AC）

目录 1. 班级活动1. 问题描述2. 输入格式3. 输出格式4. 样例输入5. 样例输出6. 样例说明7. 评测用例规模与约定8. 原题链接 2. 解题思路3. AC_Code 1. 班级活动 前置知识点&#xff1a;思维&#xff0c;分类讨论 1. 问题描述 小明的老师准备组织一次班级活动。班上一共有 n…...

编程日记 2024/1/26 20:21:25

GraphQL的力量：简化复杂数据查询

1. GraphQL GraphQL 是一种由 Facebook 开发并于 2015 年公开发布的数据查询和操作语言&#xff0c;也是运行在服务端的运行时&#xff08;runtime&#xff09;用于处理 API 查询的一种规范。不同于传统的 REST API&#xff0c;GraphQL 允许客户端明确指定它们需要哪些数据&am…...

编程日记 2024/1/26 20:20:24

python环境安装sklearn及报错解决

安装 如刚开始安装&#xff0c;还未遇到问题请直接从重新安装库开始看&#xff0c;如果遇到报错&#xff0c;从问题开始看 问题 python安装sklearn报错 &#xff0c;报错信息如下 File "<stdin>", line 1pip install scikit-learn^ SyntaxError: invalid s…...

编程日记 2024/1/26 20:19:23

log4j:WARN Please initialize the log4j system properly的解决办法

背景&#xff1a;很多次创建新项目log4j都出现以下2个警告&#xff1a; log4j:WARN No appenders could be found for logger (org.springframework.boot.ApplicationServletEnvironment).log4j:WARN Please initialize the log4j system properly 网上查询都是在说缺少以下jar…...

编程日记 2024/1/26 20:15:20

虹科分享丨汽车技术的未来：Netropy如何测试和确保汽车以太网的性能

来源&#xff1a;艾特保IT 虹科分享丨汽车技术的未来&#xff1a;Netropy如何测试和确保汽车以太网的性能 原文链接&#xff1a;https://mp.weixin.qq.com/s/G8wihrzqpJJOx5i0o63fkA 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; #汽车以太网 #车载网络 #Netropy …...

编程日记 2024/1/26 20:14:19

代码CE:reference to ‘XX‘ is ambiguous

代码CE:reference to ‘XX’ is ambiguous 今天提交代码的时候一直错误&#xff0c;CE&#xff0c;搞不明白明明在dev上成功&#xff0c;为什么提交失败。 现在懂了&#xff0c;因为定义的变量和C内部函数或变量重名了。修改之后即可AC。 int data[21][21]{0}; int maxsum[21…...

编程日记 2024/1/26 20:10:15

如果想将企业微信的组织架构同步到内部知识库咋搞？方法来也！

在现代企业的运营中&#xff0c;内部知识库不仅储存了公司的宝贵知识资产&#xff0c;还充当着员工信息共享和协作的核心平台。为了保障知识库的效能最大化&#xff0c;使其成为支持决策、创新和培训的强大工具&#xff0c;企业必须拥有一套周到的权限管理机制。对此&#xff0…...

编程日记 2024/1/26 20:07:12

【c语言】扫雷

前言&#xff1a; 扫雷是一款经典的单人益智游戏&#xff0c;它的目标是在一个方格矩阵中找出所有的地雷&#xff0c;而不触碰到任何一颗地雷。在计算机编程领域&#xff0c;扫雷也是一个非常受欢迎的项目&#xff0c;因为它涉及到许多重要的编程概念&#xff0c;如数组、循环…...

编程日记 2024/1/26 20:02:07

自然语言处理的崛起：从初步分析到深度理解

自然语言处理&#xff08;NLP&#xff09;是计算机科学、人工智能和语言学的交叉领域&#xff0c;旨在让计算机能够理解和生成人类语言。随着时间的推移&#xff0c;NLP 经历了一系列革命性的变化&#xff0c;从简单的规则和模式匹配到如今的深度学习模型&#xff0c;它们使计算…...

编程日记 2024/1/26 20:00:06

Git学习笔记：版本回滚

文章目录 回到过去&#xff1a;开启新时间线&#xff0c;时间分叉路口1. 回溯开发2. 临时恢复特性3. 实验性开发4. 分支维护和发布5. 调试历史问题类比推理&#xff1a; 方法&#xff1a;1. 临时查看旧版本2. 永久回滚到旧版本3. 创建新的分支指向旧版本 回到过去&#xff1a;开…...

编程日记 2024/1/26 19:59:05

OpenCV图像的基本操作

图像的基本操作&#xff08;Python&#xff09; 素材图 P1&#xff1a;die.jpg P2&#xff1a;cool.jpg V&#xff1a;rabbit.mp4&#xff0c; 下载地址 读取展示-图像 import cv2img_1 cv2.imread(./die.jpg) # default cv2.IMREAD_COLOR print("die.jpg shape(imre…...

编程日记 2024/1/26 19:55:00

小白水平理解面试经典题目LeetCode 594 Longest Harmonious Subsequence（最大和谐字符串）

594 最大和谐字符串 这道题属于字符串类型题目&#xff0c;解决的办法还是有很多的&#xff0c;暴力算法&#xff0c;二分法&#xff0c;双指针等等。 题目描述 和谐数组是指一个数组里元素的最大值和最小值之间的差别 正好是 1 。 现在&#xff0c;给你一个整数数组 nums …...

编程日记 2024/1/26 19:51:57

Vue-35、Vue中使用ref属性

1、ref属性 2、代码 <template><div id"app"> <!-- <img alt"Vue logo" src"./assets/logo.png">--><h1 v-text"msg" ref"title"></h1><button click"showDOM" ref&…...

编程日记 2024/1/26 19:49:55

网络通信(15)-C#TCP客户端掉线重连实例

本文上接前面的文章使用Socket在C#语言环境下完成TCP客户端的掉线重连实例。 掉线重连需要使用心跳包发送测试网络的状态，进而进入重连循环线程。 前面实例完成的功能： 客户端与服务器连接，实现实时刷新状态。 客户端接收服务器的数据。 客户端发送给服务器的数据。 客…...

编程日记 2024/1/26 19:48:54

React进阶 - 14（说一说”虚拟DOM“中的”Diff算法“）

本章内容 目录 一、了解 Diff 算法二、key 值的重要性三、为什么不建议使用 index 做 key 值 上一节我们初步了解了 React中的”虚拟 DOM“ &#xff0c;本节我们来说一说”虚拟DOM“中的”Diff算法“ 一、了解 Diff 算法 在上一篇中&#xff0c;我们有讲到&#xff1a;当 st…...

编程日记 2024/1/26 19:47:54

#GPU|LLM|AIGC#集成显卡与独立显卡|显卡在深度学习中的选择与LLM GPU推荐

区别 核心区别&#xff1a;显存&#xff0c;也被称作帧缓存。独立显卡拥有独立显存&#xff0c;而集成显卡通常是没有的&#xff0c;需要占用部分主内存来达到缓存的目的 集成显卡&#xff1a; 是集成在主板上的&#xff0c;与主处理器共享系统内存。 一般会在很多轻便薄型的…...

编程日记 2024/1/26 19:46:53

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/6/17 18:14:19

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/6/25 3:02:24

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/6/21 14:20:00

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/6/21 10:17:35

Bean 作用域有哪些？如何答出技术深度？

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

编程新知 2025/6/21 5:38:51

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/7/3 18:30:35

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

编程新知 2025/6/16 7:49:31

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2025/6/24 5:52:40

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

编程新知 2025/6/25 0:00:23

Java中HashMap底层原理深度解析：从数据结构到红黑树优化

一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一&#xff0c;是基于哈希表的Map接口非同步实现。它允许使用null键和null值&#xff08;但只能有一个null键&#xff09;&#xff0c;并且不保证映射顺序的恒久不变。与Hashtable相比&#xff0c;Hash…...

编程新知 2025/7/3 3:00:54