小程序动态卡片怎么实现？

时间：2023-07-01 14:05 阅读数：76 人阅读分类：知识百科

　　小程序动态卡片怎么实现?很多人在设计小程序的时候都会参考一些优秀的小程序，其中就有些小程序卡片是动态的，这样会更加吸引人们的关注，其实这就是小程序里创建轮番图。究竟这个怎么实现呢?下面小编给大家介绍一下。

　　一、小程序组件swiper

　　微信小程序提供了原生的轮播控件，在微信的文档中叫做“滑块视图容器”，只需要简单的配置就可以实现轮播的效果，非常的方便。在微信开发文档中我们可以看到这些属*：

　　然而，在小程序开发的过程中，有人发现还有一个属*vertical，其值接受Boolean型变量，默认值为false。当不设置vertical属*，或者vertical=”false”时，指示点在组件下部，图片轮播从左至右。

　　当设置vertical=”true”时，指示点在组件右部，图片轮播就会变成从下至上，就是这么任*。

　　我们需要注意的是：小程序swiper是一个容器类视图，但是其中只能放置组件，如放置其他节点，会被自动删除。

二、swiper-item

　　swiper-item的话就仅可放置在swiper组件中了，宽高自动设置为100%。代表轮播中一帧的页面，通常以循环的方式加载到页面中。

　　代码如下：

　　三、item单击事件

　　我们在swiper-item上绑定事件，通过data自定义标签绑定小程序数据。然后在function中通过event拿到。

　　注意：代码中的data-id和data-name均为自定义标签，然后可以在绑定事件的event中通过id和name拿到。

　　最后一个注意点：在绑定的function中可以通过event拿到对应的数据。比如：e.currentTarget.dataset.id对应wxml中的data-id。

　　当然，还有另一种办法。不需要绑定事件，通过在每一个的swiper-item外面包上一个a标签，以超链接的方式跳转小程序页面，也是可以完成的。

　　以上就是小编给大家收集的小程序动态卡片怎么实现的全部内容了，动态页面和静态页面相比肯定会生动很多，也更加能展示东西给用户看，所以大家赶快做个轮播。如果想知道更多精彩内容，可以来微小乔哦。