知识分享
分享创造价值 合作实现共赢

知识分享

当前位置: 首页 > 知识分享

微信小程序swiper滑动页面实践-类似于安卓ViewPa

发布时间:2019-12-16 21:26:06作者:admin点击:

作者:overShao,来自原文地址
一言不合,上效果

效果一

效果二

效果三

效果四

基本属性

属性名 类型 默认值 说明 最低版本
indicator-dots Boolean false 是否显示面板指示点
indicator-color Color rgba(0, 0, 0, .3) 指示点颜色 1.1.0
indicator-active-color Color #000000 当前选中的指示点颜色 1.1.0
autoplay Boolean false 是否自动切换
current Number 0 当前所在页面的 index
interval Number 5000 自动切换时间间隔
duration Number 500 滑动动画时长
circular Boolean false 是否采用衔接滑动
bindchange EventHandle current 改变时会触发 change 事件,event.detail = {current: current}

效果实践

效果一
                  />                     />      

wxss样式如下:

.wx-swiper{height: 750rpx; }.wx-image{width: 100%; height: 100%; }

其中indicator-dots=”True”表示有指示点;interval=”2000”表示自动切换时间间隔。

效果二

底部是一个view来展示当前显示的item,下面是swiper。