【微信小程序】页面tab栏与页面内容联动
目录
前言
具体效果展示
一、实现思想
二、了解轮播图
三、实现效果
前言
上一篇文章介绍了如何实现页面tab栏的基础效果（文章链接：http://t.csdn.cn/lyvYs），最终效果还是要与页面内容联动，具体要求是滑动页面，tab栏跟着滑动，点击tab栏页面内容跟着滑动
大家也可以关注我的小程序专栏，学习学习------>微信小程序专栏
具体效果展示
一、实现思想
如何实现联动呢？不妨我们可以将整个页面考虑成一个轮播图，tab栏就如同轮播图的那小点点，可以控制网那个页面点击，有了思路就非常的好实现了，这时候就需要阅读官网，了解那个属性可以跟轮播图绑定，从而实现点击滚动，滑动也可以使tab栏随之滚动
二、了解轮播图
我们直接去uni-app官网找到轮播图
第一我们先了解一下轮播图的内置属性current，简单解释一下，currennt是当前页面的索引，通过tab栏最开始绑定的索引，从而实现点击之后就能切换到指定内容页面，tab栏的索引，就能控制轮播所展现的页面
第二我们了解一下@change，@change会返回一个current,跟索引一样，只要实现这个与tab栏的索引绑定上，不就可以实现滑动页面内容，tab栏内容也会随之跳转的效果
第三如何生成轮播图代码呢？只要在编辑器中uswiper,就可以生成轮播图代码，如下
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<view class="swiper-item"></view>
</swiper-item>
<swiper-item>
<view class="swiper-item"></view>
</swiper-item>
</swiper>三、实现效果
第一生成轮播图，直接输入uswiper，获得轮播图代码段，其中还有许多不要的属性比如:indicator-dots="true" :autoplay="true"，一个是轮播图的小点点，一个是控制是否自动滚动，我们都使用不上，要么删除或者将true换成false即可，这里的轮播图是比较小的
我们要讲整个轮播图要与可视高度一样，这里就需要在nLoad生命周期中获得系统高度，在减去tab栏和搜索框的高度就是可视高度，在动态绑定到轮播图上即可:style="'height:'+scrollH+'px'" scrollH是自己定义的
onLoad(e) {
uni.getSystemInfo({ //获取系统信息
success: (res) => {
// #ifdef MP
this.scrollH = res.windowHeight - uni.upx2px(225)
//#endif
}
)
} 
开始绑定current,值接在轮播图中直接使用current动态绑定tab栏的索引，就可以直接实现效果了
:current="currentIndex"，不清楚的还需要去上一篇文章了解一下tab栏的索引（文章链接：http://t.csdn.cn/xcZDA）
接下来在轮播图绑定@change事件，在方法中得到返回的current，不过我们需要调用tab栏自动滚动事件的scrollinto，从而实现，滚动tab栏也随之滚动，同样不了解tab栏如何自动跟随滚动的，需要去上一篇文章了解 （文章链接：http://t.csdn.cn/xcZDA）
结束语：
本次的分享到此结束啦！！！
如果遇到什么问题，直接私信我就行
