Elm：加载时获取 window-width

Question

所以我在 Elm 中做了一个非常基本的登陆页面，我想根据初始屏幕尺寸确定要使用的图片，然后再调整大小。我在 Window 模块上找到了调整大小的功能，并使其工作正常，但我也不知道如何在加载时执行此操作。

我正在寻找类似的东西：

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

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

Answer 1

要在应用程序加载时获取值，您可能需要使用 Html.programWithFlags 并从 Javascript.

传递 window 大小

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 } ! []

您像这样在应用程序启动时传递标志：

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

Answer 2

您可以在没有 javascript 的情况下使用 elm-lang/window。

首先导入 Window 和 Task

您需要这样一条消息：

type Msg
  = SetWindowSize Window.Size

然后你只需初始化你的程序：

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

这将得到 window 的初始大小。

如果您想持续跟踪window尺码变化，您需要订阅Window.resizes

Elm：加载时获取 window-width

Elm: Get window-width on load

css

frontend

elm