微信小程序在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实现缓动动画
这篇文章主要为大家详细介绍了js实现缓动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
JavaScript中Reflect的常用方法及注意事项
Reflect是Javascript中的一个内置对象,它提供了一组用于操作对象的方法,可以看做是Object对象的补充,这篇文章主要介绍了JavaScript中Reflect的常用方法及注意事项,需要的朋友可以参考下
2025-09-09
javascript进行四舍五入方法汇总
这篇文章主要介绍了javascript进行四舍五入方法汇总，并给出了相关示例,需要的朋友可以参考下
2014-12-12
js中hash和ico的关联分析
这篇文章主要介绍了js中hash和ico的关联分析,以实例形式分析了location.hash与ico的加载顺序关系,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
基于canvas实现超炫酷的流水灯效果
这篇文章主要为大家详细介绍了基于canvas实现超炫酷的流水灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
js实现复选框的全选和取消全选效果
在很多网站都有这样的功能，当点击一个全选按钮之后，所有的复选框都会被选中，再点击之后会取消全选，功能非常的人性化，可以省却很多人力，本文将简单介绍一下JS如何实现此功能
2017-01-01
微信小程序动画组件使用解析，类似vue，且更强大
这篇文章主要介绍了微信小程序动画组件，类似vue，且更强大使用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
js实现在页面上弹出蒙板技巧简单实用
蒙板是两个div，其中popWindow样式的div用于遮住整个页面并半透明，感兴趣的朋友可以参考下哈，希望对你学习js蒙版有所帮助
2013-04-04
js中通过父级进行查找定位元素
这篇文章主要介绍了js中如何通过父级进行查找定位元素,需要的朋友可以参考下
2014-06-06
Three.js+React实现3D开放世界小游戏
本文使用 Three.js + React + CANNON 技术栈，实现通过滑动屏幕控制模型在3D世界里运动的 Low Poly 低多边形风格小游戏，感兴趣的可以了解一下
2022-04-04