微信小程序?qū)崿F(xiàn)彈出層效果
更新時間：2020年05月26日 10:35:46 作者：進階的碼農(nóng)
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)常見彈出層效果
，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)彈出層效果的具體代碼，供大家參考，具體內(nèi)容如下
先看下效果圖吧
其實這個效果實現(xiàn)起來很簡單，就是通過三目運算符來控制遮罩層的顯示和隱藏
貼代碼了：
規(guī)則按鈕：
<text class='rule' bindtap='showRule'>規(guī)則</text>
遮罩層：我這個數(shù)據(jù)是從后臺拿來動態(tài)渲染到頁面的
<!-- 規(guī)則提示 -->
<view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
<view class='ruleZhezhaoContent'>
<view class='ruleZhezhaoText' wx:for='{{rule}}' wx:for-index='index'>
<text>{{index+1}}</text>
<text>{{item}}</text>
</view>
<image src='../../images/rule-hide.png' class='ruleHide' bindtap='hideRule'></image>
</view>
</view>
<!-- end -->
css:
/* 規(guī)則提示層 */
.isRuleShow{
display: block;
}
.isRuleHide{
display: none;
}
.ruleZhezhao{
height: 100%;
width: 100%;
position: fixed;
background-color:rgba(0, 0, 0, .5);
z-index: 2;
top: 0;
left: 0;
}
.ruleZhezhaoContent{
padding: 20rpx 0;
width: 80%;
background: #e1d2b1;
margin: 40% auto;
border-radius: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: relative;
}
.ruleZhezhaoText{
width: 80%;
font-size: 30rpx;
color: #856d5f;
display: flex;
flex-direction: row;
align-items: center;
margin: 25rpx 0 25rpx 0;
}
.ruleZhezhaoText text:nth-child(1){
color: #fff;
font-size: 40rpx;
height: 60rpx;
width: 60rpx;
background: #664a2c;
display: block;
text-align: center;
line-height: 60rpx;
border-radius: 30rpx;
margin-right: 10rpx;
}
.ruleZhezhaoText text:nth-child(2){
flex-wrap:wrap;
width: 80%;
}
.ruleHide{
height: 60rpx!important;
width: 60rpx!important;
position: absolute;
top: -20rpx;
right: -20rpx;
}
.rule{
display: block;
border: 1px solid #fff;
width: 100rpx;
text-align: center;
line-height: 60rpx;
color: #fff;
height: 60rpx;
font-size: 30rpx;
border-radius: 30rpx;
position: absolute;
top: 10%;
right: 5%;
}
/* end */
點擊規(guī)則按鈕：
//打開規(guī)則提示
showRule: function () {
this.setData({
isRuleTrue: true
})
},
點擊關(guān)閉按鈕：
//關(guān)閉規(guī)則提示
hideRule: function () {
this.setData({
isRuleTrue: false
})
},
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript把數(shù)組作為堆棧使用的方法,實例分析了javascript操作數(shù)組的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了微信小程序宿主環(huán)境的基礎知識，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
npm?install報錯Error:EPERM:operation?not?permitted,rename解決
這篇文章主要給大家介紹了關(guān)于npm?install報錯Error:EPERM:operation?not?permitted,rename的解決辦法,文中介紹了可能遇到的多種原因以及解決辦法,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關(guān)于ES6中Object.assign方法使用的相關(guān)資料,Object.assign可以用來處理數(shù)組,但是會把數(shù)組視為對象,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-06-06
javascript SocialHistory 檢查訪問者是否訪問過某站點
今天delicious上這個名為 SocialHistory 的腳本十分引人注目。源代碼可以在這里下載。這段js代碼的功能就是判斷你的用戶有沒有訪問過某個網(wǎng)站。使用方法很簡單，例如：2008-08-08
在網(wǎng)上找了很多dom操作的例子，感覺不全而且凌亂。2010-04-04
這篇文章主要為大家詳細介紹了javascript新聞跑馬燈實例代碼，所謂的跑馬燈就是無縫滾動效果代碼，常見于新聞公告之類的功能，需要的朋友可以參考下2015-12-12
JS/jQuery實現(xiàn)DIV延時幾秒后消失或顯示的方法
這篇文章主要介紹了JS/jQuery實現(xiàn)DIV延時幾秒后消失或顯示的方法,結(jié)合實例形式分析了javascript使用setTimeout及jQuery使用delay方法實現(xiàn)延遲顯示功能的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
排序算法是筆試中經(jīng)常出現(xiàn)的,提起排序算法就一定要提下算法復雜度和大O表示法,算法復雜度是指算法在編寫成可執(zhí)行程序后，運行時所需要的資源，資源包括時間資源和內(nèi)存資源,這篇文章主要給大家介紹了關(guān)于如何利用JavaScript實現(xiàn)排序算法的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了JS仿hao123導航頁面圖片輪播效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-09-09