|
@@ -1,153 +0,0 @@
|
|
-<template>
|
|
|
|
- <view class="navTabBox">
|
|
|
|
- <view class="longTab">
|
|
|
|
- <scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation :scroll-left="isLeft-changeLeft">
|
|
|
|
- <view
|
|
|
|
- class="longItem"
|
|
|
|
- :style="'min-width:' + isWidth + 'px'"
|
|
|
|
- :data-index="index"
|
|
|
|
- :class="index === tabClick ? 'click' : ''"
|
|
|
|
- v-for="(item, index) in tabTitle"
|
|
|
|
- :key="index"
|
|
|
|
- :id="'id' + index"
|
|
|
|
- @click="longClick(index)"
|
|
|
|
- >
|
|
|
|
- {{ item }}
|
|
|
|
- </view>
|
|
|
|
- <view class="underlineBox" :style="'transform:translateX(' + isLeft + 'px);width:' + lineWidth + 'px'"><view class="underline"></view></view>
|
|
|
|
- </scroll-view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-export default {
|
|
|
|
- name: 'navTab',
|
|
|
|
- props: {
|
|
|
|
- tabTitle: {
|
|
|
|
- type: Array
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- tabClick: 0, //导航栏被点击
|
|
|
|
- isLeft: 0, //导航栏下划线位置
|
|
|
|
- isWidth: 0, //每个导航栏占位
|
|
|
|
- tabLeft: 0,
|
|
|
|
- leftList:[],
|
|
|
|
- lineWidth:0,
|
|
|
|
- wWidth:0
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- changeLeft() {
|
|
|
|
- return this.wWidth/2 - this.leftList[this.tabClick]/2
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- created() {
|
|
|
|
- var that = this;
|
|
|
|
- // 获取设备宽度
|
|
|
|
- uni.getSystemInfo({
|
|
|
|
- success(e) {
|
|
|
|
- that.wWidth = e.windowWidth;
|
|
|
|
- if (that.tabTitle.length <= 5) {
|
|
|
|
- that.isWidth = e.windowWidth / that.tabTitle.length; //宽度除以导航标题个数=一个导航所占宽度
|
|
|
|
- } else {
|
|
|
|
- that.isWidth = e.windowWidth / 5;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- console.log('load')
|
|
|
|
- },
|
|
|
|
- onReady() {
|
|
|
|
- console.log('ready')
|
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
|
- query.selectAll('.longItem').boundingClientRect(data => {
|
|
|
|
- console.log(data)
|
|
|
|
- this.leftList = data.map((item,index)=>{
|
|
|
|
- return item.width
|
|
|
|
- })
|
|
|
|
- this.lineWidth = this.leftList[0]
|
|
|
|
- }).exec();
|
|
|
|
- console.log(this.leftList)
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- // 导航栏点击
|
|
|
|
- longClick(index) {
|
|
|
|
- this.tabClick = index; //设置导航点击了哪一个
|
|
|
|
- // this.isLeft = index * this.isWidth; //设置下划线位置
|
|
|
|
- this.isLeft = this.leftList.reduce((acc,cur,curIndex)=>{
|
|
|
|
- if(curIndex <index){
|
|
|
|
- return acc+cur
|
|
|
|
- }else{
|
|
|
|
- return acc
|
|
|
|
- }
|
|
|
|
- },0); //设置下划线位置
|
|
|
|
- this.lineWidth = this.leftList[index]
|
|
|
|
- console.log(this.isLeft)
|
|
|
|
- this.$emit('changeTab', index); //设置swiper的第几页
|
|
|
|
- // this.$parent.currentTab = index //设置swiper的第几页
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-};
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss">
|
|
|
|
-.navTabBox {
|
|
|
|
- width: 100vw;
|
|
|
|
- color: rgba(255, 255, 255, 0.5);
|
|
|
|
- .click {
|
|
|
|
- color: white;
|
|
|
|
- }
|
|
|
|
- .longTab {
|
|
|
|
- width: 100%;
|
|
|
|
- .longItem {
|
|
|
|
- height: 90upx;
|
|
|
|
- display: inline-block;
|
|
|
|
- line-height: 90upx;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- .underlineBox {
|
|
|
|
- height: 3px;
|
|
|
|
- width: 20%;
|
|
|
|
- display: flex;
|
|
|
|
- align-content: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- transition: 0.5s;
|
|
|
|
- .underline {
|
|
|
|
- width: 84upx;
|
|
|
|
- height: 4px;
|
|
|
|
- background-color: white;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .shortTab {
|
|
|
|
- width: 100%;
|
|
|
|
- .navTab {
|
|
|
|
- display: flex;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 90upx;
|
|
|
|
- position: relative;
|
|
|
|
- .navTabItem {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- width: 100%;
|
|
|
|
- font-size: 28upx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .underlineBox {
|
|
|
|
- height: 3px;
|
|
|
|
- display: flex;
|
|
|
|
- align-content: center;
|
|
|
|
- justify-content: center;
|
|
|
|
- transition: 0.5s;
|
|
|
|
- .underline {
|
|
|
|
- width: 84upx;
|
|
|
|
- height: 3px;
|
|
|
|
- background-color: white;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|