uniapp微信小程序自定义封装分段器。

uniapp微信小程序自定义封装分段器。

话不多说先上效果

这里我用的是cil框架 vue3 下面贴代码
组价代码：

<template><view class="page"><viewv-for="(item, index) in navList":key="index"@click="changeNav(index)":class="current == index ? 'selectNav' : ''">{{ item.title }}{{ item.num ? "（" + item.num + "）" : "" }}</view></view>
</template><script setup lang="ts">
import { ref, reactive, watch } from "vue";
const emit = defineEmits(["changeNav"]);
const props = withDefaults(defineProps<{navList: any;currentNav?: number;}>(),{ navList: [], currentNav: 0 }
);
const current = ref<number>(props.currentNav);
const changeNav = (index: number) => {current.value = index;emit("changeNav", current.value);
};
</script><style lang="scss" scoped>
.page {width: 100%;height: 88rpx;background-color: #fff;display: flex;align-items: center;justify-content: space-around;font-size: 30rpx;color: #14131f;
}.selectNav {color: #00cd73;font-size: 34rpx;position: relative;font-weight: 600;
}.selectNav::after {content: "";position: absolute;bottom: -20rpx;left: 0%;width: 90rpx;height: 10rpx;background: #00cd73;border-radius: 5rpx;
}
</style>

父组件使用方法：

<template><view class="page"><Sectionalizer :navList="navList" @changeNav="changeNav"></Sectionalizer></view>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import Sectionalizer from "@/components/sectionalizer.vue";
const navList = ref<any>([{title: "未进行",num: 5,},{title: "进行中",num: 2,},{title: "已完成",num: 12,},
]);
const changeNav = (index: number) => {console.log(index);
};
</script>