前言

在做Android开发的时候，ViewPager是开发者使用频率很高的一个控件，今天我们就用小程序来实现一个类似的demo，效果图如下：

下面就开始直接撸代码了。

需求分析

通过查看界面元素，发现主要由两部分组成：头部能点击的title和下面能滑动的内容。

头部TAB

这个比较简单：主要是根据你的业务要分为几块，则将屏幕宽度分成几个等宽的view即可。然后每个tab下面的指示器用view的下边框替代，只有该tab被选中时才显示。代码如下：

// wxml布局文件
<view class='page'><view class='item-parent'><view wx:for='{{titles}}' class='title-item' style='border-bottom: 5rpx {{current == index ? selectindicatorcolor : normalindicatorcolor}} solid' bindtap='taptab' data-index='{{index}}'>{{item}}</view></view>
</view>

// wxss文件
.page {display: flex;flex-direction: column;
}
.item-parent {display: flex;flex-direction: row;
}
.title-item {justify-content: center;text-align: center;width: 350rpx;height: 50rpx;display: flex;flex-direction: row;align-items: center;font-size: 26rpx;
}

// js文件
Page({data: {titles: ['首页', '热点', '推荐'],current: 0,//此属性暂时没有用到，后面会用到selectindicatorcolor: 'red',normalindicatorcolor: 'white'},taptab(e) {var index = e.currentTarget.dataset.indexthis.setData({current: index})},//此函数后面会用到bindChange(e) {this.setData({current: e.detail.current})}
})

上面代码很简单，就不赘述了，接下来看效果图：

滑动的内容部分

到这里我们已经实现了头部TAB的功能了，那么下面我们那个可滑动内容需要怎么实现了？其实官方已经给我们提供了一个组件swiper（swiper官方教程）可以用作视图滚动，只不过一般来说我们只是用来做轮播图。既然作为视图滚动容器，肯定可以滚动其他控件的。选好了我们需要的组件，接下来就是动手实现了，我们在原先的wxml中加入swiper组件：

// wxml布局文件
<view class='page'><view class='item-parent'><view wx:for='{{titles}}' class='title-item' style='border-bottom: 5rpx {{current == index ? selectindicatorcolor : normalindicatorcolor}} solid' bindtap='taptab' data-index='{{index}}'>{{item}}</view></view><swiper current='{{current}}' bindchange="bindChange"><swiper-item><text>首页</text></swiper-item><swiper-item><text>热点</text></swiper-item><swiper-item><text>推荐</text></swiper-item></swiper>
</view>

其他地方变动不大，这里通过current属性，已经绑定了swiper的change事件，结合前面js中给出的代码，从而实现了上下两部分的联动。接下来看效果图：

到这里，我们貌似完美实现了类似ViewPager效果了，真相真的是这样的么？细心的朋友可能发现，上面的图片中，我故意用鼠标在下面进行滑动，但是页面并没有跟着滚动，为什么会这样了？通过给swiper增加背景颜色发现，原来swiper的高度是固定的，不会随着里面组件的高度自适应变化，所以只有上面那部分会响应滚动事件，我们加上背景颜色瞧瞧。

这样就看的很清晰了，所以为了能使下面的内容充满屏幕，我们只能给swiper设置一个高度了，那么这个高度要设置多少合适了？从我们界面上看是我们整个可用窗体的高度减掉我们头部TAB的高度，然后我们在js中去计算这个高度。

// js文件
//data中增加一个属性
...
contentheight: 0
...
onLoad: function(res) {//减号前面是获取当前窗体的高度单位为px，55是头部tab的高度，单位是rpx，减号后面部分是将rpx转pxvar contentH = wx.getSystemInfoSync().windowHeight - 55 / 750 * wx.getSystemInfoSync().windowWidth;this.setData({contentheight: contentH})
}

wxml中设置swiper高度

// wxml文件增加style
...
<swiper current='{{current}}' bindchange="bindChange" style='background: gray;height:{{contentheight}}px'>
...

接下来，我们再看下效果：

这个时候我们可以看到，swiper已经充满了整个屏幕了，并且不管从哪个地方都能进行滑动。到了这里，那我们就可以做很多事情了，可以给每个tab加上各种不同的布局来实现不同的业务逻辑了。那么我们这里先来实现一个能滚动的列表试试，修改首页的item中的代码：

// wxml布局文件
//将原来首页swiper-item中的子元素修改如下：
...
<view class='page'><text wx:for='12314312312312312sdfsfsdfsdfsfdfdf'>首页{{item}}</text>
</view>
...

接下来，我们看下效果图：

我们看到，虽然布局竖向超过了屏幕范围，但是却无法上下滚动。为什么会有这样的现象了？我猜想大概是微信小程序的限制罢了。既然这样无法实现我们常用的上下滚动列表效果，那我们只能曲线救国了，在外层再套一个能竖向滚动的scroll-view，稍微坐下改动：

// wxml布局文件
//将原来首页swiper-item中的子元素修改如下：
...
<scroll-view style='height:100%' scroll-y><view class='page'><text wx:for='12314312312312312sdfsfsdfsdfsfdfdf'>首页{{item}}</text></view>
</scroll-view>
...

再看效果图：

哈哈，完美搞定。

最终版本

在实际应用中，我们每个页面可能有非常复杂的界面和业务逻辑，我们的业务代码和UI代码最好不要都写在一个wxml中，防止业务混乱。为了业务和UI解耦，我们每个swiper-item中的内容最好能单独成一个模块，然后我们再引用，所以我们通过封装组件来解耦UI和业务。这里以首页组件封装为例：

项目根目录建立component目录
在component目录下右键，选择新建Component子菜单项
自定义名字，然后就会生成跟pages中页面一样的目录

我们对index组件目录中的文件稍加修改，使其能展示一个类似新闻列表的页面。

// wxml布局文件
<view class='item' wx:for='{{data}}'><view class='title'>{{item}}</view><view class='bottom'><view>新华网</view><view class='comment'>2344评</view></view>
</view>

// wxss文件
.item {display: flex;flex-direction: column;border-bottom: 1rpx #ccc solid;justify-content: center;padding: 20rpx;
}
.title {font-size: 35rpx;
}
.bottom {display: flex;flex-direction: row;font-size: 20rpx;color: gray;margin-top: 10rpx;
}
.comment {margin-left: 30rpx;
}

// js文件,这里比较简单，只是在data中增加一个data属性
...data: {data: ['狗狗是人类最好的朋友', '90%长痘的人都不知道，药店里不起眼的东西，睡前抹一抹，祛痘很快', '保时捷Cayenne，即刻驾驭梦想','沙漠极限挑战：三台空调挑战70度极限高温，谁先宕机？','德牧带大的二哈，二哈现在离不开她了，一刻不见就想德牧','为什么说达到第四宇宙速度就可以逃出银河系？','许久没去草坪的边牧，来到公园，开心的像个孩子']},
...
})

