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

本文涉及的产品
容器镜像服务 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>
























目录
相关文章
|
2月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
65 1
微信小程序:轻松实现时间轴组件
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
492 1
|
2月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
66 0
微信小程序:自定义关注公众号组件样式
|
2月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
65 1
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
215 1
|
2月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
63 1
|
3月前
|
小程序 容器
微信小程序常用组件的简单使用 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
|
2月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
81 0
|
4月前
|
人工智能 小程序 编译器
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
|
17天前
|
Kubernetes Cloud Native Docker
云原生时代的容器化实践:Docker和Kubernetes入门
【10月更文挑战第37天】在数字化转型的浪潮中,云原生技术成为企业提升敏捷性和效率的关键。本篇文章将引导读者了解如何利用Docker进行容器化打包及部署,以及Kubernetes集群管理的基础操作,帮助初学者快速入门云原生的世界。通过实际案例分析,我们将深入探讨这些技术在现代IT架构中的应用与影响。
59 2