swiper组件，在动态修改height值后，组件视图未更新

[490626721]

NutUI 包名

@nutui/nutui

NutUI 版本号

4.1.2

平台

h5, weapp

重现链接

https://nutui.jd.com/playground/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7cmVmfSBmcm9tIFwidnVlXCI7XG5pbXBvcnQgeyBTd2lwZXIsIFN3aXBlckl0ZW0sIFJhbmdlICB9IGZyb20gJ0BudXR1aS9udXR1aSdcbmNvbnN0IGNvbXBvbmVudHNGb3JtUmVmID0gcmVmKG51bGwpXG5jb25zdCBjb21wb25lbnRzRm9ybSA9IHJlZih7XG4gICAgdHlwZTogJ3N3aXBlcicsXG4gICAgYmdDb2xvcjogXCJyZ2JhKDI1NSwyNTUsMjU1LDApXCIsXG4gICAgcGFkZGluZ192ZXJ0aWNhbDogNCxcbiAgICBwYWRkaW5nX2hvcml6b250YWw6IDQsXG4gICAgY29udGVudDoge1xuICAgICAgICBoZWlnaHQ6IDMwMCxcbiAgICAgICAgZGlyZWN0aW9uOiBcImhvcml6b250YWxcIixcbiAgICAgICAgcGFnaW5hdGlvbl92aXNpYmxlOiAxLFxuICAgICAgICBwYWdpbmF0aW9uX2NvbG9yOiBcInJnYigyNTUsMTA2LDApXCIsXG4gICAgICAgIGxvb3A6IDEsXG4gICAgICAgIGR1cmF0aW9uOiAxMDAsXG4gICAgICAgIGF1dG9fcGxheTogMjAwLFxuICAgICAgICBzd2lwZXI6IFtcbiAgICAgICAgICAgICAgICAgICAgICAgIHsgaW1nOiBcImh0dHBzOi8vcDEtYXJjby5ieXRlaW1nLmNvbS90b3MtY24taS11d2JubGlwM3lkL2NkN2ExYWFlYThlMWM1ZTNkMjZmZTI1OTFlNTYxNzk4LnBuZ350cGx2LXV3Ym5saXAzeWQtd2VicC53ZWJwXCIsIGxpbms6IFwiXCJ9LFxuICAgICAgICAgICAgICAgICAgICAgICAgeyBpbWc6IFwiaHR0cHM6Ly9wMS1hcmNvLmJ5dGVpbWcuY29tL3Rvcy1jbi1pLXV3Ym5saXAzeWQvNjQ4MGRiYzY5YmUxYjVkZTk1MDEwMjg5Nzg3ZDY0ZjEucG5nfnRwbHYtdXdibmxpcDN5ZC13ZWJwLndlYnBcIiwgbGluazogXCJcIn0sXG4gICAgICAgICAgICAgICAgICAgICAgICB7IGltZzogXCJodHRwczovL3AxLWFyY28uYnl0ZWltZy5jb20vdG9zLWNuLWktdXdibmxpcDN5ZC8wMjY1YTA0ZmRkYmQ3N2ExOTYwMmExNWQ5ZDU1ZDc5Ny5wbmd+dHBsdi11d2JubGlwM3lkLXdlYnAud2VicFwiLCBsaW5rOiBcIlwifSxcbiAgICAgICBdXG4gICAgfVxufSlcbmNvbnN0IG9uQ2hhbmdlID0gKHZhbHVlKSA9PiB7XG4gIGNvbXBvbmVudHNGb3JtLnZhbHVlLmNvbnRlbnQuaGVpZ2h0ID0gdmFsdWVcbn1cbjwvc2NyaXB0PlxuPHRlbXBsYXRlPlxuICAgIDxkaXYgc3R5bGU9XCJwYWRkaW5nOiA0MHB4O2JhY2tncm91bmQtY29sb3I6cmdiYSgwLDAsMCwwLjEpO1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGl0bGVcIiBzdHlsZT1cIm1hcmdpbi1ib3R0b206IDQwcHhcIj5cbiAgICAgICAgICDova7mkq3ljaHniYfnmoTpq5jluqZcbiAgICAgICAgPC9kaXY+XG4gICAgICAgPG51dC1yYW5nZSB2LW1vZGVsPVwiY29tcG9uZW50c0Zvcm0uY29udGVudC5oZWlnaHRcIiA6bWF4PVwiNjAwXCIgOm1pbj1cIjEwMFwiIEBjaGFuZ2U9XCJvbkNoYW5nZVwiPjwvbnV0LXJhbmdlPlxuICBcdDwvZGl2PlxuXG4gXHRcdDxudXQtc3dpcGVyXHRcbiAgICAgICAgOmluaXQtcGFnZT1cIjBcIlxuICAgICAgICA6aGVpZ2h0PVwiY29tcG9uZW50c0Zvcm0uY29udGVudC5oZWlnaHRcIlxuICAgICAgICA6ZGlyZWN0aW9uPVwiY29tcG9uZW50c0Zvcm0uY29udGVudC5kaXJlY3Rpb25cIlxuICAgICAgICA6cGFnaW5hdGlvbi12aXNpYmxlPVwiY29tcG9uZW50c0Zvcm0uY29udGVudC5wYWdpbmF0aW9uX3Zpc2libGUgPT09IDFcIlxuICAgICAgICA6cGFnaW5hdGlvbi1jb2xvcj1cImNvbXBvbmVudHNGb3JtLmNvbnRlbnQucGFnaW5hdGlvbl9jb2xvclwiXG4gICAgICAgIDpsb29wPVwiY29tcG9uZW50c0Zvcm0uY29udGVudC5sb29wID09PSAxXCJcbiAgICAgICAgOmR1cmF0aW9uPVwiY29tcG9uZW50c0Zvcm0uY29udGVudC5kdXJhdGlvblwiXG4gICAgICAgIDphdXRvX3BsYXk9XCJjb21wb25lbnRzRm9ybS5jb250ZW50LmF1dG9fcGxheVwiXG4gICAgICAgIEBjaGFuZ2U9XCJwYWdlQ2hhbmdlXCJcbiAgICA+XG4gICAgICAgIDxudXQtc3dpcGVyLWl0ZW0gY2xhc3M9XCJudXQtc3dpcGVyLWl0ZW1cIiB2LWZvcj1cIihpdGVtLCBpbmRleCkgaW4gY29tcG9uZW50c0Zvcm0uY29udGVudC5zd2lwZXJcIiA6a2V5PVwiaW5kZXhcIj5cbiAgICAgICAgICAgIDxpbWcgOnNyYz1cIml0ZW0uaW1nXCIvPlxuICAgICAgICA8L251dC1zd2lwZXItaXRlbT5cbiAgICA8L251dC1zd2lwZXI+XG48L3RlbXBsYXRlPiJ9

