This is the first day of my participation in the More text Challenge. For details, see more text Challenge

preface

We all know that the general structure of the APP of the search class is similar, so if there is such a thing with similar requirements in our project, how to use it in the small program?

Looking for a regular

Here, I take Jinri Toutiao APP as an example to analyze how to achieve similar effects with Toutiao APP. Take a look at the following GIFs to see which widgets we can use to implement it.

Required wechat components

From the above GIF, we can analyze that in fact, we can select several components of wechat small programs to achieve it:

swiper

Swiper swiper swiper swiper swiper swiper swiper swiper swiper swiper swiper This is where we can use it to create a round of each page so that the page can be swiped left and right.

scroll-view

This can also just feel, is the top left and right to switch navigation, the above GIF left and right to switch when the navigation is not automatically switched, the real plane can automatically switch, here we should pay attention to. The scrollable component is used for scrollable navigation and I’m sure a lot of apes have used it, and that’s the basic operation. The other thing you need to use this component for is swiper swiper to swipe up and down on each page. We know that swiper requires a height, so this can be embedded in Swiper.

To compose

The first step

The top navigation is done using a Scrollview, which allows you to slide left and right and dynamically change the distance when you slide to the right so that the text is always displayed. So here’s the problem, what about the top navigation ？？？？ So there are two options, the first option is to navigate to the top, and the second option is to float at the top as normal documents. In fact, there is not much difference between these two schemes, which are very good to achieve, here I tentatively adopt the second scheme to achieve.

The second step

Use Swiper on the page and let it fill the entire screen. This is where each page can be toggled left and right and swiped.

The third step

Embedded within each swiper-item is a scrollview that allows you to scroll up and down the contents of the page.

implementation

According to the above ideas step by step to achieve our needs.

Top navigation implementation

The top navigation is a normal scroll-view. The code is as follows:

// Structure <scroll-view scroll-x="true" class="demo-scroll-nav"> <view class="nav-wrapper"> <text class="nav-title {{tabIndex  == index ? 'active':''}}" wx:for="{{navArr}}" wx:key="unique" data-index="{{index}}" bindtap="navChange">{{item.label}}</text> </view> </scroll-view> // js data: { NavArr: [{label: 'focus', catId: 1}, {label:' recommended 'catId, 2}, {label:' top ', catId, 3}, {label: 'resistance to disease, catId: 4}, {label:' free novel, catId: 5}, {labe L :' technology ',catId:6},{label:' life ',catId:7},{label:' important ',catId:8}], tabIndex:0} navChange(e){this.setdata ({tabIndex: 8}) E.c. with our fabrication: urrentTarget. Dataset. The index})} / / style. The demo - scroll - nav {height: 80 the RPX; } .nav-wrapper{ white-space: nowrap; } .nav-title{ display: inline-block; height: 80rpx; line-height: 80rpx; padding: 0 40rpx; } .nav-title.active{ color: #ff4400; }Copy the code

The final preview is as follows:

The whole page

Use a swiper for the whole page, then embed a scrollview inside the swiper-item and set the height. The code is as follows:

<swiper class="demo-swiper"> <swiper-item wx:for="{{navArr}}" wx:key="unique"> < scture-view scture-y ="true" Class ="demo-page-scroll"> <view>page text {{index+1}}</view> </scroll-view> </swiper-item> </swiper>  height: calc( 100vh - 80rpx ); } .demo-page-scroll{ height: 100%; }Copy the code

It is important to note that the data for each page can be set individually at its own discretion, or in the form of components.

You can add a little bit more to the code above and you can see that the height is also sliding. The overall effect is as follows:

Upper and lower linkage

So now we have the top and the bottom, but the top doesn’t switch when you click on an item, and the bottom doesn’t switch when you swipe on an item. Now is the time to solve this problem. Up and down linkage is mainly the above click on a certain item to switch below, below the slide switch above.

Navigation switching drives page switching

According to analysis of the above institutions actually just need to swiper the current of the slider of the index changes, under the following;

<swiper class="demo-swiper" current="{{tabIndex}}">
  <swiper-item wx:for="{{navArr}}" wx:key="unique">
    <scroll-view scroll-y="true" class="demo-page-scroll">
      <view>page text {{index+1}}</view>
    </scroll-view>
  </swiper-item>
</swiper>
Copy the code

The effect is as follows:

The page slide drives the top switch

As above, change the current index value when you slide below, as follows:

<swiper class="demo-swiper" current="{{tabIndex}}" bindchange="pageChange">
  <swiper-item wx:for="{{navArr}}" wx:key="unique">
    <scroll-view scroll-y="true" class="demo-page-scroll">
      <view>page text {{index+1}}</view>
    </scroll-view>
  </swiper-item>
</swiper>

pageChange(e){
  this.setData({
    tabIndex: e.detail.current
  })
}
Copy the code

The effect is as follows:

conclusion

At present is only a simple example, want to do better depends on everyone to decorate, I here is to throw a brick to attract jade. In fact, there is a problem not solved above, is the current navigation sliding to the epidemic, should automatically swipe to the left, anyway. I’ll leave it to you to figure it out.