微信小程序在web-view页面增加一个按钮具体代码

更新时间：2023年10月08日 15:44:16 作者：樵得樵眼笑眉舒

web-view是一个可以用来承载网页的容器,会自动铺满整个小程序页面,这篇文章主要给大家介绍了关于微信小程序在web-view页面增加一个按钮的具体代码,需要的朋友可以参考下

需求:

在微信小程序中通过web-view打开H5页面,需要小程序端在页面中增加一个可以请求接口的按钮

实现方法

通过在web-view中嵌套cover-view标签来实现(注意: cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button,但是本人在里面使用button标签时,对button添加样式无效,最终采用cover-view充当按钮)

cover-view的官方描述: 点这里

开发中遇到的问题

该方法在微信开发者工具中不显示效果,只能在真机上才能看到,一定要在真机上看效果

具体代码

wxml中写法

<web-view  class="" src="{{outUrl}}">
      <cover-view class="footer">
        <cover-view class="button_box" bindtap="nextStep1">
            下一步
        </cover-view>
      </cover-view>
 </web-view>

wxss中写法

.footer {
  position: fixed;
  bottom: 100px;
  left: 50%;
  /* color: red; */
  z-index: 999999999;
  transform: translateX(-50%);
}
.button_box {
  height: 30px;
  line-height: 30px;
  width: 200px;
  text-align: center;
  border-radius: 8px;
  color: #ffffff;
  /* background: linear-gradient(90deg, #FF2E2E 0%, #FA6E4D 100%); */
  background-color: #FF2E2E;
  opacity: 0.6;
  margin: 10px 0;
}

总结

方法不难,重点就是要使用cover-view标签,一定要给 position: fixed;样式,层级越高越好,再一个就是需要在真机查看效果,调整样式有点麻烦.

到此这篇关于微信小程序在web-view页面增加一个按钮的文章就介绍到这了,更多相关微信小程序web-view增加按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现的map方法示例代码
本文为大家介绍下使用js实现的map方法，具体示例如下，喜欢的朋友可以了解下
2014-01-01
Javascript 字符串模板的简单实现
这篇文章给大家描述的是如何一步步简单的实现Javascript 字符串模板，对于初学javascript的菜鸟们来说应该是篇不错的文章，希望对大家能够有所帮助。
2016-02-02
利用Pjax下载动态加载插件方案分享
在纯静态网站里，有时候会动态更新某个区域往会选择 Pjax（swup、barba.js）去处理。本文主要和大家分享下Pjax下载动态加载插件方案，感兴趣的可以了解一下
2022-09-09
js获取当前页的URL与window.location.href简单方法
下面小编就为大家带来一篇js获取当前页的URL与window.location.href简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
JS实现下拉框的动态添加(附效果)
页面初加载时：选择车类型后：选择车颜色后：JS实现下拉框的动态添加，网页代码如下：动态添加下拉框车类型：请选择宝马、奔驰车颜色
2013-04-04
js中reverse函数的用法详解
本篇文章主要是对js中reverse函数的用法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
JavaScript实现excel文件导入导出
这篇文章主要介绍了JavaScript实现excel文件导入导出,文件的导入导出是非常常见的需求功能，excel文件的导入导出更为常见，实践中许多时候，是调用接口实现导入导出的,具体实现内容需要的小伙伴可以参考一下
2022-06-06
深入浅析js原型链和vue构造函数
这篇文章主要介绍了js原型链和vue构造函数的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2018-10-10
canvas 画布在主流浏览器中的尺寸限制详细介绍
这篇文章主要介绍了canvas 画布在主流浏览器中的尺寸限制详细介绍的相关资料,canvas在不同浏览器下面有不同的最大尺寸限制，这里测试下，需要的朋友可以参考下
2016-12-12
js 复制或插入Html的实现方法小结
很多情况下是用innerHTML或innerText,现在比较流行直接的dom操作，大家可以根据需要选择。
2010-05-05