<template><XtfConfigProvider class="demo-theme-root" :theme="demoTheme"><view class="demo-page"><text class="demo-title">Index Anchor</text><text class="demo-desc">标题和 id 可被索引栏识别，点击标题会发出 scrollTo 事件。</text><XtfIndexBar class="index-demo-bar" :index-list="indexes" @select="selected"><XtfIndexAnchor id="A" title="A" color="#2563eb" @scroll-to="scrolled"><view class="index-row"><text class="index-row-text">安琪</text></view><view class="index-row"><text class="index-row-text">艾伦</text></view></XtfIndexAnchor><XtfIndexAnchor id="B" title="B" color="#0f766e" @scroll-to="scrolled"><view class="index-row"><text class="index-row-text">白雪</text></view><view class="index-row"><text class="index-row-text">北川</text></view></XtfIndexAnchor><XtfIndexAnchor id="C" title="C" color="#ea580c" @scroll-to="scrolled"><view class="index-row"><text class="index-row-text">陈明</text></view></XtfIndexAnchor></XtfIndexBar><text class="demo-state">{{ status }}</text></view></XtfConfigProvider></template>
<script setup lang="uts">
import { useDemoTheme } from '@/pages/demo-theme.uts'
const demoTheme = useDemoTheme()
import { ref } from "vue"
import XtfConfigProvider from "@/uni_modules/xtf-linkuiunix/components/xtf-config-provider/xtf-config-provider.uvue"
import XtfIndexBar from "@/uni_modules/xtf-linkuiunix/components/xtf-index-bar/xtf-index-bar.uvue"
import XtfIndexAnchor from "@/uni_modules/xtf-linkuiunix/components/xtf-index-anchor/xtf-index-anchor.uvue"
const indexes = ["A", "B", "C"] as Array<string>; const status = ref("等待选择"); function selected(payload: any): void { status.value = "索引栏选择：" + payload.name.toString() }; function scrolled(payload: any): void { status.value = "锚点事件：" + payload.id.toString() }
</script>
<style>.demo-page { display: flex; flex: 1; flex-direction: column; padding: 32rpx; background-color: var(--xtf-color-page, #f1f5f9); }.demo-title { color: var(--xtf-color-text, #0f172a); font-size: 48rpx; font-weight: 700; }.demo-desc { margin-top: 12rpx; margin-bottom: 24rpx; color: var(--xtf-color-text-secondary, #475569); font-size: 26rpx; line-height: 1.5; }.index-demo-bar { flex: 1; min-height: 0; border-radius: 12rpx; background-color: var(--xtf-color-surface, #ffffff); }.index-row { display: flex; flex-direction: row; align-items: center; min-height: 76rpx; padding: 0 24rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: var(--xtf-color-border, #e2e8f0); }.index-row-text { color: var(--xtf-color-text-secondary, #334155); font-size: 28rpx; }.demo-state { margin-top: 20rpx; color: var(--xtf-color-text-secondary, #64748b); font-size: 24rpx; }</style>
