微信小程序在web-view頁(yè)面增加一個(gè)按鈕具體代碼
需求:
在微信小程序中通過(guò)web-view打開H5頁(yè)面,需要小程序端在頁(yè)面中增加一個(gè)可以請(qǐng)求接口的按鈕
實(shí)現(xiàn)方法
通過(guò)在web-view中嵌套cover-view標(biāo)簽來(lái)實(shí)現(xiàn)(注意: cover-view只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button,但是本人在里面使用button標(biāo)簽時(shí),對(duì)button添加樣式無(wú)效,最終采用cover-view充當(dāng)按鈕)
cover-view的官方描述: 點(diǎn)這里
開發(fā)中遇到的問題
該方法在微信開發(fā)者工具中不顯示效果,只能在真機(jī)上才能看到,一定要在真機(jī)上看效果
具體代碼
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;
}總結(jié)
方法不難,重點(diǎn)就是要使用cover-view標(biāo)簽,一定要給 position: fixed;樣式,層級(jí)越高越好,再一個(gè)就是需要在真機(jī)查看效果,調(diào)整樣式有點(diǎn)麻煩.
到此這篇關(guān)于微信小程序在web-view頁(yè)面增加一個(gè)按鈕的文章就介紹到這了,更多相關(guān)微信小程序web-view增加按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文為大家介紹下使用js實(shí)現(xiàn)的map方法，具體示例如下，喜歡的朋友可以了解下2014-01-01
Javascript 字符串模板的簡(jiǎn)單實(shí)現(xiàn)
這篇文章給大家描述的是如何一步步簡(jiǎn)單的實(shí)現(xiàn)Javascript 字符串模板，對(duì)于初學(xué)javascript的菜鳥們來(lái)說(shuō)應(yīng)該是篇不錯(cuò)的文章，希望對(duì)大家能夠有所幫助。2016-02-02
在純靜態(tài)網(wǎng)站里，有時(shí)候會(huì)動(dòng)態(tài)更新某個(gè)區(qū)域往會(huì)選擇?Pjax（swup、barba.js）去處理。本文主要和大家分享下Pjax下載動(dòng)態(tài)加載插件方案，感興趣的可以了解一下2022-09-09
js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js獲取當(dāng)前頁(yè)的URL與window.location.href簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
JS實(shí)現(xiàn)下拉框的動(dòng)態(tài)添加(附效果)
頁(yè)面初加載時(shí)：選擇車類型后：選擇車顏色后：JS實(shí)現(xiàn)下拉框的動(dòng)態(tài)添加，網(wǎng)頁(yè)代碼如下：動(dòng)態(tài)添加下拉框 車類型：請(qǐng)選擇寶馬、奔馳 車顏色2013-04-04
本篇文章主要是對(duì)js中reverse函數(shù)的用法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出
這篇文章主要介紹了JavaScript實(shí)現(xiàn)excel文件導(dǎo)入導(dǎo)出,文件的導(dǎo)入導(dǎo)出是非常常見的需求功能，excel文件的導(dǎo)入導(dǎo)出更為常見，實(shí)踐中許多時(shí)候，是調(diào)用接口實(shí)現(xiàn)導(dǎo)入導(dǎo)出的,具體實(shí)現(xiàn)內(nèi)容需要的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了js原型鏈和vue構(gòu)造函數(shù)的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了canvas 畫布在主流瀏覽器中的尺寸限制詳細(xì)介紹的相關(guān)資料,canvas在不同瀏覽器下面有不同的最大尺寸限制，這里測(cè)試下，需要的朋友可以參考下2016-12-12
js 復(fù)制或插入Html的實(shí)現(xiàn)方法小結(jié)
很多情況下是用innerHTML或innerText,現(xiàn)在比較流行直接的dom操作，大家可以根據(jù)需要選擇。2010-05-05