章贡区综合网站建设商家,信息技术课做网站,seo搜索引擎官网,有做自由行包车的网站效果图#xff1a; web-view是承载网页的容器。会自动铺满整个小程序页面#xff0c;个人类型的小程序暂不支持使用。 再看下面一个提示#xff1a; 每个页面只能有一个 web-view#xff0c;web-view 会自动铺满整个页面#xff0c;并覆盖其他组件。 也就是说#xff0c;…效果图 web-view是承载网页的容器。会自动铺满整个小程序页面个人类型的小程序暂不支持使用。 再看下面一个提示 每个页面只能有一个 web-viewweb-view 会自动铺满整个页面并覆盖其他组件。 也就是说小程序中使用web-view打开网页在页面上写的其它组件会直接被网页给覆盖住 需求在web-view页面添加弹窗
刚好有一个组件cover-view可以覆盖web-view
cover-view覆盖在原生组件上的文本视图。
app-vue和小程序框架渲染引擎是webview的。但为了优化体验部分组件如map、video、textarea、canvas通过原生控件实现原生组件层级高于前端组件类似flash层级高于div。为了能正常覆盖原生组件设计了cover-view。
cover-view功能描述
可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher、web-view
cover-view只支持嵌套 cover-view、cover-image可在 cover-view 中使用 button。组件属性的长度单位默认为px2.4.0起支持传入单位(rpx/px)。
也就是在cover-view中只能使用cover-view、cover-image、button三个组件
代码示例
注意checkbox按钮是图片代替的因为不能使用checkbox组件
templateviewweb-view :srcurlcover-view classmy-cover v-ifcoverIsShowcover-view classcover-boxcover-view classdescover-view classdes-text1本服务将由{{corporateName}}提供南洋商业银行中国将在您办理以下业务时将您的对应信息提供给该公司用于下述目的/cover-viewcover-view classdes-text购买商品/cover-viewcover-view classdes-text手机号码用于识别客户及查询订单/cover-viewcover-view classdes-text1{{corporateName}}服务热线{{phoneNum}}相关商品和服务包括售后均由该公司负责。/cover-view/cover-viewcover-view classnav-selectcover-view classselect-item clickcheckBoxBtncover-image clickcheckAllGouBox classimage src/static/applyAccont/check.png v-ifchackBoxIsShow/cover-imagecover-image clickcheckAllGouBox classimage src/static/applyAccont/uncheck.png v-else/cover-imagecover-view我已阅读并同意/cover-view/cover-viewcover-view classnav-privacy clickuserPrivacy《用户协议》/cover-viewcover-view和/cover-viewcover-view classnav-privacy clickagreePrivacy《隐私协议》/cover-view/cover-viewcover-view classbtnsbutton classreject clickgoBack不同意授权/buttonbutton typeprimary classagree clickconfirm已知悉同意授权/button!-- button typeprimary classagree clickconfirm :disabled!chackBoxIsShow已知悉同意授权/button --/cover-view/cover-view/cover-view/web-view/view
/templatescriptimport apiUrl from /utils/commonUrl.js;export default {data() {return {url: ,corporateName:上海xxx科技有限公司,phoneNum: 999999999,coverIsShow: false,chackBoxIsShow: false,};},onLoad() {this.url apiUrl.baseUrl t new Date().getTime()},methods: {},// 复选框点击checkBoxBtn(){this.chackBoxIsShow !this.chackBoxIsShow;},// 取消返回goBack(){uni.navigateBack({delta:1})},// 确认协议confirm(){this.$store.commit(SET_BEILIANPROVICY, 1);this.coverIsShow false},// 用户协议userPrivacy(){uni.navigateTo({url:/pages/home/beiLiAnUser})},// 隐私协议agreePrivacy(){uni.navigateTo({url:/pages/home/beiLiAnPrivacy})}}}
/scriptstyle langscss
.my-cover{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(0,0,0,.3);display: flex;align-items: center;justify-content: center;z-index: 99999;.cover-box{width: 636rpx;box-sizing: border-box;background: #fff;border-radius: 16rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;.des {font-size: 26rpx;margin-top: 40rpx;width: 560rpx;.des-text{width: 560rpx;color: #666;line-height: 48rpx;white-space: pre-wrap;text-indent: 2em;word-break:break-all;}.des-text1{width: 560rpx;white-space:pre-wrap;line-height: 48rpx;color: #333;font-weight: bold;text-indent: 2em;word-break:break-all;}}.nav-select{margin-top: 28rpx;margin-left: 10rpx;margin-right: 10rpx;font-size: 26rpx;display: flex;.select-item{display: flex;.image {width: 30rpx;height: 30rpx;margin-right: 20rpx;}}.nav-privacy{color: #1989FF;}}.btns {margin-top: 32rpx;margin-bottom: 0;display: flex;.reject {color: #333;font-size: 28rpx;background: #fff;height: 100rpx;line-height: 100rpx;font-weight: 500;width: 320rpx;border-top: 2rpx solid #eee;}.agree {color: #1989ff;font-size: 28rpx;background: #fff;height: 100rpx;line-height: 100rpx;font-weight: 500;width: 320rpx;border-top: 2rpx solid #eee;margin-left: -2rpx;}:deep(button[disabled][typeprimary]) {color: #8cc4fd !important;border-radius: 0!important;}button {border-radius: 0!important;}}}
}
/style
