我想知道用户何时结束在显示条款和条件的 Web 视图上的滚动,以便仅当用户阅读此内容时才显示“接受”按钮。
<StackLayout Spacing="0" BackgroundColor="{StaticResource WhiteColor}">
<CustomView:HeaderView VerticalOptions="Start" LeftImageSource="{Binding LeftImage}" RightImageSource="{Binding RightImage}" LeftCommand="{Binding LeftClickCommand}" RightCommand="{Binding RightClickCommand}" HeaderText="{Binding ScreenTitle}" PrevText="{Localize:ETranslate PrevText}" />
<WebView Source="{Binding Html, Converter={StaticResource HtmlSourceConverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</StackLayout>
public class HtmlSourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var html = new HtmlWebViewSource();
if (value != null)
{
html.Html = value.ToString();
}
return html;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
我尝试使用 Renderer 来实现此目的,但在 iOS WkWebViewRenderer 中没有 WebViewRenderer 中可用的 Scrolled() 方法。
有什么方法可以在 Xamarin.Forms 中实现这一点吗?
WKWebView 内部有一个属性
ScrollView
,所以我们可以用它覆盖 Delegate。
[assembly: ExportRenderer(typeof(WebView), typeof(MyRenderer))]
namespace FormsA.iOS
{
public class MyDelegate : UIScrollViewDelegate
{
public override void Scrolled(UIScrollView scrollView)
{
if(scrollView.ContentOffset.Y >= scrollView.ContentSize.Height - scrollView.Frame.Size.Height)
{
//here rearch bottom
}
else if(scrollView.ContentOffset.Y < scrollView.ContentSize.Height)
{
}
}
}
public class MyRenderer: WkWebViewRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
this.ScrollView.Delegate = new MyDelegate();
}
}
}
它在我这边工作得很好,请参阅https://stackoverflow.com/a/52872317/8187800.
我也有 Android 的解决方案。这是完整的解决方案,希望这对寻找相同解决方案的人有帮助!
MyPage.xaml
<webview:ScrollWebView x:Name="webView" Source="{Binding Html, Converter={StaticResource HtmlSourceConverter}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" IsBottomReached="{Binding IsShowAgreeButton}"/>
ScrollWebView 控件
public class ScrollWebView : WebView
{
public static BindableProperty IsBottomReachedProperty =
BindableProperty.Create(nameof(IsBottomReached), typeof(bool), typeof(ScrollWebView), default(bool), BindingMode.TwoWay, propertyChanged: null);
public bool IsBottomReached
{
get
{
return (bool)GetValue(IsBottomReachedProperty);
}
set
{
SetValue(IsBottomReachedProperty, value);
}
}
}
Android:ScrollWebViewRenderer
[assembly: Xamarin.Forms.ExportRenderer(typeof(ScrollWebView), typeof(ScrollWebViewRenderer))]
namespace MyApp.Droid
{
public class ScrollWebViewRenderer : WebViewRenderer
{
public static ScrollWebView view = null;
public ScrollWebViewRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
base.OnElementChanged(e);
view = (ScrollWebView)Element;
if (Control != null)
{
Control.ScrollChange += Control_ScrollChange;
}
}
private void Control_ScrollChange(object sender, ScrollChangeEventArgs e)
{
var nativeWebView = e.V as global::Android.Webkit.WebView;
int height = (int)Math.Floor(nativeWebView.ContentHeight * nativeWebView.Scale);
int webViewheight = nativeWebView.Height;
int cutOff = height - webViewheight;
if (e.ScrollY >= cutOff)
{
view.IsBottomReached = true;
System.Diagnostics.Debug.WriteLine("Bottom Reached");
}
else
{
view.IsBottomReached = false;
}
}
}
}
iOS:ScrollWebViewRenderer
[assembly: ExportRenderer(typeof(ScrollWebView), typeof(ScrollWebViewRenderer))]
namespace MyApp.iOS.RendererClasses
{
public class ScrollWebViewRenderer : WkWebViewRenderer
{
public static ScrollWebView view = null;
public ScrollWebViewRenderer() { }
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
view = (ScrollWebView)Element;
MyDelegate myDel = new MyDelegate();
myDel.ProcessCompleted += MyDel_ProcessCompleted;
this.ScrollView.Delegate = myDel;
}
private void MyDel_ProcessCompleted(object sender, bool isScrolledToBottom)
{
view.IsBottomReached = isScrolledToBottom;
}
}
public class MyDelegate : UIScrollViewDelegate
{
public event EventHandler<bool> ProcessCompleted;
public override void Scrolled(UIScrollView scrollView)
{
if (scrollView.ContentOffset.Y >= scrollView.ContentSize.Height - scrollView.Frame.Size.Height)
{
System.Diagnostics.Debug.WriteLine("Bottom Reached");
ProcessCompleted?.Invoke(this, true);
}
else
{
ProcessCompleted?.Invoke(this, false);
}
}
}
}
实现这个答案后,https://stackoverflow.com/a/66931493/15125666我仍然遇到Android渲染器的问题,因为它没有检测到用户何时到达WebView的底部。
为了解决这个问题,您需要在计算中添加一个缓冲区,这将在将内容高度乘以比例时考虑任何潜在的浮点错误。
这里是 Android 的更新代码:ScrollWebViewRenderer
private void Control_ScrollChange(object sender, ScrollChangeEventArgs e)
{
var nativeWebView = e.V as global::Android.Webkit.WebView;
int height = (int)(nativeWebView.ContentHeight * nativeWebView.Scale);
int webViewheight = nativeWebView.Height;
int bottomThreshold = (int)Math.Floor(0.004 * webViewheight); // the number that I used 0.004 was what worked for me. you might need to adjust it for your use case.
int cutOff = height - webViewheight - bottomThreshold;
if (e.ScrollY >= cutOff)
{
view.IsBottomReached = true;
System.Diagnostics.Debug.WriteLine("Bottom Reached");
}
else
{
view.IsBottomReached = false;
}
}
这里我添加了一个动态 bottomThreshold 缓冲区,并将其用于 cutOff 计算。它在计算中添加了一个小缓冲区,以确保即使很小的差异也不会妨碍到达底部的检测。