讲述小程序之组件视图容器之swiper(轮播)

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 讲述小程序之组件视图容器之swiper(轮播)

swiper(轮播)

image.png

当然这里有一些常用的属性例如:

·indicator-dots        解释:是否显示面板指示点

·autoplay                解释:是否自动切换

·interval                  解释:自动切换时间间隔

·circular                 解释:是否采用衔接滑动

·duration(可不设置,默认值为500ms)                解释:滑动动画时长

一般在真正开发的时候轮播的效果会把上面的几个经常用的属性结合到一起用,下面我会把这几个常用的属性写到一起,来解释:

1.带有circular属性的演示

wxml:

<swiperindicator-dots="true"autoplay="true"interval="1000"circular="true"duration="600"><swiper-item><viewclass="lqj1"></view></swiper-item><swiper-item><viewclass="lqj2"></view></swiper-item><swiper-item><viewclass="lqj3"></view></swiper-item></swiper>

wxss:

.lqj1{
background-color: red;
width: 100%;
height: 600rpx;
}
.lqj2{
background-color: blue;
width: 100%;
height: 600rpx;
}
.lqj3{
background-color: chartreuse;
width: 100%;
height: 600rpx;
}

效果展示:

19.gif

2.不带circular属性的演示

wxml:

<swiperindicator-dots="true"autoplay="true"interval="1000"duration="600"><swiper-item><viewclass="lqj1"></view></swiper-item><swiper-item><viewclass="lqj2"></view></swiper-item><swiper-item><viewclass="lqj3"></view></swiper-item></swiper>

wxss:

.lqj1{
background-color: red;
width: 100%;
height: 600rpx;
}
.lqj2{
background-color: blue;
width: 100%;
height: 600rpx;
}
.lqj3{
background-color: chartreuse;
width: 100%;
height: 600rpx;
}

效果显示:

20.gif

由以上两个演示我们可以看出什么不同?

答案:1.的演示结果在显示到最后一个蓝色轮播块的时候后快速往前轮播到第一张红色轮播块,然后再一次的重复轮播

          2.的演示结果在显示到最后一个蓝色轮播块的时候,"很丝滑"的进入另一轮重复轮播

这也是·circular ——是否采用衔接滑动起到的效果!

注意到wxml里面的结构了吗?

要想实现一个轮播的效果,我们采用的组件之间嵌套的方式:

<swiper><swiper-item>要显示的内容(图片或其他)</swiper-item></swiper>
























目录
相关文章
|
1月前
|
缓存 开发者 Docker
Dockerfile是Docker容器化过程中的核心组件,它允许开发者以一种可重复、可移植的方式自动化地构建Docker镜像
【8月更文挑战第19天】Dockerfile是构建Docker镜像的脚本文件,含一系列指令定义镜像构建步骤。每条大写指令后跟至少一个参数,按序执行,每执行一条指令即生成新的镜像层。常用指令包括:FROM指定基础镜像;RUN执行构建命令;EXPOSE开放端口;CMD指定容器启动行为等。优化策略涉及减少镜像层数、选择轻量基础镜像、利用缓存及清理冗余文件。示例:基于Python应用的Dockerfile包括设置工作目录、复制文件、安装依赖等步骤。掌握Dockerfile有助于高效自动化构建镜像,加速应用部署。
24 1
|
20天前
|
前端开发 JavaScript 数据处理
React 中展示组件和容器组件
【8月更文挑战第31天】
20 0
|
28天前
|
域名解析 Kubernetes 负载均衡
在K8S中,外部访问容器服务,比如说提供了一个域名,链路怎么走?数据经过哪些组件?
在K8S中,外部访问容器服务,比如说提供了一个域名,链路怎么走?数据经过哪些组件?
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
90 2
|
2月前
|
Java 数据安全/隐私保护 容器
Java详解:GUI容器组件 | 功能组件
Java详解:GUI容器组件 | 功能组件
|
2月前
|
Java 容器
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
Java详解:GUI图形用户界面设计—容器组件及面板布局方式
|
3月前
|
前端开发 程序员 UED
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
全面解析layui:掌握基础知识与实用技能(1. 核心组件与模块 2. 布局与容器 3. 弹出层与提示框;1. 数据表格与数据表单 2. 表单验证与提交 3. 图片轮播与导航菜单)
58 0
|
6天前
|
弹性计算 运维 持续交付
探索Docker容器化技术及其在生产环境中的应用
探索Docker容器化技术及其在生产环境中的应用
36 5
|
18天前
|
NoSQL 关系型数据库 Redis
mall在linux环境下的部署(基于Docker容器),Docker安装mysql、redis、nginx、rabbitmq、elasticsearch、logstash、kibana、mongo
mall在linux环境下的部署(基于Docker容器),docker安装mysql、redis、nginx、rabbitmq、elasticsearch、logstash、kibana、mongodb、minio详细教程,拉取镜像、运行容器
mall在linux环境下的部署(基于Docker容器),Docker安装mysql、redis、nginx、rabbitmq、elasticsearch、logstash、kibana、mongo
|
18天前
|
应用服务中间件 nginx Docker
Docker同一台宿主机容器通信-通过容器名称互联
本文详细介绍了如何通过容器名称实现同一宿主机上容器间的互联,并提供了实战案例。首先,文章解释了容器间通过自定义名称访问的原理,随后演示了创建并连接Tomcat与Nginx容器的具体步骤。此外,还讨论了配置中可能出现的问题及解决方案,包括避免硬编码IP地址和使用自定义容器别名来增强系统的灵活性与可维护性。通过这些实践,展示了如何高效地配置容器间通信,确保服务稳定可靠。
23 1
Docker同一台宿主机容器通信-通过容器名称互联