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;
}
4、吸顶导航栏
上拉会吸顶，需要代码的可以到这里下载：
https://download.csdn.net/download/wy313622821/18591305
1003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
