LJ-ancient-city-h5/components/sunui-navbar/sunui-navbar.vue

<template>
	<scroll-view scroll-with-animation :class="['sunui-nav-bar sticky']"
		:scroll-x="true" :show-scrollbar="false" :scroll-into-view="'tab-'+currentIndex+autoLeft">
		<view style="height: 46px;display: flex;" class="">
			<view :class="['flex-column-center', currentIndex == index && animatie ?'sunui-nav-scale':'' ]" :id="'tab-'+index" style="width: calc(100% / 4)"
				v-for="(item, index) in items" :key="index" @click="navchang" :data-index="index">
				<view :class="['nav-public', currentIndex == index ? 'nav-active' : 'nav-item']">{{item.name}}
				</view>
        <view :class="['nav-line']" :style="{width: currentIndex == index ? 'calc(100% - 14px)' : '0px'}"></view>
			</view>
		</view>
	</scroll-view>
</template>
<script>
	export default {
		props: {
			items: {
				type: Array,
				default: function() {
					return []
				}
			},

			isCenter: {
				type: Boolean,
				default: true
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 120
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			activeFontSize: {
				type: String,
				default: '28rpx'
			},

			activeLineBg: {
				type: String,
				default: "linear-gradient(to right, #66BFFF,#3388FF)"
			},
			color: {
				type: String,
				default: "#000"
			},
			activeColor: {
				type: String,
				default: "#333333"
			},
			activeLineHeight: {
				type: String,
				default: '6rpx'
			},
			activeLineWidth: {
				type: String,
				default: "36rpx"
			},
			activeLineRadius: {
				type: String,
				default: "0rpx"
			},
			activeDirection: {
				type: String,
				default: ""
			},
			activeFontWeight: {
				type: Number,
				default: 700
			},
			margin: {
				type: Number,
				default: 0
			},
			textAlign: {
				type: String,
				default: ''
			},
			lineHeight: {
				type: String,
				default: '50rpx'
			},
			padding: {
				type: String,
				default: '0rpx'
			},
			animatie: {
				type: Boolean,
				default: true
			},
			autoLeft: {
				type: String,
				default: ''
			}
		},
		methods: {
			navchang: function(e) {
        console.log(e.currentTarget.dataset.index)
				this.$emit('change', Number(e.currentTarget.dataset.index))
			}
		}
	}
</script>
<style scoped>
	.sunui-nav-bar {
		width: 100%;
		display: flex;
		white-space: nowrap;
		background-color: #fff;
    justify-content: center;
    text-align: center;
	}

	.sticky {
		position: sticky;
		width: 100%;
		left: 0;
		top: 20px;
	}

	.nav-public {
		min-width: calc(100%);
		line-height: 44px;
		height: 44px;
    /*border: 1px solid red;*/
		box-sizing: border-box;
		font-size: 15px;
		color: #B2BCCB;
	}
  .nav-line {
    /*min-width: calc(100% - 14px);*/
    height: 2px;
    background: #33CEF0;
    transition: all 0.2s linear;
  }

	.nav-active {
		/*background-color: #BF1C2D;*/
		color: #33CEF0;
    /*border-bottom: 2px solid #33CEF0;*/
	}

	.nav-item {
		background-color: #FFFFFF;
	}

	@keyframes sunui-nav-scale {
		0% {
			transform: scale(0.8);
		}

		100% {
			transform: scale(1);
		}
	}

	.sunui-nav-scale {
		animation: sunui-nav-scale 500ms forwards;
	}
</style>