1、顶部导航栏（滚动）

使用的是swiper和swiper-item来实现，左右滑动切换顶部选项，效果图如下：

代码：

js

//index.js //获取应用实例 const app = getApp() Page({ data: { tabbar: ["热门", "娱乐", "体育", "国内", "财经", "科技", "教育", "汽车"], winHeight: "", //窗口高度 currentTab: 0, //预设当前项的值 scrollLeft: 0 //tab标题的滚动条位置 }, onLoad: function () { let that = this; // 高度自适应 wx.getSystemInfo({ success: function (res) { let calc = res.windowHeight; //顶部脱离文档流了(- res.windowWidth / 750 * 100); // console.log('==顶部高度==',calc) that.setData({ winHeight: calc }); } }); }, // 滚动切换标签样式 switchTab: function (e) { let that = this; // console.log("滚动切换标签",e) that.setData({ currentTab: e.detail.current }); that.checkCor(); }, // 点击标题切换当前页时改变样式 swichNav: function (e) { let cur = e.currentTarget.dataset.current; if (this.data.currentTab == cur) { return false; } else { this.setData({ currentTab: cur }) } }, //判断当前滚动超过一屏时，设置tab标题滚动条。 checkCor: function () { let that = this; if (that.data.currentTab > 3) { that.setData({ scrollLeft: 300 }) } else { that.setData({ scrollLeft: 0 }) } }, })

.wxml

<!--index.wxml--> <view class="container"> <!-- 顶部导航栏 --> <scroll-view scroll-x scroll-with-animation class="tab-view" scroll-left="{{scrollLeft}}"> <view wx:for="{{tabbar}}" wx:key="{{index}}" class="tab-bar-item {{currentTab==index ? 'active' : ''}}" data-current="{{index}}" catchtap="swichNav"> <text class="tab-bar-title">{{item}}</text> </view> </scroll-view> <!-- 内容 --> <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}px"> <swiper-item wx:for="{{tabbar}}" wx:key="{{index}}"> <scroll-view scroll-y class="scoll-y"> <!--start 内容部分，可直接删除--> <block wx:if="{{index ==0}}"> <include src="../remen/remen.wxml" /> </block> <block wx:if="{{index ==1}}"> <include src="../yule/yule.wxml" /> </block> <!--end 内容部分，可直接删除--> </scroll-view> </swiper-item> </swiper> </view>

.wxss