重现步骤

`<nut-swiper
                :init-page="0"
                :height="componentsForm.content.height"
                :direction="componentsForm.content.direction"
                :pagination-visible="componentsForm.content.pagination_visible === 1"
                :pagination-color="componentsForm.content.pagination_color"
                :loop="componentsForm.content.loop === 1"
                :duration="componentsForm.content.duration"
                :auto_play="componentsForm.content.auto_play"
                @change="pageChange"
            >
                <nut-swiper-item class="nut-swiper-item" v-for="(item, index) in componentsForm.content.swiper" :key="index">
                    <img :src="item.img"/>
                </nut-swiper-item>
            </nut-swiper>`

当动态修改componentsForm.content.height的值后，swiper未按预期更新视图

期望的结果是什么？

能动态根据height的值组件动态显示，也可以用一个重新渲染该组件的接口

实际的结果是什么？

无法动态渲染swiper的高度

环境信息

System:
OS: Windows 10 10.0.19044
CPU: (8) x64 Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz
Memory: 6.75 GB / 15.94 GB
Binaries:
Node: 16.17.0 - D:\NodeJS\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.15.0 - D:\NodeJS\npm.CMD
pnpm: 7.18.2 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (115.0.1901.203)
Internet Explorer: 11.0.19041.1566
npmPackages:
@nutui/nutui: ^4.1.2 => 4.1.2

其他补充信息

另外还有个小建议，目前如果图片宽度小于屏幕宽度，图片会保持比例缩放不能铺满，建议图片拉伸铺满；

[yi-boide]

图片拉伸铺满；可以通过自己设置图片的样式完成，width: 100%, height: 100%
还可以通过给图片设置：object-fit: cover；保持缩放比例不拉伸变形，显示中间区域
给图片设置样式可以参考demo里面的设置