uniapp自定義彈框的方法
本文實(shí)例為大家分享了uniapp自定義彈框,適用所有類(lèi)型,供大家參考,具體內(nèi)容如下
效果原理
利用透明頁(yè)面,點(diǎn)擊進(jìn)入當(dāng)前頁(yè)面,內(nèi)容根據(jù)自己需求去實(shí)現(xiàn),隨便自定義,出來(lái)的效果就是一個(gè)彈框的效果。解決的難題(原生tabbar中間按鈕的彈框,升級(jí)彈框不能遮擋原生tabbar)
創(chuàng)建一個(gè)vue頁(yè)面
<template> ?? ?<view @click="close()" class="mask"> ?? ??? ?<view class="content"> ?? ??? ??? ?<view class="" @click.stop="doScanCode">點(diǎn)擊掃碼</view> ?? ??? ??? ?<view class="" @click.stop="doDialog">點(diǎn)擊彈出</view> ?? ??? ?</view> ?? ?</view> </template> <script> ?? ?export default { ?? ??? ?data() { ?? ??? ??? ?return { ?? ??? ??? ??? ? ?? ??? ??? ?} ?? ??? ?}, ?? ??? ?methods: { ?? ??? ??? ?close() { ?? ??? ??? ??? ?uni.navigateBack() ?? ??? ??? ?}, ?? ??? ??? ?doDialog() { ?? ??? ??? ??? ?uni.showModal({ ?? ??? ??? ??? ??? ?title:'uniapp彈框' ?? ??? ??? ??? ?}) ?? ??? ??? ?}, ?? ??? ??? ?doScanCode() { ?? ??? ??? ??? ?uni.scanCode({ ?? ??? ??? ??? ??? ?success: function(res) { ?? ??? ??? ??? ??? ??? ?console.log('條碼類(lèi)型:' + res.scanType); ?? ??? ??? ??? ??? ??? ?console.log('條碼內(nèi)容:' + res.result); ?? ??? ??? ??? ??? ??? ?uni.navigateTo({ ?? ??? ??? ??? ??? ??? ??? ?url:'../scancode/scancode' ?? ??? ??? ??? ??? ??? ?}) ?? ??? ??? ??? ??? ?} ?? ??? ??? ??? ?}); ?? ??? ??? ?} ?? ??? ?} ?? ?} </script> <style> ?? ?page { ?? ??? ?background: transparent; ?? ?} ?? ? ?? ?.mask { ?? ??? ?position: fixed; ?? ??? ?left: 0; ?? ??? ?top: 0; ?? ??? ?right: 0; ?? ??? ?bottom: 0; ?? ??? ?/* #ifndef APP-NVUE */ ?? ??? ?display: flex; ?? ??? ?/* #endif */ ?? ??? ?justify-content: center; ?? ??? ?align-items: center; ?? ??? ?background-color: rgba(0, 0, 0, 0.4); ?? ?} ?? ? ?? ?.content { ?? ??? ?width: 200px; ?? ??? ?height: 200px; ?? ??? ?background-color: #007AFF; ?? ??? ?/* margin-bottom: 140upx; */ ?? ??? ?display: flex; ?? ??? ?justify-content: space-between; ?? ??? ?align-items: center; ?? ?} </style>
pages.json配置
{// 點(diǎn)擊tabbar中間的按鈕進(jìn)入此頁(yè)面,設(shè)置為透明的,當(dāng)做一個(gè)彈框, "path": "pages/midDialog/midDialog", ?? ?"style": { ?? ??? ?"background": "transparent", ?? ??? ?"app-plus": { ?? ??? ??? ?"titleNView": false ?? ??? ?} ?? ?} }
一般tabbar中間按鈕點(diǎn)擊出現(xiàn)彈框
// 這些是要寫(xiě)在App.vue中onLaunch里邊 uni.onTabBarMidButtonTap(() => { ?? ?uni.navigateTo({ ?? ? ? ?url: '/pages/midDialog/midDialog', ?? ? ? ?animationType: 'fade-in', ?? ? ? ?animationDuration: 200, ?? ??? ?fail(err) { ?? ??? ??? ?console.log(err) ?? ??? ?} ?? ?}); })
注意事項(xiàng)
在真機(jī)運(yùn)行下測(cè)試,在模擬器中,由于模擬器性能不完善,導(dǎo)致透明效果有時(shí)會(huì)失敗,反正app最后都是運(yùn)行在手機(jī)上,何不直接用真機(jī)運(yùn)行呢
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)
這篇文章主要介紹了ECMAScript6函數(shù)剩余參數(shù)(Rest Parameters)的相關(guān)資料,需要的朋友可以參考下2015-06-06JavaScript獲取圖片真實(shí)大小代碼實(shí)例
這篇文章主要介紹了JavaScript獲取圖片真實(shí)大小代碼實(shí)例,本文使用onload事件來(lái)獲取圖片的真實(shí)大小,需要的朋友可以參考下2014-09-09JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了javascript基于字符串長(zhǎng)度判定、數(shù)據(jù)類(lèi)型判定及正則判斷等操作進(jìn)行表單驗(yàn)證的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10微信小程序開(kāi)發(fā)之圓形菜單 仿建行圓形菜單實(shí)例
本篇文章主要介紹了微信小程序開(kāi)發(fā)之圓形菜單 仿建行圓形菜單實(shí)例,具有一定的參考價(jià)值,有需要的可以了解一下。2016-12-12