Xamarin.Forms中如何通过ListView控制WebView跳转到已加载页面的指定锚点

嘿，这个需求其实挺常见的，我来给你一步步拆解怎么实现～

首先得确保你的HTML里锚点是正确设置的，这是基础！常见的锚点写法有两种：

• 给标题或元素加id属性，比如 <h2 id="section1">第一部分</h2>
• 用<a name="section3"></a>这种专门的锚点标签
  两种都能用，个人更推荐用id的方式，兼容性更好。

接下来我们分步骤实现整个流程：

1. 创建锚点数据模型 #

先在共享项目里建一个简单的类，用来绑定ListView的选项，把显示名称和对应的锚点ID关联起来：

public class AnchorItem
{
    public string DisplayName { get; set; } // ListView里显示的文字
    public string AnchorId { get; set; } // 对应HTML里的锚点ID/名称
}

2. 布局页面（XAML） #

我们用Grid把ListView和WebView分成左右两栏，这样用户选左边的选项，右边直接跳转：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppNamespace.YourPage">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    <!-- 左侧锚点列表 -->
    <ListView x:Name="AnchorListView"
              ItemSelected="AnchorListView_ItemSelected"
              Grid.Column="0">
      <ListView.ItemTemplate>
        <DataTemplate>
          <TextCell Text="{Binding DisplayName}" />
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
    <!-- 右侧内容WebView -->
    <WebView x:Name="ContentWebView"
             Grid.Column="1" />
  </Grid>
</ContentPage>

3. 初始化数据+处理跳转逻辑 #

在页面的后台代码里，我们要做三件事：初始化ListView的数据源、加载自定义HTML、处理ListView的选中事件来触发WebView跳转。

核心逻辑是用WebView的Eval方法执行JavaScript，通过window.location.hash来跳转到指定锚点：

public partial class YourPage : ContentPage
{
    public YourPage()
    {
        InitializeComponent();
        // 1. 初始化锚点列表数据
        var anchorItems = new List<AnchorItem>
        {
            new AnchorItem { DisplayName = "跳转到第一部分", AnchorId = "section1" },
            new AnchorItem { DisplayName = "跳转到第二部分", AnchorId = "section2" },
            new AnchorItem { DisplayName = "跳转到第三部分", AnchorId = "section3" }
        };
        AnchorListView.ItemsSource = anchorItems;

        // 2. 加载你的自定义HTML（这里直接写示例，你可以换成自己的HTML字符串/资源文件）
        string customHtml = @"<!DOCTYPE html>
<html>
<body>
  <h1>我的自定义页面</h1>
  <h2 id=""section1"">第一部分</h2>
  <p>这里是第一部分的内容...（多写点内容让页面能滚动起来，不然看不到跳转效果）</p>
  <p>更多测试内容...</p>
  <p>更多测试内容...</p>
  <h2 id=""section2"">第二部分</h2>
  <p>这里是第二部分的内容...</p>
  <a name=""section3""></a>
  <h2>第三部分</h2>
  <p>这里是第三部分的内容...</p>
</body>
</html>";
        ContentWebView.Source = new HtmlWebViewSource { Html = customHtml };
    }

    // 3. ListView选中事件处理
    private void AnchorListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem is AnchorItem selectedAnchor)
        {
            if (!string.IsNullOrEmpty(selectedAnchor.AnchorId))
            {
                // 执行JS跳转锚点，注意锚点前面要加#
                ContentWebView.Eval($"window.location.hash = '#{selectedAnchor.AnchorId}';");
            }
            // 取消选中状态，避免重复点击同一项没反应
            AnchorListView.SelectedItem = null;
        }
    }
}

几个要注意的小细节 #

• 一定要等WebView加载完HTML再触发跳转！如果用户在页面还没加载好就点ListView，Eval可能没效果。你可以监听WebView的Navigated事件，加个标记判断页面是否加载完成，再允许跳转。
• 如果你的HTML是从本地文件或者网络加载的，锚点的写法和跳转逻辑完全一样，只要确保锚点ID/名称对应上就行。
• 这个方法是跨平台兼容的，iOS、Android、UWP都能用。

备注：内容来源于stack exchange，提问作者Ali Albahrani