Hello everyone, last time I shared with you the swiper multi-image solution: juejin.cn/post/684490…
Today I will share with you a small skill about swiper, using swiper like TAB switching.
Believe when they read news on the app or browser, such as today’s headlines, there will be such a scenario, sliding around can switch different columns, the experience is very good, but small programs as if did not provide related components, if you want to achieve this effect will introduce you how to do things today is how to implement in the small program.
Let’s take a look at the effect first
The implementation principle is very simple, using small program swiper and then with scroll view can be achieved, but there are several points need to pay attention to:
1. Scroll view must be given a height, otherwise there will be a problem;
2. When switching, only the contents of the current Swiper-item are displayed. You can hide the contents of other swiper-items first. It could be 7 or 8 or more, and if every TAB is displayed then the pull-up page is going to be huge, so I recommend hiding the content that’s not displayed, remember that it’s a swiper-item, not a swiper-item, and then re-render it when you switch back, If you want to save where you scroll and you have to do some other things, I’m not going to go into that;
3. Applicable here is the whole page is TAB to switch, if it is somewhere in the page TAB to switch, consider the problem of height, length when loading the data according to the number of data to calculate the height, every load data to calculate height, switching to a different TAB is, this part of the more troublesome, because to calculate, but is not difficult, as long as
If the calculations are correct, there is no problem;
This is probably the basic implementation of the idea, you can expand according to this idea, add their own functions on the top, over!
Code snippet: github.com/HaveYuan/sw…