微信小程序中轮播的使用和绑定事件

news/2024/10/15 20:25:06/

轮播组件

轮播组件可以让内容在水平方向上进行轮播展示,非常适合于展示图片、广告等内容。在小程序>微信小程序中,轮播组件是通过 和 组合来实现的。

组件
组件是轮播容器,用于包裹多个轮播项。

属性:
indicator-dots:是否显示指示点,默认为 false。
autoplay:是否自动切换,默认为 false。
interval:自动切换时间间隔,单位为毫秒,默认为 5000。
circular:是否采用衔接滑动,默认为 false。
indicator-color:指示点颜色。
indicator-active-color:当前选中的指示点颜色。
组件
组件是轮播项,放置在 组件中,每个 组件代表一张轮播内容。

示例:

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff"><swiper-item><image src="/images/slide1.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="/images/slide2.jpg" mode="aspectFill"></image></swiper-item><swiper-item><image src="/images/slide3.jpg" mode="aspectFill"></image></swiper-item>
</swiper>

事件绑定

1.事件绑定方式
小程序>微信小程序提供了两种事件绑定方式:bind 和 catch。

bind:绑定的事件将冒泡,可以阻止事件向上冒泡。
catch:绑定的事件不会冒泡,可以阻止事件向上冒泡。
2. 事件类型
小程序>微信小程序支持的事件类型包括但不限于:

点击事件:bindtap、catchtap
长按事件:bindlongpress、catchlongpress
触摸事件:bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancel、catchtouchstart、catchtouchmove、catchtouchend、catchtouchcancel
表单相关事件:bindinput、bindchange、bindsubmit、bindreset
动画相关事件:bindanimationstart、bindanimationiteration、bindanimationend
3. 事件对象
在事件处理函数中,可以通过 event 对象获取触发事件的相关信息,例如触发事件的组件、触摸点的坐标等。

常用的 event 对象属性包括:

currentTarget:触发事件的组件
target:当前组件
detail:额外信息,例如触摸事件的坐标等


http://www.ppmy.cn/news/1462515.html

相关文章

STM32-串口通信波特率计算以及寄存器的配置详解

您好&#xff0c;我们一些喜欢嵌入式的朋友一起建立的一个技术交流平台&#xff0c;本着大家一起互相学习的心态而建立&#xff0c;不太成熟&#xff0c;希望志同道合的朋友一起来&#xff0c;抱歉打扰您了QQ群372991598 串口通信基本原理 处理器与外部设备通信的两种方式 并行…

牛客周赛 Round 42

小红叕战小紫 #include "bits/stdc.h" using namespace std;#define int long long #define endl \n #define IOS ios::sync_with_stdio(0),cin.tie(0); #define all(x) x.begin(),x.end() #define pi pair<int,int> #define vi vector<int> #define …

芯片半导体研发公司的数据防泄漏解决方案

在当今信息化时代&#xff0c;半导体研发公司的数据防泄密工作显得尤为重要。半导体行业涉及大量的核心技术、研发文档和客户信息&#xff0c;一旦数据泄露&#xff0c;将给企业带来无法估量的损失。因此&#xff0c;建立一套有效的数据防泄密解决方案成为半导体研发公司的当务…

Behind the Code:Polkadot 如何重塑 Web3 未来

2024 年 5 月 17 日 Polkadot 生态 Behind the Code 第二季第一集 《创造 Web3 的未来》正式上线。第一集深入探讨了 Polkadot 和 Web3 技术在解决数字身份、数据所有权和去中心化治理方面的巨大潜力。 &#x1f50d; 查看完整视频&#xff1a; https://youtu.be/_gP-M5nUidc?…

ubuntu18 安装sudo

ubuntu18 安装sudo 在Ubuntu 18.04上安装sudo通常是不必要的&#xff0c;因为sudo是Ubuntu及其衍生版本的基本包之一&#xff0c;默认情况下就已经安装。如果出于某种原因&#xff0c;sudo没有预装或者你需要升级到最新版本&#xff0c;你可以通过以下命令安装或更新它&#x…

鸿蒙应用开发之OpenGL应用和X组件6

前面已经分析怎么样注册X组件的回调函数,然后这些回调函数就可以在X组件合适的时机进行回调,就可以让C++的代码在合适的时间做合适的事情。从前也知道从GetRender函数会创建一个渲染对象,以便在后面进行OpenGL绘制。 现在就来分析一下GetRender函数,它的代码如下: Plugi…

使用MPLS解决BGP的路由黑洞(详解)

我们知道在MPLS中数据的转发不再依靠路由表而是靠标签&#xff08;注意&#xff1a;标签是在路由的基础上形成的&#xff09;。所以在BGP中&#xff0c;我们依靠的就是这个特性来解决BGP的路由黑洞。 BGP路由黑洞的解释&#xff1a;BGP的路由黑洞其实就是路由层面可达&#xff…

第N4周:中文文本分类——Pytorch实现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 数据集&#xff1a;train 一.加载数据 import torch import torch.nn as nn import torchvision from torchvision import transforms,d…