2021-02-01微信小程序＜web-view＞页面显示按钮

最新推荐文章于 2024-07-02 17:45:32 发布

Just so so so

最新推荐文章于 2024-07-02 17:45:32 发布

阅读量1.7k

点赞数

分类专栏：微信小程序

原文链接：https://blog.youkuaiyun.com/qq_43299315/article/details/107416587?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242

版权

微信小程序专栏收录该内容

32 篇文章

订阅专栏

一、官方文档的webview官方api

1、铺满整个屏幕，不支持自定义导航。
2、不能设置宽高，直接铺满整个页面，一个页面只能有一个webview
3、层级极高，不能通过z-index改变元素属性来浮在上面。

二、解决办法 官方api只有真机才能实现效果，微信开发者工具不适用

html

<web-view src="https://720yun.com/t/a9cjvOsnOa3?scene_id=20949466">
		<cover-view class="share-button">
			<cover-view class="share-txt" >
				搭配详情
			</cover-view>
			<cover-view class="share-txt">
				商品列表
			</cover-view>
		</cover-view>
	</web-view>

css


.share-button {
  z-index: 999999;
  position: fixed;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  bottom:30rpx;
  width:60%;
  height: 72rpx;
  display: flex;
  left: 20%;
  justify-content: center;
}

.share-txt{
  width:200rpx;
height:72rpx;
box-shadow:0rpx 4rpx 6rpx 0rpx rgba(18,46,102,0.5);
border-radius:36rpx;
line-height: 72rpx;
text-align: center;
font-size: 28rpx;

}

.share-txt{
  margin-right: 40rpx;
}

样式就像一张一张的纸，叠在一起。z-index的值越大，表示纸越靠近眼睛。
所以，必须有z-index。
而 z-index 必须position才能有效果。
所以，必须有 positon属性。
使用 web-view 和 cover-view 要在外面加上 view，不加容易出错，无法显示。

推荐阅读：http://www.lht.ren/article/21/
原文链接：https://blog.youkuaiyun.com/qq_43299315/article/details/107416587?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242