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

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

wxml:

html 复制代码
<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:

css 复制代码
swiper image{
  width: 100%;
  height: 100%;
}

效果如下:

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

|------------------------|---------|-------------------|--------|---------------|
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| indicator-dots | boolean | FALSE | 否 | 是否显示面板指示点 |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 |
| autoplay | boolean | FALSE | 否 | 是否自动切换 |
| current | number | 0 | 否 | 当前所在滑块的 index |
| interval | number | 5000 | 否 | 自动切换时间间隔 |
| duration | number | 500 | 否 | 滑动动画时长 |

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

视图容器 / swiper (qq.com)

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

相关推荐
xuanjiong1 小时前
微信小程序,基于uni-app的轮播图制作,调用文件中图片
微信小程序·小程序·uni-app
天_真好9 小时前
小程序知识点总结1
小程序
gurenchang9 小时前
实现从一个微信小程序跳转到另一个微信小程序
微信小程序·小程序
编程毕设13 小时前
【含文档+PPT+源码】基于微信小程序的校园快递平台
微信小程序·小程序
mon_star°15 小时前
搭建基于火灾风险预测与防范的消防安全科普小程序
安全·微信小程序·小程序·微信公众平台
换日线°18 小时前
CSS常遇到自适应高度动画、带三角气泡阴影一行样式解决
css·微信小程序
yuanmenglxb200420 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
Ankie Wan20 小时前
notepad++技巧:查找和替换:扩展 or 正则表达式
python·正则表达式·notepad++
编程毕设21 小时前
【含文档+PPT+源码】基于微信小程序连锁药店商城
微信小程序·小程序
幽络源小助理21 小时前
微信小程序鲜花销售系统设计与实现
微信小程序·小程序