快捷導(dǎo)航

微信小程序自定義彈出層效果

更新時間：2020年05月26日 11:15:46 作者：大閘蛙

這篇文章主要為大家詳細(xì)介紹了微信小程序自定義彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)彈出層效果的具體代碼，供大家參考，具體內(nèi)容如下

效果圖

WXML

<view class='popup' wx:if="{{popShow}}">
 <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'>
 </view>
 <!-- 彈出層 -->
  <view class='popup_main' id='popup_main' >
 <!-- 關(guān)閉按鈕 -->
  <view class='close_wrapper'>
   <image class='close_icon' src='/images/select_icons/close.png' mode='widthFix' bindtap='closePop'></image>
  </view>
 <!-- 主要內(nèi)容 -->
  <view class='pop_list_wrapper'>這里加入你想加入的內(nèi)容</view>
  </view>
</view>

WXSS

.popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
 }
 .mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
 }
 .popup_main {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border: 5px;
  border-radius: 10px;
 }
 .close_wrapper {
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
 }
 .close_icon {
  width: 16px;
 }

JS

data: {
/** 彈出層 **/
 popShow: false,
}

 /**
 * 彈出層
 */

 // 打開彈窗
 popupTap: function (e) {
 this.setData({
  popShow: true
 })
 },
 // 關(guān)閉彈窗
 closePop: function (e) {
 this.setData({
  popShow: false
 })
 },
 // 這個函數(shù)內(nèi)容為空 用于阻止屏幕滾動
 preventTouchMove: function (e) {
 },

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js異步上傳多張圖片插件的使用方法
這篇文章主要為大家詳細(xì)介紹了js異步上傳多張圖片插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
uniapp打包成微信小程序的詳細(xì)過程
微信小程序的出現(xiàn)給我們提供了一種使用應(yīng)用的新方式和體驗,下面這篇文章主要給大家介紹了關(guān)于uniapp打包成微信小程序的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
location.href 在IE6中不跳轉(zhuǎn)的解決方法與推薦使用代碼
在js中，我們經(jīng)常使用location.href來實(shí)現(xiàn)頁面的跳轉(zhuǎn)，為了方便我們寫成函數(shù)。下面就分別說明下，下面的一些代碼的實(shí)現(xiàn)問題。
2010-07-07
JavaScript與ActionScript3兩者的同性與差異性
接觸JavaScript和ActionScript3也有近5年的時間了，它們都是應(yīng)用比較廣泛的腳本語言.接下來通過本文給大家介紹JavaScript與ActionScript3兩者的同性與差異性，感興趣的朋友一起學(xué)習(xí)吧
2016-09-09
JS實(shí)現(xiàn)常見的查找、排序、去重算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)常見的查找、排序、去重算法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript線性查找、二分查找、遞歸查找、數(shù)組去重、冒泡拍戲、快速排序?qū)崿F(xiàn)技巧,需要的朋友可以參考下
2018-05-05
js中class的點(diǎn)擊事件沒有效果的解決方法
下面小編就為大家?guī)硪黄猨s中class的點(diǎn)擊事件沒有效果的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
前端判斷頁面是在PC端還是移動端打開四種方法
本文介紹幾種在前端開發(fā)中用于判斷用戶設(shè)備類型（PC端或移動端）的方法,包括使用navigator.userAgent、媒體查詢、第三方庫detect.js和Vue框架插件vue-device-detect,這些方法有助于在開發(fā)中處理設(shè)備適配和頁面權(quán)限問題,需要的朋友可以參考下
2024-10-10
javascript輕松控制表格列樣式的腳本代碼
javascript輕松控制表格列樣式的腳本代碼通過遍歷table表格元素并動態(tài)設(shè)置其class屬性,實(shí)現(xiàn)表格樣式動態(tài)控制的功能,需要的朋友可以參考一下
2007-12-12
JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下
2019-02-02
js定時器(執(zhí)行一次、重復(fù)執(zhí)行)
這篇文章主要分享一段js代碼，有關(guān)js定時器的小例子，分為執(zhí)行一次的定時器與重復(fù)執(zhí)行的定時器,需要的朋友可以參考下
2014-03-03