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