小程序模板网

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

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

其中currentTab控制选择第几个,0为第一个,1为第二个;swiper-item中为具体布局,可以使用wx:for渲染。  wxss代码如下:

.swiper-tab {
  text-align: center;
  background-color: #F7F7F7;
  line-height:35px;
}
.tab-list-left {
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  border: 1px solid #7cba23;
  line-height: 60rpx;
  color: #7cba23;
}
.tab-list-right {
  line-height: 60rpx;
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  border: 1px solid #7cba23;
  color: #7cba23;
}
.on {
  color: #fff;
  background-color: #7cba23;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

js:

Page({
    data: {
       currentTab: 0,
    },
    swichNav: function (e) {
        if (this.data.currentTab === e.target.dataset.current) {
            return false;
        } else {
            this.setData({
                currentTab: e.target.dataset.current
            })
        }
    },
     bindChange: function (e) {
        this.setData({ currentTab: e.detail.current });
    }
....
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

效果三

区别只是上面的view

<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">全部</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">通知</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">调研</view>
  <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">讲座</view>
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

wxss如下:

.swiper-tab {
  width: 100%;
  border-bottom: 2rpx solid gainsboro;
  text-align: center;
  line-height:80rpx;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #777;
}
.on {
  color: #7cba23;
  border-bottom: 5rpx solid #7cba23;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

效果四

在效果二上加了个圆角  wxss代码如下:

.tab-list-left {
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  border: 1px solid #7cba23;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  line-height: 60rpx;
  color: #7cba23;
}

.tab-list-right {
  line-height: 60rpx;
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  border: 1px solid #7cba23;
  border-top-right-radius: 50rpx;
  border-bottom-right-radius: 50rpx;
  color: #7cba23;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

经过上述四个效果,微信小程序的swiper基本没什么难度了。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18148.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询