258资源分享网

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

 

 

 

一言不合，上效果

效果一 

 

效果二 
 

效果三 

效果四 

基本属性

属性名 类型 默认值 说明 最低版本 
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}

效果实践 效果一 <swiper autoplay="True" class="wx-swiper" indicator-dots="True" interval="2000"> <swiper-item> <image bindtap="tap_d5808da3" class="wx-image" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493698928333&di=99be91f1067ce820af8235607706813a&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F160412%2F9-160412091538.jpg" /> </swiper-item> <swiper-item> <image class="wx-image" mode="aspectFill" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493698928333&di=ae56672831512cc7d4cd1e26d31269aa&imgtype=0&src=http%3A%2F%2Fimg.tupianzj.com%2Fuploads%2Fallimg%2F160412%2F9-160412091540.jpg" /> </swiper-item> </swiper>

1

2

3

4

5

6

7

8

9

10

wxss样式如下：

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

1

2

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

效果二

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

<view class="swiper-tab"> <view style="padding-left:5px;" class="tab-list-left {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">待调研</view> <view class="tab-list-right {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已调研 </view> </view> <swiper current="{{currentTab}}" bindchange="bindChange" style="height:100%;"> <swiper-item> </swiper-item> <swiper-item> </swiper-item> </swiper>

1

2

3

4

5

6

7

8

9

10