这是我参与更文挑战的第1天，活动详情查看：更文挑战

前言

我们都知道自寻类的APP大致结构都差不多，那么我们项目中如果有这样一个需求类似的东西，该怎么在小程序中去使用呢。

找规律

这里呢，我以今日头条APP为例来分析如何去实现和头条APP类似的效果。大家可以仔细观察下面动图，找找我们可以使用那几个小程序的组件来实现它。

所需微信组件

从上面的动图中我们可以分析下，其实就可以选择几个微信小程序的组件来实现它：

swiper

首先很直观的就能想到这个组件，因为需要做鱼切换每个页面，那么微信小程序中能够左右切换的就是swiper这个组件了，大家都知道这个组件是用来制作轮播图的，当前了，还可以制作出很多意想不到的效果。刚好这里我们就是可以使用它来制作每个页面的轮播，这样页面就可以左右滑动切换了。

scroll-view

这个也能只管感受到，就是顶部的左右切换的导航，上面的动图中左右切换的时候导航没有自动切换，真机上是可以自动切换的，这里大家要注意下。滚动组件用来做可滚动的导航相信很多猿们也都用过，这也是基本操作。其实这里还有一个地方需要用到这个组件，就是swiper中每个页面的上下滑动，我们知道使用swiper就必须要设置一个高度，所以这个可以嵌入进swiper。

整理思路

第一步

顶部导航使用scroll-view来实现，这样就可以左右滑动，当滑到右边时可以动态更改距离让文字始终都能够显示出来。那么这里就有个问题了，顶部导航怎么办？？？？所以这里有两种方案，第一种方案是将导航定位到顶部，第二种方案是不固定就按正常文档流放在顶部。其实这两种方案没有太大的差别，哪一种都很好实现，这里我暂定采用第二种方案来实现。

第二步

在页面中使用swiper，让其充满整个屏幕。这样就达到了每个页面可以左右切换和滑动了。

第三步

在每一个swiper-item里面都嵌入一个scroll-view来实现上下滑动页面的内容。

实现

根据上面的思路一步步来实现我们的需求了。

顶部导航实现

顶部导航就是常规的scroll-view横向滚动的写法，相关代码如下：

// 结构
<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:'关注',catId:1},{label:'推荐',catId:2},{label:'热榜',catId:3},{label:'抗疫',catId:4},{label:'免费小说',catId:5},{label:'科技',catId:6},{label:'生活',catId:7},{label:'要闻',catId:8}],
  tabIndex:0
}
navChange(e){
  this.setData({
    tabIndex: e.currentTarget.dataset.index
  })
}
// 样式
.demo-scroll-nav{
  height: 80rpx;
}
.nav-wrapper{
  white-space: nowrap;
}
.nav-title{
  display: inline-block;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 40rpx;
}
.nav-title.active{
  color: #ff4400;
}

最终预览如下：

整体页面

整体页面用一个swiper，然后在swiper-item里面嵌入一个scroll-view设置好高度就ok了。代码如下：

// 结构
<swiper class="demo-swiper">
  <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>
// 样式
.demo-swiper{
  height: calc( 100vh - 80rpx );
}
.demo-page-scroll{
  height: 100%;
}

上面需要注意的是每个页面的数据可以自己判断单独设置，也可以使用组件的形式都是可以的。

这里大家可以自己在上面的代码中多添加一些内容就可以看到高度也是可以滑动的。整体效果如下：

上下联动

现在上面和下面都做好了，但是上面点击某一项项目不切换，下面滑动到某一项上面不切换。现在就来解决这个问题了。上下联动主要就是上面点击某一项切换下面，下面滑动切换上面。

导航切换带动页面切换

其实根据上面的机构分析只需要将swiper的当前所在的滑块index更改下就好了，如下；

<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>

效果如下：

页面滑动带动上面切换

和上面的原理一样，下面滑动的时候更改上面的当前index值就可以了，如下：

<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
  })
}