小程序图片轮播功能,一招教你轻松搞定

2024-06-04
来源:网络整理

我会一步步教你,你一定可以做到,小程序序列图图片轮播功能今天是小程序的一个小功能,我敢打赌你肯定见过,先来一张淘宝图:gif中图片的切换就是我今天要讲的小功能,在小程序中打造一个轮播图片,今天太忙就没有来得及录制demo图片(好吧其实我很懒。。。)我们来看看这个程序是怎么做的吧~ 1.组件微信小程序提供了一个原生的轮播控件,在微信的文档中叫做“ view ”,只需要简单的配置就可以实现轮播的效果,非常方便。 在微信开发文档中我们可以看到这几个属性: 但是在开发过程中我发现还有一种属性,它的值接受一个变量,默认值为。当不设置任何属性,或者=””时,指示点在组件最下方,图片轮播是从左到右,效果如下: 当设置=”true”时,指示点在组件右侧,图片轮播会变成从下到上,好任性啊~ 需要注意的是:它是一个容器类视图,但是里面只能放组件,如果放其他节点会自动删除。 2.-item -item只能放在组件里面,宽高自动设置为100%,代表一个轮播中的页面,一般会循环加载到页面中,代码如下: 3.Item点击事件 我们在-item上绑定事件,并通过data自定义标签绑定数据。 然后通过in来获取。注意:代码中的data-id和data-name是自定义标签,然后在绑定事件中通过id和name来获取即可。最后注意:在绑定中可以通过获取对应的数据。例如:e...id对应wxml中的data-id当然还有一种方法,不需要绑定事件,通过在每个-item外面包一个a标签,就可以以超链接的形式跳转到页面,这样也可以完成。以上就是今天的图片轮播功能~动态页面当然比静态页面热闹多了,不想让你的小程序呆板的话,那就做个轮播吧~!ND不关注小程序员,还好意思说自己帅吗?本文作者:小程序员

分享