微信小程序广告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)

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

相关推荐
澄江静如练_27 分钟前
微信小程序发体验版
微信小程序·小程序
流口水的兔子4 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记5 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~183399481216 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero8 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠9 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu19 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域1 天前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域1 天前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔1 天前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序