微信小程序参考微信设计规范做的modal模态框

2017-01-10


整个项目是基于weui做的,赶时间,先发一个粗糙的。没时间优化,先就这样,见谅


微信小程序参考微信设计规范做的modal模态框


这个只是做的情形之一,点击修改昵称,然后弹框。


<view class="weui-cell weui-cell_access" hover-class="weui-cell_active" hover="{{true}}" bindtap="modal" data-modal="name">

        <view class="weui-cell__bd">昵称</view>

        <view class="weui-cell__ft weui-cell__ft_in-access">

                {{user.nickName}}

                <text wx:if="{{user.nickName==null}}">未填写</text>

        </view>

</view>


 





modal: function (e) {

        var self = this;

        this.setData({ modal: (e && e.currentTarget.dataset.modal) || "", input: self.data.user });

        // 这里对modal的赋值是关键

}


 


 



.modals {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: rgba(0,0,0,.6);

  z-index: 1000;

}

.modal {

  position: fixed;

  top: 25px;

  right: 15px;

  bottom: 25px;

  left: 15px;

  background-color: #ffffff;

  z-index: 1000;

  border-radius: 6px;

}

.modal__close {

  text-align: right;

  position: relative;

  top: 10px;

  right: 10px;

}

.modal__hd {

  padding: 0 10px;

  text-align: center;

}

.modal__hd,.modal__ft {

  font-weight: 400;

  font-size: 17px;

}

.modal__ft {

  border-top: 1px solid #D9D9D9;

  display: flex;

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}

.modal__btn {

  -webkit-box-flex: 1;

  -webkit-flex: 1;

  flex: 1;

  text-align: center;

  padding: 8px 0;

  border-left: 1rpx solid #D9D9D9;

}

.modal__btn:first-child {

  border: none;

}

 




0
收藏