时间戳

首页 > 解决方案 > R闪亮的移动应用程序：防止PullToRefresh

android - R闪亮的移动应用程序：防止PullToRefresh

问题描述

上下文：我正在使用shinyMobile包开发一个移动 Shiny 应用程序，它是著名的 framework7 HTML 模板的包装器。

在我的应用程序中，用户必须使用多个下拉列表在第一个选项卡上选择属性，然后在其他选项卡上生成一些输出。每个选项卡都需要用户上下滚动才能访问所有内容，在此过程中，通常会触发“拉动刷新”功能。

这真的很烦人，因为整个属性选择和输出都丢失了，用户不得不从头开始。

我尝试了什么：基于这个指向这个谷歌开发者页面的 SO线程，我尝试将 CSS overscroll-behavior 属性设置为with: 。问题：它对我不起作用！（在 Chrome Android 上测试）containbody {overscroll-behavior-y: contain;}

最小的可重现示例：

默认应用，部署在这里

library(shiny);library(shinyMobile)
shiny::shinyApp(
  ui = f7Page(
    f7Card(
      h5('try to pull to refresh. normally it should work.')
    )
  ),
  server = function(input, output) {}
)

据说是固定的应用程序，部署在这里

library(shiny);library(shinyMobile)
shiny::shinyApp(
  ui = f7Page(
    tags$style(type='text/css', '.body{overscroll-behavior-y: contain;}'),
    f7Card(
      h5('try to pull to refresh. Normally it should not work.')
    )
  ),
  server = function(input, output) {}
)

希望你们能重现我的问题并找出问题所在！！！

标签： androidcssrmobileshiny

解决方案

您可能希望将您的 css 部分更改为：html,body{overscroll-behavior-y: contain;}，请参阅https://stackoverflow.com/a/42509310/3502164。

然后它适用于我的手机（android chrome）。

可重现的例子：

library(shiny)
library(shinyMobile)
app <- shiny::shinyApp(
  ui = f7Page(
    tags$style(type='text/css', 'html,body{overscroll-behavior-y: contain;}'),
    f7Card(
      h5('try to pull to refresh. Normally it should not work.')
    )
  ),
  server = function(input, output) {}
)

# use host config to access app from mobiles in the same network
shiny::runApp(appDir = app, host = '0.0.0.0')

推荐阅读