首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序web-view增加按钮

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

2023-10-08 15:44:17 作者：樵得樵眼笑眉舒

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