欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序实现常见弹出层效果

程序员文章站 2022-05-28 22:21:20
...

先看下效果图吧 

微信小程序实现常见弹出层效果

其实这个效果实现起来很简单,就是通过三目运算符来控制遮罩层的显示和隐藏

贴代码了:

规则按钮:

<text class='rule' bindtap='showRule'>规则</text>

遮罩层:我这个数据是从后台拿来动态渲染到页面的

<!--  规则提示  -->
    <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:

/* 规则提示层  */
.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  */

 

点击规则按钮:

 

//打开规则提示
    showRule: function () {
        this.setData({
            isRuleTrue: true
        })
    },

点击关闭按钮:

//关闭规则提示
    hideRule: function () {
        this.setData({
            isRuleTrue: false
        })
    },

 

想要获得更多资料的  请微信搜索公众号 【热血科技】,关注一下即可。