微信小程序webview中使用cover-view展示分享弹窗
公司业务需要在webview中添加分享弹窗,可以发送给朋友及生成海报分享,因为好几个详情都需要这个功能,因此抽离了share-sheet的组件,ui效果如下图:
点击分享,显示以下弹窗
share-sheet.wxml如下:
<cover-view class="share-sheet-container" hidden="{{!show}}" catchtouchmove="poptouchmove">
<cover-view class="shade"></cover-view>
<cover-view class="content">
<button class="row share-friend-btn border-bottom" open-type="share" hover-class="none">发送给朋友</button>
<cover-view class="row create-poster-btn" catchtap="createPosterAction">生成海报</cover-view>
<cover-view class="row quick-btn" catchtap="quickAction">取消</cover-view>
</cover-view>
<cover-view class="palceholder"></cover-view>
</cover-view>
share-sheet.js如下:
Component({
options: {
addGlobalClass: true,
},
/**
* 组件的属性列表
*/
properties: {
//控制弹窗显示与否
show: {
type: Boolean,
value: false,
},
//分享数据
shareData: {
type: Object,
value: null,
},
},
data: {
showPreviewPoster: false, //是否显示生成的海报弹窗
poster: '', //生成的海报路径 用来判断是否可以点击生成海报
clickCreatePosterBtn: false, // 是否点击了生成海报按钮 用来判断在没有海报时点击生成海报 带海报完善后直接显示海报预览弹窗
},
/**
* 组件的方法列表
*/
methods: {
//阻止滑动事件 防止page滑动
poptouchmove: function () {
return false;
},
//点击去掉按钮
quickAction() {
this.data.show = false;
this.setData({
show: false,
});
},
//点击生成海报按钮
createPosterAction() {
this.setData({
show: false,
});
if (!this.data.poster) {
this.setData({
clickCreatePosterBtn: true,
});
return false;
}
this.setData({
showPreviewPoster: true,
clickCreatePosterBtn: false,
});
},
setPosterStatus(e) {
this.setData({
poster: e.detail,
});
},
},
});
share-sheet.less如下:文章来源:https://www.toymoban.com/news/detail-501100.html
.share-sheet-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
.shade {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
.palceholder {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #fff;
height: 40rpx;
box-sizing: content-box;
padding-bottom: env(safe-area-inset-bottom);
z-index: 2;
}
.content {
position: absolute;
padding-bottom: env(safe-area-inset-bottom);
left: 0;
right: 0;
bottom: 0;
background: #f2f2f2;
border-radius: 40rpx;
z-index: 3;
overflow: hidden;
}
.row {
display: block;
height: 112rpx;
line-height: 111rpx;
font-size: 34rpx;
color: #000;
text-align: center;
background: #fff;
&.share-friend-btn {
border: none;
margin-bottom: 1px;
}
}
.quick-btn {
margin-top: 16rpx;
}
}
注意的点:
一下均为真机测试,实际情况可能会随着时间改变,请注意自测文章来源地址https://www.toymoban.com/news/detail-501100.html
- webview上添加结构只能使用cover-view,想要显示出来需要用fixed/absolute定位,且不能使用hidden,可以直接显示或者使用wx:if
- cover-view支持flex布局
- cover-image不支持svg格式图片
- cover-view 不支持background-image,不支持iconfont图标
- cover-view中button须有文本,否则不显示
- cover-view不支持设置单边的border,ui弹窗只有上面有圆角我的处理方式是在下面写个空的cover-view定位填充
- cover-view支持overflow-y, 但是不支持over-flow:auto, 滚动本身不会引起穿透
到了这里,关于微信小程序 webview页面分享弹窗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!