/**index.wxss**/ .container { /* height: 100%; width: 100%; */ display: flex; flex-direction: column; box-sizing: border-box; } /* *******topbar******* begin*/ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } .tab-view::before { content: ''; position: absolute; border-bottom: 1rpx solid #eaeef1; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); bottom: 0; right: 0; left: 0; } .tab-view { width: 100%; height: 100rpx; overflow: hidden; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 99; background: #fff; white-space: nowrap; } .tab-bar-item { padding: 0; height: 100rpx; min-width: 80rpx; line-height: 100rpx; margin: 0 28rpx; display: inline-block; text-align: center; box-sizing: border-box; } .tab-bar-title { height: 100rpx; line-height: 100rpx; font-size: 32rpx; color: #999; font-weight: 400; } .active { border-bottom: 6rpx solid #5677fc; } .active .tab-bar-title { color: #5677fc !important; font-size: 36rpx; font-weight: bold; } /* *******topbar******* end*/ .scoll-y { height: 100%; } .tab-content { height: 100%; width: 100%; }

需要完整代码可到这里下载：https://download.csdn.net/download/wy313622821/12914516

2、顶部导航栏（不带滚动）

第一种风格，效果图：

.js

Page({ data: { barList: ['热点', '新闻', '趣事'], barIndex: 0 }, clickBar: function (e) { this.setData({ barIndex: e.currentTarget.dataset.index }) }, onLoad: function (options) { }, })

.wxml

<view class='ui_tab'> <view class='ui_navbar'> <view class='ui_navbar_item {{barIndex==index?"ui_navbar_item_on":""}}' wx:for="{{barList}}" data-index="{{index}}" bindtap='clickBar'>{{item}}</view> </view> <view style="margin:30rpx" wx:if="{{barIndex==0}}">页面一</view> <view style="margin:30rpx" wx:if="{{barIndex==1}}">页面二</view> <view style="margin:30rpx" wx:if="{{barIndex==2}}">页面三</view> </view>

.wxss

.ui_tab { display: flex; flex-direction: column; align-items: center; position: relative; } .ui_navbar { display: flex; position: relative; border-radius: 50rpx; background-color: #f0f0f0; width: 80%; } .ui_navbar_item { flex: 1; text-align: center; padding: 20rpx 0; border-radius: 50rpx; } /* 选中后变字体颜色和背景颜色 */ .ui_navbar_item_on { /*选中后字体颜色*/ color: #fff; /*选中后背景颜色*/ background-color: #0080ff; /*选中后横线*/ /* border-bottom: 2rpx solid rgb(201, 107, 107); */ }

第二种风格，效果图：

.js

// pages/button/button.js Page({ data: { barList: ['热点','新闻','趣事'], barIndex:0 }, clickBar:function(e){ this.setData({ barIndex:e.currentTarget.dataset.index }) }, onLoad: function (options) { }, })

.wxml

<view class='ui_tab'> <view class='ui_navbar'> <view class='ui_navbar_item {{barIndex==index?"ui_navbar_item_on":""}}' wx:for="{{barList}}" wx:key="{{index}}" data-index="{{index}}" bindtap='clickBar'>{{item}}</view> </view> <view wx:if="{{barIndex==0}}">页面一</view> <view wx:if="{{barIndex==1}}">页面二</view> <view wx:if="{{barIndex==2}}">页面三</view> </view>

.wxss

.ui_tab { position: relative; /* border-top:2rpx solid #ccc; 横线*/ } .ui_navbar { display: flex; position: relative; } .ui_navbar_item { flex: 1; text-align: center; padding: 20rpx 0; /* border-bottom:2rpx solid #ccc; border-right:2rpx solid #ccc; */ } /* 选中后变字体颜色和背景颜色 */ .ui_navbar_item_on { /*选中后字体颜色*/ color: rgb(190, 77, 77); /*选中后背景颜色*/ background: #f1f1f1; /*选中后横线*/ border-bottom: 2rpx solid rgb(201, 107, 107); }

所有实现的代码都给出来了，这里就不放下载链接了

3、导航栏滑到一定程度就隐藏轮播图

代码:

js

var that Page({ /** * 页面的初始数据 */ data: { autoplay: false, //是否自动播放 circular: true, //是否采用衔接滑动 indicatorDots: true, //是否显示面板指示点 scrollTop: '', //滑动的距离 navFixed: false, //导航是否固定 currentData: 0, // 轮播图和小车 的图片 pictures: [ "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602154823228&di=b7d6be25877b4a6a221963b8172a32dd&imgtype=0&src=http%3A%2F%2Fpic15.nipic.com%2F20110630%2F1295091_123724627598_2.jpg", "https://m0.autoimg.cn/cardfs/upload/spec/11852/800x0_q87_autohomecar__y_20120127095328825264.jpg", "https://m0.autoimg.cn/cardfs/upload/spec/11852/800x0_q87_autohomecar__y_20120127095322804264.jpg", "https://m0.autoimg.cn/cardfs/upload/spec/10003/800x0_q87_autohomecar__y_20111119102503991264.jpg", ], // 电车中的图片 recommendPictures: [ "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=225148521,438150860&fm=26&gp=0.jpg", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=36293247,1325499932&fm=26&gp=0.jpg", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1778493161,3668510566&fm=26&gp=0.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602154997262&di=cb0ca67c41063c6805940c7ba3430fc6&imgtype=0&src=http%3A%2F%2Fimage.cn.made-in-china.com%2F2f0j01HviacVUlvgkr%2F%25E8%25BE%25B9%25E4%25B8%2589%25E8%25BD%25AE%25E6%2591%25A9%25E6%2589%2598%25E8%25BD%25A6%2B%2528CJ750M1M%2529.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602154997262&di=6938091ecc99a9f6e1e41367e42925d4&imgtype=0&src=http%3A%2F%2Fimg11.360buyimg.com%2Fn1%2Fjfs%2Ft4243%2F146%2F607861919%2F136644%2Fb46eda48%2F58b6cb71N5f4c6e21.jpg" ] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { that = this; /** 设备信息 */ wx.getSystemInfo({ success: (res) => { this.setData({ pixelRatio: res.pixelRatio, windowHeight: res.windowHeight, windowWidth: res.windowWidth }) }, }) }, // 获取当前滑块的index bindchange: function (e) { console.log('获取当前滑块的index') that.setData({ currentData: e.detail.current }) }, //点击切换，滑块index赋值 checkCurrent: function (e) { console.log('点击切换') console.log(e.target.dataset.current) if (that.data.currentData === e.target.dataset.current) { return false; } else { that.setData({ currentData: e.target.dataset.current }) } }, //监听滑动 layoutScroll: function (e) { this.data.scrollTop = this.data.scrollTop * 1 + e.detail.deltaY * 1; // console.log(this.data.scrollTop) // console.log(this.data.navFixed) /** 我这里写了固定值 如果使用rpx 可用query可以动态获取其他的高度 然后修改这里值 */ /** 获取方法参考文档 */ /** scrollTop 在模拟器上检测不是太灵敏 可在真机上测试 基本上不会出现延迟问题 */ var navtopHeight = 160; if (this.data.scrollTop <= -navtopHeight) { this.setData({ navFixed: true }) } else { this.setData({ navFixed: false }) } }, })

wxml

<view style="height: {{windowHeight}}px;"> <scroll-view bindscroll='layoutScroll' scroll-y="true" style="height: 100vh;"> <!-- swiper顶部图片轮播切换 --> <swiper class='swiper' indicator-dots="true" autoplay="true" interval="2000" duration="1000"> <block wx:for="{{pictures}}" data-index="{{index}}" class='block-box' wx:key="{{index}}"> <swiper-item bindtap="swipclick" id="{{item.id}}"> <image src="{{item}}" class="repair-img" /> </swiper-item> </block> </swiper> <scroll-view scroll-x="true" class="nav {{navFixed? 'positionFixed':''}}"> <!-- 导航栏 --> <view class='topTabSwiper'> <view class='one-tab' data-current="0" bindtap='checkCurrent'> <view data-current="0" class='{{currentData == 0 ? "tab-title-select" : "tab-title"}}'>小车</view> <view class='{{currentData == 0 ? "one-tab-line" : ""}}' data-current="0"></view> </view> <view class='center-tab' data-current="1" bindtap='checkCurrent'> <view data-current="1" class='{{currentData == 1 ? "tab-title-select" : "tab-title"}}'>摩托</view> <view class='{{currentData == 1 ? "two-tab-line" : ""}}' data-current="1"></view> </view> <view class='tab' data-current="2" bindtap='checkCurrent'> <view data-current="2" class='{{currentData == 2 ? "tab-title-select" : "tab-title"}}'>其他</view> <view class='{{currentData == 2 ? "one-tab-line" : ""}}' data-current="2"></view> </view> </view> </scroll-view> <!-- 切换0小车的内容 --> <view class='one-page' wx:if="{{currentData==0}}"> <view wx:for="{{pictures}}" data-index="{{index}}" wx:key="{{index}}"> <image src='{{item}}' class='repair-img'></image> </view> </view> <!-- 切换1摩托的内容 --> <view class='two-page' wx:if="{{currentData==1}}"> <view wx:for="{{recommendPictures}}" data-index="{{index}}" wx:key="{{index}}"> <image src='{{item}}' class='recommend-img'></image> </view> </view> <!-- 切换2其他的内容 --> <view class='three-page' wx:if="{{currentData==2}}"> <text>其他的内容</text> </view> </scroll-view> </view>

wxss

page { width: 100%; height: auto; background: #f3f3f3; } .swiper-home { height: 30vh; width: 100%; } .block-box { height: 30vh; width: 100%; } .repair-img { width: 100vw; height: 30vh; } .nav { background: white; z-index: 99; box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/ -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99; } .positionFixed { position: fixed; left: 0; top: 0; box-shadow: 0rpx -1.2rpx 10rpx 4rpx #dddddd99; /*for Android*/ -webkit-box-shadow: 0px -0.6px 5px 2px #dddddd99; } /* 这个属性特别重要！！不然样式会崩掉 */ .topTabSwiper:after { content: ""; clear: both; display: block; } .one-tab { width: 26vw; float: left; text-align: center; padding: 10rpx 0; height: 5.2vh; line-height: 4.6vh; } .tab-title-select { color: lightcoral; font-size: 32rpx; } .tab-title { font-size: 32rpx; } .one-tab-line { width: 10vw; border-bottom: 6rpx solid lightcoral; margin-left: 8vw; margin-top: 1vh; margin-bottom: 0.2vh; } .center-tab { width: 48vw; float: left; text-align: center; padding: 10rpx 0; height: 5.2vh; line-height: 4.6vh; } .two-tab-line { width: 10vw; border-bottom: 6rpx solid lightcoral; margin-left: 19vw;/*（48-10)/2让红线处在选项的中间*/ margin-top: 1vh; margin-bottom: 0.2vh; } .tab { float: left; width: 26vw; text-align: center; padding: 10rpx 0; height: 5.2vh; line-height: 4.6vh; } .one-page { background: white; margin-top: 1vh; } .two-page{ background: white; margin-top: 1vh; } .recommend-img{ width: 100vw; height: 36vh; }