使用滑块视图容器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-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)
微信小程序教程,欢迎关注我!