模拟今日头条顶部导航菜单

最近公司需要写自己的微信小程序，正好可以利用这个机会接触一下微信小程序，今天自己写了一个模仿今日头条的导航，算是对几个小的知识点的整合吧。

完成之后的效果图就是这样的，在首页页面里，点击上面的菜单栏，下面的内容会根据上面而变化，在下面的内容部分，因为内容多少不确定，设置成了可以滚动的。因此，为了实现上面的效果，我们需要用到view组件、swiper组件和scroll-view组件。

view组件

在小程序开发文档中，将view称为视图容器，通过设置view的fle-direction，可以实现容器内部的排列样式，当flex-direction:row时，容器内部元素横向排列，当flex-direction:column时，容器内部元素纵向排列。除了文档上给出的属性外，还有两个相关属性，

justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向），可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)；

align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向），可选属性 (‘flex-start’, ‘flex-end’, ‘center’）。下面是实现导航栏部分的代码：

index.wxml

<view class="top-tab">

　　<view class="top-tab-item {{currentTopItem==idx ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">

　　　　{{item}}

　　</view>

</view>

index.wxss

.top-tab{

　　100%;

　　height:36px;

　　border-top:1px solid #ddccdc;

　　color:#7b7b7b;

　　font-size:15px;

　　background-color:

#f7f7f7;

　　display: flex;

　　flex-direction:row;

　　justify-content: space-around;

　　align-items: center;

　　position:fixed;

　　top:0;

}

.top-tab .top-tab-item{

　　50px;

　　height:35px;

　　line-height: 35px;

　　text-align: center;

}

.top-tab-item.active {

　　border-bottom:2px solid red;

　　color: red;

}

index.js

data: {

　　topTabItems: ["社会", "视频", "图片", "段子", "经济"],

　　currentTopItem: "0",

},

switchTab: function (e) {

　　this.setData({

　　　　currentTopItem: e.currentTarget.dataset.idx

　　});

},

在上面的代码中，首先我们构件了一个存放导航条目的容器.top-tab，并进行相关设置display: flex; flex-direction:row; justify-content: space-around; align-items: center; 保证了容器内部的元素纵向排列，内部容器的实现使用了循环，并添加了点击事件，使得在点击的时候可以快速判断出是哪个条目，为下面的内容做准备。

scroll-view组件

在小程序开发文档中，将scroll-view称为可滚动视图区域，通过一对标签scroll-view包裹起来的内容是可以在设置的方向上滚动的，在文档中，列举了很多相关的属性，但我们这里只是举例，便只做出了最简单的滚动样式，具体详细的属性用法可以参看文档。

index.wxml

<scroll-view class="scrollView" scroll-y="true">

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

　　<view class="swiperText">{{item}}</view>

</scroll-view>

index.wxss

.swiperText{

　　100%;

　　height:100px;

　　line-height: 100px;

　　text-align: center;

}

.scrollView{

　　height: 100%;

　　background-color:

#eaeaea;

}

::-webkit-scrollbar{

　　0;

　　height:0;

}

在这段代码中，通过设置滚动容器.scrollView的scroll-y="true"；使得容器在y中方向上可以滚动，另外通过最后的那两行样式，将滚动条隐藏了。

 swiper组件

 在小程序开发文档中，将swiper称为视图滑块容器，内容也是可以滑动的，关于swiper，在开发文档中也列出来很多的属性，我们这边只是简单的说一下我们待会儿需要用的几个属性，首先是current，当前所在滑块的index，也就是控制当前显示的滑块的；duration，滑动动画的时长，这个自己按需设置就好了；bindchange，current 改变时会触发 change 事件，event.detail = {current: current, source: source}，当我们改变current的时候，会触发的相关事件。先来看一下我们的实现代码。

index.wxml

<view class="top-tab">

　　<view class="top-tab-item {{currentTopItem==idx ? 'active' : ''}}" wx:for="{{topTabItems}}" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab" >

　　　　{{item}}

　　</view>

</view>

 

<swiper class="swiper" current="{{currentTopItem}}" bindchange="bindChange" duration="300" style="height:{{swiperHeight}}px" >

　　<block wx:for="{{topTabItems}}" >

　　　　<swiper-item>

　　　　　　<scroll-view class="scrollView" scroll-y="true">

　　　　　　　　<view class="swiperText">{{item}}</view>

　　　　　　　　<view class="swiperText">{{item}}</view>

　　　　　　　　<view class="swiperText">{{item}}</view>

             <view class="swiperText">{{item}}</view>

　　　　　　　　<view class="swiperText">{{item}}</view>

　　　　　　　　<view class="swiperText">{{item}}</view>

　　　　　　　　<view class="swiperText">{{item}}</view>

　　　　　　　　<view class="swiperText">{{item}}</view>

　　　　　　　  <view class="swiperText">{{item}}</view>

　　　　　　</scroll-view>

　　　　</swiper-item>

　　</block>

</swiper>

index.wxss

.swiper{

　　display: block;

　　 100%;

　　overflow: hidden;

　　margin: 0;

　　border: 0;

　　margin-top: 37px;

　　background-color:

#eaeaea;

}

index.js

Page({

　　data: {

　　　　topTabItems: ["社会", "视频", "图片", "段子", "经济"],

　　　　currentTopItem: "0",

　　　　swiperHeight: "0"

　　},

　　onReady: function () {

　　　　var that = this;

　　　　wx.getSystemInfo({

　　　　　　success: function (res) {

　　　　　　　　that.setData({

　　　　　　　　　　swiperHeight: (res.windowHeight - 37)

　　　　　　　　});

　　　　　　}

　　　　})

　　},

　　switchTab: function (e) {

　　　　this.setData({

　　　　　　currentTopItem: e.currentTarget.dataset.idx

　　　　});

　　},

　　bindChange: function (e) {

　　　　var that = this;

　　　　that.setData({

　　　　　　currentTopItem: e.detail.current

　　　　});

　　}

})

首先，我们通过构建了一个容器.swiper,滑块部分就是每一个scroll-view了，我们默认将current设置为0，也就是默认显示第一个滑块部分了，因为容器的可活动范围=界面可操作范围 - 顶部导航部分，因此在高度上面上面做了一个设置，至于scroll-view的大小，默认是同滑块容器也就是.swiper相同的，我们知道上面导航部分的菜单和下面滑块是一一对应的，因此，我们只需要current同上面的index关联就可以了，也就是前面导航部分说的点击事件了。