微信小程序广告banner、滚动屏怎么做?

使用滑块视图容器swiper和swiper-item可以制作滚动屏,代码如下:

wxml:

<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="white" autoplay interval="3000"><swiper-item><image src=""fakepath://展厅绘制.jpg"/></swiper-item><swiper-item><image src=""fakepath://展会名片.jpg"/></swiper-item><swiper-item><image src=""fakepath://签到.jpg" /></swiper-item><swiper-item><image src="fakepath://抽奖.jpg" /></swiper-item><swiper-item><image src="fakepath://礼品领取.jpg"/></swiper-item>
</swiper>

wxss:

swiper image{width: 100%;height: 100%;
}

效果如下:

其中,swiper常用参数如下,其中只可放置swiper-item组件,否则会导致未定义的行为。:

属性类型默认值必填说明
indicator-dotsbooleanFALSE是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanFALSE是否自动切换
currentnumber0当前所在滑块的 index
intervalnumber5000自动切换时间间隔
durationnumber500滑动动画时长

 swiper使用细节可见官方文档:

视图容器 / swiper (qq.com)

微信小程序教程,欢迎关注我!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/176261.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Azure 架构师学习笔记】-Azure Storage Account(6)- File Layer

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Storage Account】系列。 接上文 【Azure 架构师学习笔记】-Azure Storage Account&#xff08;5&#xff09;- Data Lake layers 前言 上一文介绍了存储帐户的概述&#xff0c;还有container的一些配置&#xff0c;在…

MYSQL5.7和MYSQL8配置主从

1、创建专门主从的账号 #登录 mysql -u root -p #创建用户 我这里用户名为test5&#xff0c;注意这里的ip是从库服务器的ip CREATE USER test5192.168.1.20 IDENTIFIED WITH mysql_native_password BY xxxxx; #给主从复制账号授权 grant replication slave on *.* to test5192…

2个器件,做1个恒流源

在项目中经常要用到恒流源&#xff0c;查找资料可以使用电压源芯片LM317构造一个电流源芯片。本文将电压源加上一个电阻改为电流源&#xff0c;这种设计思路可以扩展到其他类型的电源芯片上&#xff0c;如开关电源及其他类型的线性电源&#xff0c;关键点在于基准电压VREF的使用…

Selenium+JQuery定位方法及应用

SeleniumJQuery定位方法及应用 1 JQuery定位说明1.1 JQuery定位方法1.2 JQuery最常用的三个操作1.3 JQuery一个示例1.3.1 用户名输入框1.3.2 密码输入框1.3.3 登陆按钮1.3.4 完整代码 2 JQuery选择器2.1 常用选择器列表2.2 思考 1、关于Selenium提供了很多元素定位方法&#xf…

进亦忧,退亦忧,Github Copilot 集成进入 Visual Studio 带来的思考

开篇想到《岳阳楼记》的结尾&#xff1a; 不以物喜&#xff0c;不以己悲&#xff1b;居庙堂之高则忧其民&#xff1b;处江湖之远则忧其君。是进亦忧&#xff0c;退亦忧。然则何时而乐耶&#xff1f;其必曰&#xff1a;“先天下之忧而忧&#xff0c;后天下之乐而乐”乎。未来30…

MHA实验和架构

什么是MHA&#xff1f; masterhight availabulity&#xff1a;基于主库的高可用环境下可以实现主从复制、故障切换 MHA的主从架构最少要一主两从 MHA的出现是为了解决MySQL的单点故障问题。一旦主库崩溃&#xff0c;MHA可以在0-30秒内自动完成故障切换。 MHA的数据流向和工…

聚观早报 |英伟达发布H200;夸克发布自研大模型

【聚观365】11月15日消息 英伟达发布H200 夸克发布自研大模型 iQOO 12系列开启销售 红魔9 Pro配置细节 禾赛科技第三季度营收4.5亿元 英伟达发布H200 全球市值最高的芯片制造商英伟达公司&#xff0c;正在升级其H100人工智能处理器&#xff0c;为这款产品增加更多功能&am…

4种互斥机制比较

4种互斥机制 关中断禁止任务切换信号量互斥信号量 关中断 关中断&#xff08;Disable Interrupts&#xff09;&#xff1a;通过禁用中断来实现互斥。在关中断期间&#xff0c;任何中断请求都会被忽略&#xff0c;从而确保了临界区的独占性。然而&#xff0c;这种方法会导致系统…

⑨【MySQL事务】事务开启、提交、回滚,事务特性ACID,脏读、幻读、不可重复读。

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ MySQL事务 ⑨【事务】1. 事务概述2. 操作事务3…

u系 kdump查看配置

V4 桌面&#xff1a; 如果能上外网配置网络源安装软件包&#xff1a; 会自动安装以下几个包&#xff08;不能连接外网直接安装一下几个包即可&#xff09;&#xff1a; 查看kdump配置&#xff1a; Kdump-config show 可以看到USE_KDUMP1 &#xff0c;生成的vmcore文件在/var…

Linux:给openlab搭建web网站

httpd服务器建立综合练习 建立网站需求&#xff1a; 1.基于域名 www.openlab.com 可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c; &#xff08;1&#xff09;、基于 www.openlab.com/stud…

技术贴 | SQL 执行 - 执行器优化

本期技术贴主要介绍查询执行引擎的优化。查询执行引擎负责将 SQL 优化器生成的执行计划进行解释&#xff0c;通过任务调度执行从存储引擎里面把数据读取出来&#xff0c;计算出结果集&#xff0c;然后返回给客户。 在关系型数据库发展的早期&#xff0c;受制于计算机 IO 能力的…