微信小程序在web-view頁(yè)面增加一個(gè)按鈕具體代碼
需求:
在微信小程序中通過(guò)web-view打開(kāi)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)這里
開(kāi)發(fā)中遇到的問(wèn)題
該方法在微信開(kāi)發(fā)者工具中不顯示效果,只能在真機(jī)上才能看到,一定要在真機(jī)上看效果
具體代碼
wxml中寫(xiě)法
<web-view class="" src="{{outUrl}}">
<cover-view class="footer">
<cover-view class="button_box" bindtap="nextStep1">
下一步
</cover-view>
</cover-view>
</web-view>wxss中寫(xiě)法
.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)緩動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)緩動(dòng)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript中Reflect的常用方法及注意事項(xiàng)
Reflect是Javascript中的一個(gè)內(nèi)置對(duì)象,它提供了一組用于操作對(duì)象的方法,可以看做是Object對(duì)象的補(bǔ)充,這篇文章主要介紹了JavaScript中Reflect的常用方法及注意事項(xiàng),需要的朋友可以參考下2025-09-09
這篇文章主要介紹了javascript進(jìn)行四舍五入方法匯總，并給出了相關(guān)示例,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了js中hash和ico的關(guān)聯(lián)分析,以實(shí)例形式分析了location.hash與ico的加載順序關(guān)系,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
基于canvas實(shí)現(xiàn)超炫酷的流水燈效果
這篇文章主要為大家詳細(xì)介紹了基于canvas實(shí)現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
js實(shí)現(xiàn)復(fù)選框的全選和取消全選效果
在很多網(wǎng)站都有這樣的功能，當(dāng)點(diǎn)擊一個(gè)全選按鈕之后，所有的復(fù)選框都會(huì)被選中，再點(diǎn)擊之后會(huì)取消全選，功能非常的人性化，可以省卻很多人力，本文將簡(jiǎn)單介紹一下JS如何實(shí)現(xiàn)此功能2017-01-01
微信小程序動(dòng)畫(huà)組件使用解析，類(lèi)似vue，且更強(qiáng)大
這篇文章主要介紹了微信小程序動(dòng)畫(huà)組件，類(lèi)似vue，且更強(qiáng)大使用解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js實(shí)現(xiàn)在頁(yè)面上彈出蒙板技巧簡(jiǎn)單實(shí)用
蒙板是兩個(gè)div，其中popWindow樣式的div用于遮住整個(gè)頁(yè)面并半透明，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js蒙版有所幫助2013-04-04
這篇文章主要介紹了js中如何通過(guò)父級(jí)進(jìn)行查找定位元素,需要的朋友可以參考下2014-06-06
Three.js+React實(shí)現(xiàn)3D開(kāi)放世界小游戲
本文使用?Three.js?+?React?+?CANNON?技術(shù)棧，實(shí)現(xiàn)通過(guò)滑動(dòng)屏幕控制模型在3D世界里運(yùn)動(dòng)的?Low?Poly?低多邊形風(fēng)格小游戲，感興趣的可以了解一下2022-04-04