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

news/2024/12/30 1:39:18/

使用滑块视图容器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.ppmy.cn/news/1219591.html

相关文章

2023NOIP A层联测32 红楼 ~ Eastern Dream

题目大意 给定一个长度为 n n n的序列 a a a&#xff0c;有 m m m次操作&#xff0c;每次操作有两种类型&#xff1a; 1 x y k&#xff0c;对于所有满足 ( i − 1 ) m o d x ≤ y (i-1)\bmod x\leq y (i−1)modx≤y的 i i i&#xff0c;将 a i a_i ai​的值加上 k k k2 l r&a…

Go语言函数底层实现

基于堆栈模式的程序执行模型决定了函数是语言的一个核心元素。分析Go函数的内部实现&#xff0c;对理解整个程序的执行模型有很大好处。研究底层实现有两个方法一种是看语言编译器源码&#xff0c;分析其对函数的各个特性的处理逻辑&#xff0c;一种是反汇编&#xff0c;将可以…

2.4 Windows驱动开发:内核字符串拷贝与比较

在上一篇文章《内核字符串转换方法》中简单介绍了内核是如何使用字符串以及字符串之间的转换方法&#xff0c;本章将继续探索字符串的拷贝与比较&#xff0c;与应用层不同内核字符串拷贝与比较也需要使用内核专用的API函数&#xff0c;字符串的拷贝往往伴随有内核内存分配&…

交换机基础知识之安全配置

交换机在网络基础设施中扮演着重要角色&#xff0c;它促进了设备之间数据包的流动。正因此&#xff0c;采取适当的安全措施来保护网络免受未经授权的访问和潜在攻击至关重要。本文将全面解读交换机基础安全配置知识&#xff0c;并提供实践方案&#xff0c;以保证安全的网络环境…

MessageFormat:格式化字符串

需求 有一个字符串&#xff1a;"[张三]负责的位置[东厂房]发生[烟雾]报警&#xff0c;请[张三]及时前往处理。"。实际需要对[]内的内容进行替换。如果调用String.replace()&#xff0c;那需要执行多次。而使用MessageFormat.format&#xff0c;则可以替换一次即可获…

了解一下知识付费系统的开发流程和关键技术点

知识付费系统的开发既涉及到前端用户体验&#xff0c;又需要强大的后端支持和复杂的付费逻辑。在这篇文章中&#xff0c;我们将深入探讨知识付费系统的开发流程和关键技术点&#xff0c;并提供一些相关的技术代码示例。 1. 需求分析和规划&#xff1a; 在着手开发知识付费系…

k8s 对外服务之 Ingress( LB + ingress)

Ingress 理论 Ingress 简介 service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b;对集群外部&#xff0c;他类似负载均衡器&#xff0c;可…

Netty Review - 核心组件扫盲

文章目录 PreNetty Reactor 的工作架构图CodePOMServerClient Netty 重要组件taskQueue任务队列scheduleTaskQueue延时任务队列Future异步机制Bootstrap与ServerBootStrapgroup()channel()option()与childOption()ChannelPipelinebind()优雅地关闭EventLoopGroupChannleChannel…