# BackTo 组件使用示例
以下为片段，实际页面请自行布局。
---
## 基础用法（全局滚动）
不指定 `container` 时监听窗口滚动。
```tsx
import { BackTo, Bubble } from '@alipay/agentic-design-mobile';
const longMessages = Array.from({ length: 20 }, (_, i) => ({
role: (i % 2 === 0 ? 'user' : 'assistant') as 'user' | 'assistant',
content: `第 ${i + 1} 条消息，用于演示滚动。`,
time: '2025-01-01 12:00:00',
}));
export function BackToWindow() {
return (
<>
{(item) => (
)}
);
}
```
---
## 容器滚动（RefObject）
```tsx
import { useRef } from 'react';
import { BackTo, Bubble } from '@alipay/agentic-design-mobile';
const longMessages = Array.from({ length: 20 }, (_, i) => ({
role: (i % 2 === 0 ? 'user' : 'assistant') as 'user' | 'assistant',
content: `第 ${i + 1} 条`,
time: '12:00',
}));
export function BackToContainer() {
const scrollRef = useRef(null);
return (
{(item) => (
)}
);
}
```
---
## 自定义阈值和加载状态
```tsx
import { useRef } from 'react';
import { BackTo, Bubble } from '@alipay/agentic-design-mobile';
const longMessages = Array.from({ length: 15 }, (_, i) => ({
role: (i % 2 === 0 ? 'user' : 'assistant') as 'user' | 'assistant',
content: `消息 ${i + 1}`,
time: '12:00',
}));
export function BackToThreshold() {
const scrollRef = useRef(null);
return (
{(item) => (
)}
);
}
```