其他两个页面组件跟这个类似，这里就不演示了。然后我们在需要使用的页面json文件中引用：

// json文件,引用组件，前面的名字可自定义，会在wxml中使用
{"usingComponents": {"index": "../../component/index/index","hot": "../../component/hot/hot","recommend": "../../component/recommend/recommend"}
}

// wxml中使用组件
...
<swiper current='{{current}}' bindchange="bindChange" style='height:{{contentheight}}px'><swiper-item><scroll-view style='height:100%' scroll-y><index />//引用首页组件，注意名字要和json中的定义的名字相同</scroll-view></swiper-item><swiper-item><scroll-view style='height:100%' scroll-y><hot />//引用首页组件</scroll-view></swiper-item><swiper-item><scroll-view style='height:100%' scroll-y><recommend />//引用首页组件</scroll-view></swiper-item>
</swiper>
...

到这里，我们就完全实现了我们文章开始所展示的效果了，基本做到了和Android中的ViewPager相同的效果。

尾巴

下一篇微信小程序自定义下拉刷新，我将给大家带来自定义下拉刷新功能。如果文章中有错误的地方，欢迎大家留言指正。如果你喜欢我的文章，也欢迎给我点赞，评论，谢谢！

微信小程序手把手教你实现类似Android中ViewPager控件效果相关推荐

微信小程序手把手教你实现带字母索引的城市选择列表
微信小程序手把手教你实现带字母索引的城市选择列表前言需求分析左边可滑动列表滑动列表UI实现 item点击事件右边带字母的索引条索引条从上到下分别是定位和26个大写字母索引条响应触摸和点击 ...
微信小程序开发教程之Array数组对象
最新消息,Hi小程序小编了解到,微信小程序开发教程之Array数组对象. 微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容. Array,又称作数组对象我们通 ...
在微信小程序上,帮助中心界面实现类似手风琴案例
在微信小程序上,帮助中心界面实现类似手风琴案例 wxml <view class="container"><block wx:for="{{arrdat ...
微信小程序私教预约管理系统+后台管理系统
<微信小程序私教预约管理系统+后台管理系统>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的私教预约管理系统和Java做的后台管理系统: 微 ...
企业微信获取用户信息响应40029(微信小程序与公众号出现类似问题应该是同样的原因)
企业微信获取用户信息响应40029 在对接企业微信的时候需要通过code去获取userId,但是会返回40029的error码,经过测试与验证原因是访问地址 https://open.weixin.q ...
web前端学习（三）：微信小程序基于H5规范，开发Android应用程序
前言: 微信小程序开发框架的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 整个小程序框架系统分为两部分,逻辑层,视图层,小程序提供了自己的视图层描述语言, WXM ...
微信小程序--在app.js 和其他页面中更改globalData的值
微信小程序--在app.js 和其他页面中更改globalData的值 app.js中修改其他页面 app.js中修改在app.js中,应当在小程序初始化完成以后再更改全局变量的值,即在onLau ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题。
微信小程序 #开发者工具无法在资源管理器中 #右键 #新建page 的问题. 初学者怎么解决呢,建议尝试在设置(setting)_通用设置 _中更改语言,一般有"系统语言". ...

微信小程序手把手教你实现类似Android中ViewPager控件效果