[小程序]漂亮的弹出层demo。
  • xiele-淡墨
  • 2018-12-10
  • 前端
  • 效果图:



    index.WXML:
    <view bindtap='showModal'>点击弹出</view>
    <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
    <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    <view class='choose'>选择优惠券</view>
    <view bindtap='hideModal' class='notused'>不使用优惠券</view>
    <scroll-view scroll-y style="height: 200px;">
    </scroll-view>
    <view bindtap='hideModal' class='closemodel'>关闭</view>
    </view>


    index.WXSS:
    .commodity_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9;
    color: #fff;
    }

    .commodity_attr_box {
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: #fff;
    padding-top: 20rpx;
    height: 900rpx;
    }
    .commodity_attr_box{
    text-align: center;
    padding-top: 20rpx;
    }
    .closemodel{
    background: #eb2727;
    line-height: 40px;
    color: #fff;
    position: fixed;
    bottom: 0px;
    width: 100%
    }
    .notused{
    border-radius: 5px;
    line-height: 30px;
    font-size: 12px;
    color: #666;
    border: 1px solid #ccc;
    margin: 15rpx 10%;
    }


    index.JS
    Page({
    data: {
    showModalStatus: false,
    animationData: ''
    },
    onLoad: function () {

    },
    showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
    duration: 200,
    timingFunction: "ease-in-out",
    delay: 0
    })
    this.animation = animation
    animation.translateY(500).step()
    this.setData({
    animationData: animation.export(),
    showModalStatus: true
    })
    setTimeout(function () {
    animation.translateY(0).step()
    this.setData({
    animationData: animation.export()
    })
    }.bind(this), 200)
    },
    hideModal: function () {
    this.setData({
    showModalStatus: false,
    })

    }
    })


    评论
    • 评论功能已关闭