<view v-if="isTopBox == 1" style="height: 110rpx;"></view>
<view :class="'tabTest ' + (isTopBox == 1 ? 'fixed' : '')" bindscroll="onPageScroll">
<view v-for="(item,index) in tabArr" :key="index"
:class="'tab-item ' + (currentTabTest == index ? 'actives' : '')" @tap="clickTab"
:data-current="index">
{{item}}
<text></text>
</view>
</view>
data() {
return {
isTopBox: 0,
tabArr:["首页","附近","我的"],
currentTabTest: 0,
scrollTopNum: 0,
navbarTop: 0,
};
},
methods: {
setNarTop: function() {
var self = this;
var query = uni.createSelectorQuery().in(self)
setTimeout(function() {
query.select('.swiper-tabTest').boundingClientRect(res => {
self.navbarTop = res.top;
}).exec();
}, 100);
},
clickTab: function(e) {
var self = this;
if (self.currentTabTest === e.currentTarget.dataset.current) {
return false;
} else {
self.setFixed();
}
},
setFixed: function() {
var self = this;
self.is_suoding = true;
uni.pageScrollTo({
scrollTop: self.navbarTop + 1,
duration: 200
});
},
onPageScroll: function(e) {
var self = this;
self.scrollTopNum = e.scrollTop;
if (self.scrollTopNum >= self.navbarTop) {
self.setData({
isTopBox: 1,
});
} else {
self.setData({
isTopBox: 0,
});
}
},
getData: function(callback) {
var self = this;
app.globalData.ajaxRequest(action, 'POST', param, function(ret) {
if(ret.status == 1){
setTimeout(function(){
self.setNarTop();
},500);
}
}else{
app.globalData.toast(ret.msg,1500,'none');
}
}, true);
},
},
.tabTest{width: 100%;line-height: 70rpx;padding-top: 10rpx;padding-bottom:10rpx;margin-bottom: 10rpx;}
.fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 99;padding-left: 20rpx;padding-right: 20rpx;background: #fff;}
.tab-item{font-size: 30rpx;color: #333;display: inline-block;width:auto;padding: 0 25rpx;position: relative;}
.actives{font-size: 36rpx;}
.actives text{position: absolute;display: block;width: 50rpx;left: 50%;margin-left: -25rpx;bottom: 0;height: 8rpx;border-radius: 5rpx;background: #0354fa;}