Question

所以我在Elm做一个非常基本的登陆页面，我想根据初始屏幕大小确定要使用的图片，然后再调整大小。我在Window模块上找到了resize函数，并使其工作正常，但我也无法弄清楚如何在加载时执行它。

我正在寻找类似的东西：

initialModel : Model
initalModel model =
    {width = Window.size.width}

我最终将图片作为div上的背景图片，然后根据屏幕尺寸更改图片，但感觉不太理想。是下一个使用elm-css的最佳方式吗？我错过了一些明显的东西吗

Answer 1

要在应用加载时获取值，您可能需要使用Html.programWithFlags并从Javascript传递窗口大小。

type alias Flags =
    { windowWidth : Int }

type alias Model =
    { windowWidth : Int, ... }

main =
    Html.programWithFlags
        { init = init
        , update = update
        , subscriptions = \_ -> Sub.none
        , view = view
        }

init : Flags -> ( Model, Cmd Msg )
init flags =
    { windowWidth = flags.windowWidth } ! []

你在app启动时传递标志，如下所示：

var app = Elm.Main.fullscreen({ windowWidth: window.innerWidth })

Answer 2

您可以使用elm-lang/window在没有javascript的情况下执行此操作。

首先导入Window和Task

你需要一个这样的消息：

type Msg
  = SetWindowSize Window.Size

然后您只需使用以下命令初始化您的程序：

Html.program
  { init = ( [model], Task.perform SetWindowSize Window.size )
    ...
  }

这将获得窗口的初始大小。

如果要连续跟踪窗口大小更改，则需要订阅Window.resizes

榆树：加载窗口宽度

2 个答案: