当前位置: 首页 > news >正文

微信小程序广告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.lryc.cn/news/230631.html

相关文章:

  • Network(一)计算机网络介绍
  • 【数据结构】堆(Heap):堆的实现、堆排序、TOP-K问题
  • 保护数字前沿:下一代防火墙如何塑造网络安全的未来
  • 深入理解Java中的String.join方法
  • 【MySQL系列】 第三章 · 函数
  • 微信小程序wxss定位/选择/查找元素的几种方式
  • Canvas—从入门到案例实现
  • 飞书开发学习笔记(六)-网页应用免登
  • 【ROS】Nav2源码下载、编译、运行
  • 微信小程序 30分钟倒计时功能
  • JAVA判断指定日期是否在指定的时间段内
  • 关于晋升与跳槽的一些思考
  • url找不到404的问题,url被拼接
  • 如何解决golang开发中遇到的报错:checksum mismatch downloaded
  • 4.以docker容器生成镜像推送到阿里云镜像仓库
  • CSS Form表单布局
  • c++ shared_mutex 读写锁使用详解
  • 淘宝商品详情接口,淘宝详情页接口,宝贝详情页接口,商品属性接口,商品信息查询,商品详细信息接口,h5详情,淘宝API接口演示案例
  • python爬取网站数据,作为后端数据
  • 【机器学习】K近邻算法:原理、实例应用(红酒分类预测)
  • 基于安卓android微信小程序的快递取件及上门服务系统
  • leetCode 92.反转链表 II + 图解
  • 【MongoDB】索引 – 通配符索引
  • python安装pip install报错Could not fetch URL https://pypi.org/simple/pip/...更换镜像源
  • C++ 算数运算符 学习资料
  • 问题 H: 棋盘游戏(二分图变式)
  • SQL 主从数据库实时备份
  • C/C++:在#define中使用参数
  • Hive 查询优化
  • 【Java 进阶篇】JQuery 案例:优雅的隔行换色