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

来源：互联网发布：mac怎样安装pc360游戏编辑：程序博客网时间：2024/06/05 11:31

一言不合，上效果

效果一
这里写图片描述

效果二
这里写图片描述

效果三
这里写图片描述

效果四
这里写图片描述

基本属性

属性名类型默认值说明最低版本
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基本没什么难度了。

阅读全文

0 0