小編這次要給大家分享的是微信小程序如何實現(xiàn)彈出層效果,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
成都創(chuàng)新互聯(lián)公司專注于南陵企業(yè)網(wǎng)站建設(shè),成都響應式網(wǎng)站建設(shè)公司,成都商城網(wǎng)站開發(fā)。南陵網(wǎng)站建設(shè)公司,為南陵等地區(qū)提供建站服務。全流程按需網(wǎng)站策劃,專業(yè)設(shè)計,全程項目跟蹤,成都創(chuàng)新互聯(lián)公司專業(yè)和態(tà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 }) },
看完這篇關(guān)于微信小程序如何實現(xiàn)彈出層效果的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。
當前文章:微信小程序如何實現(xiàn)彈出層效果
本文來源:http://bm7419.com/article16/jdjcgg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站營銷、網(wǎng)站收錄、做網(wǎng)站、建站公司、品牌網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)