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

简介: 讲述小程序之组件视图容器之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>
























目录
相关文章
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
633 1
微信小程序:轻松实现时间轴组件
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
288 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
2311 1
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
747 0
微信小程序:自定义关注公众号组件样式
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
1387 1
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
940 1
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
347 2
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
293 0
|
4月前
|
Kubernetes Docker Python
Docker 与 Kubernetes 容器化部署核心技术及企业级应用实践全方案解析
本文详解Docker与Kubernetes容器化技术,涵盖概念原理、环境搭建、镜像构建、应用部署及监控扩展,助你掌握企业级容器化方案,提升应用开发与运维效率。
866 108