微信小程序-自定义弹框-版本3

上一章自定义弹框-版本2我们已经对弹框底部按钮做了一下小优化，今天我们继续优化一下，主要是优化

aaa.gif

第一步，在popView.js新增属性cntMarginTop表示内容顶部的间距，默认跟popView.wxss设置的top一样

// 属性
  properties: {
    canShow: {
      type: Boolean,
      value: false, // 默认值
    },
    btns: {
      type: Array,
      value: ['取消','确定'] // 默认值
    },
    cntMarginTop: {
      type: Number,
      value: 268 // 默认值
    }
  },

第二步，在popView.wxml里新增style="top:{{cntMarginTop+'rpx'}}"，这里cntMarginTop就是新增的属性，给外面设置的

<view wx:if="{{canShow}}" class= 'popV' catchtouchmove="move">
  <view class='popV-mask' bindtap="selectMask"></view> 
  <!-- 动态修改top -->
  <view class='popV-content' style="top:{{cntMarginTop+'rpx'}}"> 
    <slot></slot>
    <view class='popV-content-btm'>
      <view wx:for="{{btns}}" 
            wx:key="{{index}}" 
            data-index="{{index}}" 
            class='popV-item {{index==btns.length-1?"popV-item-highlighted":""}}' 
            hover-class='popV-hover'
            bindtap='selectBtn'>{{item}}</view>
    </view>
  </view>
</view>

最后如何使用

55ECFE6C-1A2A-4E32-A45B-B288E839D0C5.png
76DDF200-B275-42F0-97C7-0E7EA11595BA.png