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

上一章自定义弹框-版本2我们已经对弹框底部按钮做了一下小优化，今天我们继续优化一下，主要是优化\color{red}{弹框内容顶部的间距，防止填充内容多的时候，显示不美观，同时也学习一下微信小程序动态修改top属性}

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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容