微信小程序在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增加按钮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解JavaScript如何准确获取任意变量的数据类型
js是弱类型语言，或者说是动态语言，在定义变量时我们可以不提前声明变量的类型，也可以在变量声明后赋予不同类型的值。所以本文为大家详解一下JavaScript如何准确获取任意变量的数据类型，需要的可以参考一下
2022-06-06
微信小程序实现移动端滑动分页效果（ajax）
这篇文章主要为大家详细介绍了微信小程序实现移动端滑动分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JavaScript逆向分析instagram登入过程
这篇文章主要介绍了JavaScript逆向分析instagram登入过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
gojs实现蚂蚁线动画效果
这篇文章介绍了gojs实现蚂蚁线动画效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
javascript 利用arguments实现可变长参数
在C#中，有可变长参数params[]，但是在js中，如何实现这种可变参数呢？本片文章主要介绍利用arguments，实现可变长参数。有需要的请参考下
2016-11-11
javascript设计模式之迭代器模式
这篇文章主要为大家详细介绍了javascript设计模式之迭代器模式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
基于iScroll实现下拉刷新和上滑加载效果
这篇文章主要为大家详细介绍了基于iScroll实现下拉刷新和上滑加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
layui当点击文本框时弹出选择框,显示选择内容的例子
今天小编就为大家分享一篇layui当点击文本框时弹出选择框,显示选择内容的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
微信小程序弹窗输入组件的实现解析
这篇文章主要介绍了微信小程序弹窗输入组件的实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
微信小程序绘制图片发送朋友圈
这篇文章主要为大家详细介绍了微信小程序绘制图片发送朋友圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07