first commit
This commit is contained in:
wangxiaowei
100
components/navBar/navBar.vue
Normal file
100
components/navBar/navBar.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<view>
|
||||
<scroll-view scroll-y="true" class="scroll" @scroll="scrollChnage">
|
||||
<view class="navbar-section" :class="{'navbar-fixed-section': isFixed}">
|
||||
<ss-scroll-navbar :tabCurrentIndex="currentIndex" @navbarTap="navbarTapHandler" :scrollChangeIndex="currentI"
|
||||
:navArr="navList" :color="color"></ss-scroll-navbar>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ssScrollNavbar from '@/components/navBar/scroll-navbar.vue'
|
||||
|
||||
export default {
|
||||
props: ['currentI', 'navList', 'color'],
|
||||
components: {
|
||||
ssScrollNavbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
isFixed: false,
|
||||
topHeight: 0,
|
||||
listData: [],
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// uni.setNavigationBarTitle({
|
||||
// title: options.title
|
||||
// });
|
||||
this.calculateTopSectionHeight();
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
|
||||
navbarTapHandler(index) {
|
||||
this.currentIndex = index;
|
||||
this.$emit('currentIndex', index)
|
||||
},
|
||||
scrollChnage(e) {
|
||||
let top = e.detail.scrollTop;
|
||||
if (top >= this.topHeight) {
|
||||
this.isFixed = true;
|
||||
} else {
|
||||
this.isFixed = false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 计算头部视图的高度
|
||||
*/
|
||||
calculateTopSectionHeight() {
|
||||
var that = this;
|
||||
let topView = uni.createSelectorQuery().select(".top-section");
|
||||
topView.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
that.topHeight = data.height;
|
||||
}).exec();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentI: function(newVal) {
|
||||
this.navbarTapHandler(newVal)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.scroll {
|
||||
// position: absolute;
|
||||
// top: 0upx;
|
||||
// left: 0upx;
|
||||
// bottom: 0upx;
|
||||
// right: 0upx;
|
||||
|
||||
// .navbar-fixed-section {
|
||||
// position: fixed;
|
||||
// top: 0upx;
|
||||
// left: 0upx;
|
||||
// right: 0upx;
|
||||
// }
|
||||
|
||||
.top-section {
|
||||
height: 350upx;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.bottom-section {
|
||||
height: 1500upx;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
height: 1500upx;
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
144
components/navBar/scroll-navbar.vue
Normal file
144
components/navBar/scroll-navbar.vue
Normal file
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<scroll-view class="ss-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
|
||||
<view v-for="(item, index) in navArr" :key="item.category_id" class="nav-item" :style="'color:'+color+';'"
|
||||
:class="{current: index === tabCurrentIndex}" @click="tabChange(index)" :id="'item-' + index">
|
||||
<view class="after" :style="'border-color:'+color +' ;'"></view>
|
||||
<text class="title">{{item.name}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ss-scroll-navbar',
|
||||
props: {
|
||||
navArr: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [{
|
||||
name: '推荐',
|
||||
category_id: 'recent'
|
||||
}]
|
||||
}
|
||||
},
|
||||
tabCurrentIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
scrollChangeIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollLeft: 0,
|
||||
widthList: [],
|
||||
screenWidth: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 导航栏navbar
|
||||
* 点击事件
|
||||
*/
|
||||
tabChange(index) {
|
||||
this.$emit('navbarTap', index);
|
||||
var widthArr = this.widthList;
|
||||
var scrollWidth = 0;
|
||||
for (var i = 0; i < index + 1; i++) {
|
||||
scrollWidth += widthArr[i];
|
||||
}
|
||||
let currentWidth = widthArr[index];
|
||||
// scrollView 居中算法
|
||||
// 减去固定宽度位移
|
||||
// 减去选中的bar的宽度的一半
|
||||
scrollWidth -= this.screenWidth / 2;
|
||||
scrollWidth -= currentWidth / 2;
|
||||
this.scrollLeft = scrollWidth;
|
||||
},
|
||||
calculateItemWidth() {
|
||||
var that = this;
|
||||
var arr = [];
|
||||
let w = 0;
|
||||
this.navArr.forEach((item, index) => {
|
||||
let view = uni.createSelectorQuery().in(this).select("#item-" + index);
|
||||
view.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
arr.push(data.width);
|
||||
}).exec();
|
||||
})
|
||||
this.widthList = arr;
|
||||
},
|
||||
calculateWindowWidth() {
|
||||
var info = uni.getSystemInfoSync();
|
||||
this.screenWidth = info.screenWidth;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
var that = this;
|
||||
this.calculateWindowWidth();
|
||||
setTimeout(function() {
|
||||
that.calculateItemWidth();
|
||||
}, 1000);
|
||||
},
|
||||
watch: {
|
||||
scrollChangeIndex(val) {
|
||||
this.tabChange(val)
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.ss-scroll-navbar {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
|
||||
.nav-item {
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
padding: 0upx 20upx;
|
||||
color: #FFFFFF;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-size: 32upx;
|
||||
|
||||
.title {
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 4upx solid #ffffff;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
|
||||
.after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user