Question

在加载网页时，有没有办法在WebView中显示占位符？

我有一个Xamarin.Forms应用程序，它通过WebView显示Web内容。在加载网页内容时，我想展示占位符 - 例如标准页面的模糊版本 - 使过渡看起来更平滑。有谁知道实现这个目标的好方法？（假设iOS和Android上的答案不同，欢迎在这两个平台上的任何一个答案！）

我有一个自定义的webview渲染器（Xamarin.iOS），我认为这是一个适合某些地方的地方，但我不知道实际上是什么。感谢帮助。

class CustomWebViewRenderer : WebViewRenderer 
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e) 
    {
        base.OnElementChanged(e);
        if (e.OldElement != null) 
        {
            //...
        }

        if (e.NewElement != null) 
        {
            //...
        }
    }        
}

Answer 1

实际上，您不需要自定义渲染器来显示占位符。 WebView会在视图开始并完成导航时触发Navigating和Navigated事件（请参阅docs）。

您可以从XAML订阅它们

<ContentPage ...>
    <AbsoluteLayout HorizontalOptions="Fill" VerticalOptions="Fill">
        <WebView AbsolueLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" Navigating="WebView_OnNavigating" Navigated="WebView_OnNavigated" />
        <ContentView x:Name="Placeholder" AbsolueLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <!-- Whatever you'd like to display as a placeholder -->
        </ContentView>
    </AbsoluteLayout>
</ContentPage>

并实现在代码中显示和隐藏占位符

public partial class MyPage : ContentPage
{
    // constructor elided

    public void WebView_OnNavigating(object seender, EventArgs e)
    {
        Placeholder.IsVisible = true;
    }

    public void WebView_OnNavigated(object seender, EventArgs e)
    {
        Placeholder.IsVisible = false;
    }
}

当您导航到网站时，会调用WebView_OnNavigating并显示占位符。 WebView加载完毕后，系统会调用WebView_OnNavigated并隐藏播放器。

说明：

我个人不会这样实现它，但是使用行为将事件转换为命令并将它们绑定到viewmodel，从那里更改IsBusyLoading属性并将其绑定到占位符的可见性
除非完全加载页面，否则不会调用AFAIK OnNavigated。我看到网站由于一些错误而无法加载，这会导致占位符永久显示。在这种情况下，AnctivityIndicator上方或上方显示的WebView可能是更好的用户体验，因为用户实际上会看到已经加载的页面部分。

如何在Xamarin WebView中显示占位符内容

1 个答案: