微信小程序选项卡切换+导航栏顶部悬浮
2019-07-03 本文已影响0人
_果不其然_
选项卡的切换还是我们经常做的样式，那么如果选项卡下的内容过多，页面滑动的时候，如何将切换的导航栏固定在页面上方呢?这个我也看了网上的很多方案，做了很多尝试，选项卡滑动到页面顶部无法进行切换的问题也做了一些参照和修改，下面是修改后的效果：
顶部悬浮+选项卡切换.gif
今天特别懒，还是直接放代码吧
-
WXML
<view style="height: {{windowHeight}}px;">
<scroll-view bindscroll='layoutScroll' scroll-y="true" style="height: 100vh;">
<!-- swiper顶部图片轮播切换 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}"
vertical="{{vertical}}" interval="{{interval}}" duration="{{duration}}" class='swiper-home'>
<block wx:for="{{pictures}}" data-index="{{index}}" class='block-box' wx:key="{{index}}">
<swiper-item>
<image src='{{item}}' class='repair-img'></image>
</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}}">
</view>
</scroll-view>
</view>
<view class='evaluate' wx:if="{{currentData==2}}">评价</view>
- WXSS
/* pages/index/repair/storeInfo.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;
}
-
JS
Page({
/**
* 页面的初始数据
*/
data: {
autoplay: false, //是否自动播放
circular: true, //是否采用衔接滑动
indicatorDots: true, //是否显示面板指示点
scrollTop: '', //滑动的距离
navFixed: false, //导航是否固定
currentData: 0,
pictures: [
"http://pic1.win4000.com/wallpaper/7/58981aef2947c.jpg",
"http://pic1.win4000.com/wallpaper/b/535f2c92cbe2a_270_185.jpg",
"http://img3.imgtn.bdimg.com/it/u=143763430,3849919589&fm=15&gp=0.jpg",
"http://img1.imgtn.bdimg.com/it/u=638880771,1982449750&fm=15&gp=0.jpg"
],
recommendPictures: [
"http://img3.imgtn.bdimg.com/it/u=338895088,3780206663&fm=26&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=2598427595,2652637564&fm=15&gp=0.jpg",
"http://img1.imgtn.bdimg.com/it/u=3806547188,2585718081&fm=15&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=720416758,2573876011&fm=26&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=1334930434,597258493&fm=26&gp=0.jpg"
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
/** 设备信息 */
wx.getSystemInfo({
success: (res) => {
this.setData({
pixelRatio: res.pixelRatio,
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
},
})
},
// 获取当前滑块的index
bindchange: function(e) {
console.log('获取当前滑块的index')
const that = this;
that.setData({
currentData: e.detail.current
})
},
//点击切换，滑块index赋值
checkCurrent: function(e) {
console.log('点击切换')
const that = this;
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
})
}
},
})
本篇分享就到这里了，如果你在这篇文章里发现了什么问题或者说有更好的建议，麻烦在评论区留下你的意见
