feat: 初始化

pages/components/segmented/index.scss

@@ -0,0 +1,35 @@
+::-webkit-scrollbar-thumb {
+	display: none;
+}
+::-webkit-scrollbar {
+	width: 0px;
+	height: 0px;
+}
+
+.segmentedWrapper {
+	overflow-x: auto;
+	.segmented {
+		position: relative;
+		display: grid;
+		width: max-content;
+		min-width: 100%;
+		padding-bottom: 10px;
+		border-bottom: 1px solid #ececec;
+		box-sizing: border-box;
+		font-size: 18px;
+		.segmentedItem {
+			display: flex;
+			justify-content: center;
+			cursor: pointer;
+			text-align: center;
+			padding: 0px 6px;
+		}
+		.segmentedThumb {
+			position: absolute;
+			bottom: 0px;
+			height: 2px;
+			background-color: #333333;
+			transition: all 0.3s ease-out;
+		}
+	}
+}

pages/components/segmented/index.vue

@@ -0,0 +1,114 @@
+<template>
+	<view class="segmentedWrapper">
+		<view
+			class="segmented"
+			:style="{ gridTemplateColumns: `repeat(${values.length},minmax(0,1fr))`, paddingBottom: gap, fontSize: fontSize, borderBottomWidth: underLineHeight }"
+		>
+			<view
+				class="segmentedThumb"
+				:style="{
+					width: (1 / values.length) * 100 + '%',
+					height: thumbHeight,
+					left: (1 / values.length) * 100 * current + '%'
+				}"
+			></view>
+			<view
+				class="segmentedItem"
+				:style="{
+					color: current === index ? activeColor : inActiveColor,
+					fontWeight: current === index ? activeFontWeight : inActiveFontWeight
+				}"
+				v-for="(item, index) in values"
+				:key="index"
+				@click="_onClick(index)"
+			>
+				{{ item }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'Segmented',
+	emits: ['clickItem'],
+	props: {
+		current: {
+			type: Number,
+			default: 0
+		},
+		values: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		fontSize: {
+			type: String,
+			default: '18px'
+		},
+		thumbHeight: {
+			type: String,
+			default: '2px'
+		},
+		underLineHeight: {
+			type: String,
+			default: '1px'
+		},
+		gap: {
+			type: String,
+			default: '10px'
+		},
+		activeColor: {
+			type: String,
+			default: '#333333'
+		},
+		inActiveColor: {
+			type: String,
+			default: '#999999'
+		},
+		activeFontWeight: {
+			type: Number,
+			default: 400
+		},
+		inActiveFontWeight: {
+			type: Number,
+			default: 400
+		},
+		styleType: {
+			type: String,
+			default: 'button'
+		}
+	},
+	data() {
+		return {
+			currentIndex: 0
+		};
+	},
+	watch: {
+		current(val) {
+			if (val !== this.currentIndex) {
+				this.currentIndex = val;
+			}
+		}
+	},
+	computed: {},
+	created() {
+		this.currentIndex = this.current;
+	},
+	methods: {
+		_onClick(index) {
+			if (this.currentIndex !== index) {
+				this.currentIndex = index;
+				this.$emit('clickItem', {
+					currentIndex: index
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>