91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序如何實現漂亮的彈窗效果

發布時間:2020-07-21 16:15:11 來源:億速云 閱讀:615 作者:小豬 欄目:web開發

這篇文章主要為大家展示了微信小程序如何實現漂亮的彈窗效果,內容簡而易懂,希望大家可以學習一下,學習完之后肯定會有收獲的,下面讓小編帶大家一起來看看吧。

最近項目里需要實現一個帶著logo的美美噠彈窗,可是翻遍小程序的文檔也只能見到wx.showModal這個丑丑的東西……
場面一度十分尷尬
可是得做啊,要不然產品大姐又要暴走了……
好吧,來研究一下模態對話框的性質自己DIY吧~

實現思路

模態對話框之所以被叫做“模態”,就是因為在它彈出的時候,用戶如果不關閉這個對話框,是無法對其他窗口進行操作的。
那么這樣一來,我們的思路就很明確了:

1. 構建一個蒙層(mask),使得背景變暗,并且阻止用戶對對話框外界面的這里寫代碼片點擊事件;
2. 構建一個對話框,在需要時彈出即可(彈出同時觸發蒙層)。

示例代碼

.wxml:

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modalDlg" wx:if="{{showModal}}">
 <image src="/figures/logo-smile.png"/>
 <text>歡迎來到模態對話框~</text>
 <button bindtap="go">點我可以關掉對話框</button>
</view>

<button bindtap="submit">點我彈窗</button>

.wxss:

.mask{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 z-index: 9000;
 opacity: 0.7;
}

.modalDlg{
 width: 580rpx;
 height: 620rpx;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 9999;
 margin: -370rpx 85rpx;
 background-color: #fff;
 border-radius: 36rpx;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.js:

Page({

 data: {
  showModal: false
 },

 submit: function() {
  this.setData({
  showModal: true
  })
 },

 preventTouchMove: function() {

 },


 go: function() { 
  this.setData({
  showModal: false
  })
 }

})

需要注意的地方

  1. 蒙層view中綁定的preventTouchMove函數是一個空函數,使用了catch事件,目的就是阻止touchmove這樣一個冒泡事件繼續向下傳遞。
  2. 蒙層的wxss樣式中,指定其大小為100%以占滿整個屏幕。
  3. 模態對話框與蒙層的wxss樣式中均有z-index屬性,為的是保證對話框始終浮在蒙層的上方(即對話框的z-index始終要比蒙層的大)

以上就是關于微信小程序如何實現漂亮的彈窗效果的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

吴江市| 安康市| 商水县| 株洲市| 应城市| 湖南省| 汉沽区| 冕宁县| 崇仁县| 巴青县| 阿拉善盟| 惠来县| 竹北市| 南汇区| 乐陵市| 梅州市| 天柱县| 洱源县| 德江县| 祁连县| 文山县| 綦江县| 新沂市| 尚义县| 宝坻区| 得荣县| 闽侯县| 姜堰市| 尉犁县| 邹平县| 靖宇县| 贵州省| 正蓝旗| 北碚区| 闻喜县| 施甸县| 固安县| 烟台市| 油尖旺区| 定远县| 德钦县|