欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年05月26日 11:15:46   作者：大閘蛙  
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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
 })
 },
 // 這個(gè)函數(shù)內(nèi)容為空 用于阻止屏幕滾動
 preventTouchMove: function (e) {
 },

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

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

相關(guān)文章

最新評論