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

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

news 2026/1/2 6:59:39

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/1/2 0:27:26

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/12/28 0:07:12

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/1 2:26:16

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/10/16 16:03:09

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/12/31 17:35:56

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...

编程新知 2025/9/22 13:00:25