原生微信小程序?qū)崿F(xiàn)彈出層效果

2年前作者：超級(jí)小的大杯檸檬水分類：Toy博客閱讀(25)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了原生微信小程序?qū)崿F(xiàn)彈出層效果。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

原生微信小程序?qū)崿F(xiàn)彈出層效果

購物車彈出層

WXML

<view class="popupView" wx:if="{{ popupView }}">
    <!-- 遮罩區(qū)域，點(diǎn)擊隱藏彈出層 -->
    <view class="close" bindtap="changePopupView"></view> 
    <!-- 內(nèi)容區(qū) -->
    <view class="content">
        內(nèi)容區(qū)
    </view>
</view>

JS

// pages/food/foodlist/foodlist.js
Page({
    data: {
        popupView:false
    },
    changePopupView(){
        this.setData({popupView:!this.data.popupView})
    }
})

WXSS

.popupView{
    width: 100vw;
    height: calc(100vh - 50px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    overflow: hidden;
}
.popupView .close{
    flex-grow: 1;
    background-color: rgba(41, 41, 41, 0.699);
}
.popupView .content{
    background-color: #f5f5f5;
    padding: 15rpx;
}

效果圖

微信小程序彈出層,原生微信小程序,微信小程序,小程序文章來源地址http://www.zghlxwxcb.cn/news/detail-597147.html

到了這里，關(guān)于原生微信小程序?qū)崿F(xiàn)彈出層效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

