uniapp 移动端嵌套H5使用swiper,swiper-item嵌套web-view组件滑动切换

uniapp 移动端嵌套H5使用swiper,swiper-item嵌套web-view组件滑动切换
  1. <swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"
  2. @animationfinish="animationfinish" class="swiper">
  3. <swiper-item class="swiper-item">
  4. <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.xxx.com">
  5. </web-view>
  6. <cover-view class="active">
  7. 我是webView
  8. </cover-view>
  9. </block>
  10. </swiper-item>
  11. </swiper>

web-view 组件在 H5端 被转成 iframe 挂载到 body 下,类似于 vue3 的 teloport,在实现时设计如此,而此时滑动的是 swiper-item 组件,所以呈现为无法左右滑动。
针对当前业务场景可以采用 iframe 标签实现您的需求。

  1. <swiper>
  2. <swiper-item>
  3. <iframe src="https://www.xxx.com"></iframe>
  4. </swiper-item>
  5. <swiper-item>
  6. <iframe src="https://www.xxx.com"></iframe>
  7. </swiper-item>
  8. <swiper-item>
  9. <iframe src="https://www.xxx.com"></iframe>
  10. </swiper-item>
  11. </swiper>

如果是WP提供的嵌套APP,则可以直接使用最上面的代码嵌入即可,如下:

  1. <swiper style="z-index: 99999;" :current="swiperCurrent" @transition="transition"
  2. @animationfinish="animationfinish" class="swiper">
  3. <swiper-item class="swiper-item">
  4. <web-view id="website-list" :webview-styles="webviewStyles" src="https://www.xxx.com">
  5. </web-view>
  6. </swiper-item>
  7. </swiper
声明:本站部分文章或资源,整理于网络或由网友提供,主要用于知识性分享与学习用途。若相关内容侵犯了原著者的合法权益,请联系处理。
Axure技术

Axure html页面中如何添加背景音乐

2022-11-2 18:27:03

技术

吊炸天——74款APP完整源码

2022-11-9 9:10:14

0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