Table of contents
Second, understand the carousel map
foreword
The previous article introduced how to achieve the basic effect of the page tab bar (article link: http://t.csdn.cn/lyvYs ), the final effect still needs to be linked with the page content, the specific requirement is to slide the page and the tab bar to slide , click on the tab bar page content to follow
You can also pay attention to my applet column, learn and learn ------> WeChat applet column
Specific effect display
1. Realize the idea
How to achieve linkage? Might as well we can consider the whole page as a carousel , the tab bar is like the little dots in the carousel, you can control the click on that page of the network, it is very easy to realize if you have an idea, then you need to read the official website to understand That property can be bound to the carousel, so that click scrolling can be achieved, and sliding can also make the tab bar scroll with it.
Second, understand the carousel map
Let's go directly to the uni-app official website to find the carousel map
First, let's take a look at the built-in property current of the carousel chart. To briefly explain, current is the index of the current page. Through the index bound at the beginning of the tab bar, it is possible to switch to the specified content page after clicking. index, you can control the pages displayed by the carousel
Second, let's take a look at @change, @change will return a current, just like the index, as long as this is bound to the index of the tab bar, it is not possible to slide the page content, and the content of the tab bar will jump accordingly.
Third, how to generate carousel code? As long as uswiper in the editor, you can generate the carousel code, as follows
<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>3. Realize the effect
First generate the carousel image, directly enter uswiper to get the carousel image code segment, there are many unnecessary attributes such as: indicator-dots="true" :autoplay="true", one is the small dots of the carousel image, One is to control whether to automatically scroll, we can't use it, either delete or replace true with false, the carousel here is relatively small
We want to say that the entire carousel should be the same as the visual height. Here, we need to obtain the system height in the nLoad life cycle. After subtracting the height of the tab bar and search box, it is the visual height, which is dynamically bound to the carousel. Just: style="'height:'+scrollH+'px'" scrollH is defined by itself
onLoad(e) {
uni.getSystemInfo({ //获取系统信息
success: (res) => {
// #ifdef MP
this.scrollH = res.windowHeight - uni.upx2px(225)
//#endif
}
)
} 
Start to bind current, the value is connected to the carousel chart and use current to dynamically bind the index of the tab bar, and the effect can be directly achieved.
:current="currentIndex", if you are not clear, you need to go to the previous article to learn about the index of the tab bar (article link: http://t.csdn.cn/xcZDA )
Next, bind the @change event in the carousel, and get the current returned in the method, but we need to call the scrollinto of the automatic scrolling event of the tab bar, so as to realize that the scrolling tab bar also scrolls, and we also do not understand how the tab bar automatically scrolls. If you follow the scroll, you need to go to the previous article to understand (article link: http://t.csdn.cn/xcZDA )
Closing remarks:
This sharing is over! ! !
If you have any problems, just PM me directly