微信小程序第五篇：頁面彈出效果及共享元素動(dòng)畫
系列文章傳送門：微信小程序第一篇：自定義組件詳解微信小程序第二篇：七種主流通信方法詳解微信小程序第三篇：獲取頁面節(jié)點(diǎn)信息微信小程序第四篇：生成圖片并保存到手機(jī)相冊(cè) 目錄一、page-caontainer 實(shí)現(xiàn)假頁彈出二、share-element 實(shí)現(xiàn)共享元素動(dòng)畫首先我們先看一
2024年02月09日
瀏覽(21)
uniapp - [微信小程序平臺(tái)] 實(shí)現(xiàn)輸入支付密碼鍵盤彈框，uniapp小程序端底部彈起密碼輸入鍵盤組件效果，類似電商平臺(tái)支付密碼、彈出支付密碼輸入框、交易密碼（詳細(xì)示例源碼，一鍵復(fù)制開箱即用?。?/a>
在uniapp微信小程序端平臺(tái)，詳細(xì)實(shí)現(xiàn)底部彈出輸入支付密碼框組件，自定義密碼輸入框鍵盤功能（密碼自動(dòng)帶星號(hào)、黑點(diǎn)保護(hù)隱私，自定義數(shù)字鍵盤），類似電商在付款時(shí)輸入支付密碼的組件。直接復(fù)制組件源碼，改下樣式就能用了。復(fù)制運(yùn)行即可查看效果。
2024年02月03日
瀏覽(295)
微信小程序?qū)崿F(xiàn)氣泡彈出框
這個(gè)組件可以實(shí)現(xiàn) 引用別人的組件，上面github可以很好的實(shí)現(xiàn)氣泡彈窗效果 show:function(){ //如果show值為true，則更改為false 反之設(shè)置true if(this.data.show){ this.setData({ show:false }) }else{ this.setData({ show:true }) } }, he(){ console.log(“sadasdd”) this.setData({ show:!this.show }) wx.navigateTo({ url: ‘/p
2024年02月09日
瀏覽(29)
微信小程序?qū)崿F(xiàn)翻效果
最近要在微信小程序里實(shí)現(xiàn)一個(gè)類似翻頁的場(chǎng)景，網(wǎng)上翻看了多個(gè)案例無非就兩種實(shí)現(xiàn)，第一種通過css 3d變換+動(dòng)畫實(shí)現(xiàn)，第二使用Turn.js現(xiàn)成庫。前者實(shí)現(xiàn)效果一般，后者js庫是基于古老的JQuery來實(shí)現(xiàn)的并沒辦法移植到小程序了里。下面就自己調(diào)研了一下turnjs來實(shí)現(xiàn)小程序的
2024年02月12日
瀏覽(25)
微信小程序開發(fā)uni-popup彈出層觸摸穿透問題解決
問題現(xiàn)象： ? ? ? ?目前小程序彈出層穿透有兩種問題：第一種：小程序彈出層不滾動(dòng)的時(shí)候，往上下拉時(shí)會(huì)連頁面一起拉動(dòng)，這個(gè)用戶體驗(yàn)性很差的。解決辦法一：在uni-popup標(biāo)簽中，增加catchtouchmoves屬性?，就ok了～ Tip：在微信開發(fā)者工具上無效，只對(duì)真機(jī)有效的，所以
2024年04月15日
瀏覽(91)
微信小程序 - - - - - 瀑布流效果實(shí)現(xiàn)
對(duì)于一些小程序，關(guān)于瀑布流的需求是很正常的，瀑布流看起來確實(shí)很舒服，但是具體該如何實(shí)現(xiàn)呢？下文給出的方式是： js + css 瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)
2024年02月17日
瀏覽(18)
微信小程序——實(shí)現(xiàn)手機(jī)振動(dòng)效果
?作者簡介：2022年博客新星第八。熱愛國學(xué)的Java后端開發(fā)者，修心和技術(shù)同步精進(jìn)。 ??個(gè)人主頁：Java Fans的博客 ??個(gè)人信條：不遷怒，不貳過。小知識(shí)，大智慧。 ??當(dāng)前專欄：微信小程序?qū)W習(xí)分享 ?特色專欄：國學(xué)周更-心性養(yǎng)成之路 ??本文內(nèi)容：微信小程序——實(shí)
2024年02月15日
瀏覽(23)
微信小程序實(shí)現(xiàn)進(jìn)度條效果
微信小程序中的原生進(jìn)度條組件（Progress）只能顯示一種進(jìn)度狀態(tài)，但有時(shí)我們需要展示多種狀態(tài)，比如預(yù)算已使用與本次申請(qǐng)的進(jìn)度。為了實(shí)現(xiàn)這一功能，我采用了 canvas 來繪制多種狀態(tài)的進(jìn)度條。記錄下小程序原生組件 Progress 的單狀態(tài)使用，以及通過 canvas 實(shí)現(xiàn)多狀態(tài)進(jìn)度
2024年04月17日
瀏覽(36)
【微信小程序】實(shí)現(xiàn)點(diǎn)擊+號(hào)彈出一個(gè)附著旁邊的彈窗進(jìn)行多個(gè)方式的選擇
在微信小程序中，你可以使用小程序的組件和事件來實(shí)現(xiàn)點(diǎn)擊+號(hào)彈出一個(gè)附著在+號(hào)旁邊的彈窗，以進(jìn)行多個(gè)方式的選擇。以下是一個(gè)示例代碼：在wxml文件中，創(chuàng)建一個(gè)按鈕，并為按鈕綁定一個(gè)點(diǎn)擊事件：在上述代碼中，我們創(chuàng)建了一個(gè)按鈕，用于展示+號(hào)圖標(biāo)，并給按鈕綁
2024年02月14日
瀏覽(19)
微信小程序?qū)崿F(xiàn)翻書效果
最近要在微信小程序里實(shí)現(xiàn)一個(gè)類似翻頁的場(chǎng)景，網(wǎng)上翻看了多個(gè)案例無非就兩種實(shí)現(xiàn)，第一種通過css 3d變換+動(dòng)畫實(shí)現(xiàn)，第二使用Turn.js現(xiàn)成庫。前者實(shí)現(xiàn)效果一般，后者js庫是基于古老的JQuery來實(shí)現(xiàn)的并沒辦法移植到小程序了里。下面就自己調(diào)研了一下turnjs來實(shí)現(xiàn)小程序的
2024年02月10日
瀏覽(154)