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

一、官方文档的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.csdn.net/qq_43299315/article/details/107416587?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值