效果图：
1. 新建一个index页面
主页面分为两块，上面是导航条，下面是轮播图。
导航条：
<view class='menu'> <scroll-view scroll-x> <view class='scroll-nav'> <navigator url="/pages/baidupage/baidupage" data-navindex='0' bindtap="navNews" class="{{currentTab!=0?'color-black': 'color-green'}}">社会新闻</navigator> <navigator url="" data-navindex='1' bindtap="navNews" class="{{currentTab!=1?'color-black': 'color-green'}}">国际新闻</navigator> <navigator url="" data-navindex='2' bindtap="navNews">国内新闻</navigator> <navigator url="" data-navindex='3' bindtap="navNews">娱乐新闻</navigator> <navigator url="" data-navindex='4' bindtap="navNews">体育新闻</navigator> <navigator url="" data-navindex='5' bindtap="navNews">综合新闻</navigator> </view> </scroll-view> </view>
scroll-x表示可以横向滚动，导航条内容较长，因此需要横向滚动。
navigator是导航条，
url里面是跳转链接，这个链接页面必须在app.json里面存在。当点击这个导航时会跳转到baidupage的页面，这个页面里面的内容是打开https://wap.baidu.com，一般小程序是没有权限打开百度页面的，这里是模拟，所以关闭了验证，具体原因参考https://blog.csdn.net/qq_32113629/article/details/79483213
bindtap是绑定事件，当点击这个导航时会触发navNews函数，这个函数在Index.js中定义的。
class里面是导航的颜色显示，当在当前tab下面时，字体是绿色，当切换到其他导航时，颜色变为黑色。
轮播图：
<view> <swiper current="{{currentTab}}" bindchange="swiperView"> <swiper-item> <view class="swiper-view1">社会新闻</view> </swiper-item> <swiper-item> <view class="swiper-view2">国际新闻</view> </swiper-item> </swiper> </view>
社会新闻的页面是swiper-view1，为红色。国际新闻的页面是swiper-view2，为绿色，其中currentTab这个变量就是个关键，将导航条和轮播图联系起来。
总的代码：
app.json
{
"pages": [
"pages/index/index",
"pages/baidupage/baidupage"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F00",
"navigationBarTitleText": "今日头条",
"navigationBarTextStyle": "white"
},
"sitemapLocation": "sitemap97.json"
}