有没有人能指点一下怎么在小程序里配置轮播图呀?

有没有人能指点一下怎么在小程序里配置轮播图呀?,第1张

效果展示

通过使用轮播图组件,同时配置触发器,实现轮播图效果。

创建数据表

注意:在数据中心你可以创建属于自己应用程序的数据表格,数据表格类型分为用户表,商品表、订单表和自定义表。

点击数据中心

创建数据表

数据表的字段包含:图片

创建事件

注意:事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。

点击事件中心

创建查询轮播图事件

触发器配置

注意:在检查器面板中的触发器设置面板创建触发器,可以对组件进行交互逻辑设置,或配合事件来进行动态数据 *** 作。

选中轮播图组件

点击检查面板中的触发器

创建触发器

绑定数据

注意:绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中轮播图的列表条目

点击检查面板中的数据绑定与设置

绑定数据

这样就可以实现轮播图效果了。

本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。

容器组件:内部能嵌套任何标签。常用的视图容器有: view , scroll-view , swiper

<view/> 是一个块级容器组件,任何一种复杂的布局都可以嵌套在 <view/> 组件内,并在 *.wxss 中设置相关样式。

<view/> 除了上述组件共有的属性外,还包含一组关于点击行为的属性。

在布局中,需要容器具有可滑动的功能,且能监听滚动、触顶、触底等事件,就需要 <scroll-view/> 组件, <scroll-view/> 在 <view/> 组件上添加滚动相关的属性,通过这些属性,可以响应滚动相关事件。

注意:

<textarea/>, <video/>, <map/>, <canvas/> 不能嵌套在 <scroll-view/>中使用

利用 swiper 组件,可以实现轮播图,滑动页面,预览图片等,一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成,不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/>标签,放置其它的标签会被删除,其中, <swiper-item/> 中能放置任何标签,高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/> 的属性如下:


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/10968624.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-12
下一篇2023-05-12

发表评论

登录后才能评论

评论列表(0条)

    保存