微信小程序 自定义组件实现类似Modal的弹框

客官°小女子只卖身不卖艺 2023-07-01 06:23 121阅读 0赞

效果展示:

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2

思路:

在项目中,我们会遇到这样的情况,以上的的弹框都是类似的,我们不需要每个页面都写个弹框+背景。这样很是麻烦和繁琐。

不如我们拆分成这样,弹框(组件)+弹框内容(slot)。

组件代码:

.wxml:

  1. <!-- 弹框组件,类似 Modal -->
  2. <block wx:if="{
  3. {isShowInvite}}">
  4. <cover-view class="alert_bg" bindtap="_alertClose"></cover-view>
  5. <cover-view class="alert_invite_wrap">
  6. <cover-view class="alert_invite">
  7. <cover-view class="alert_invite_tit">{
  8. {title}}</cover-view>
  9. <slot name="rules"></slot>
  10. <slot name="twobutton"></slot>
  11. <cover-view class="bottom_tit">{
  12. {bottomTxt}}</cover-view>
  13. </cover-view>
  14. <cover-image src="{
  15. {iconClose}}" class="icon_close" bindtap="_alertClose"></cover-image>
  16. </cover-view>
  17. </block>

.wxss:

  1. .alert_bg{
  2. position: fixed;
  3. left: 0;
  4. right: 0;
  5. top: 0;
  6. bottom: 0;
  7. background: rgba(0,0,0,.8);
  8. z-index: 99999;
  9. }
  10. .alert_invite_wrap{
  11. width: 80%;
  12. position: absolute;
  13. left: 50%;
  14. top: 50%;
  15. transform: translate(-50%,-50%);
  16. z-index: 999999;
  17. }
  18. .alert_invite{
  19. width: 100%;
  20. background-color: #fff;
  21. border-radius: 20rpx;
  22. padding:50rpx;
  23. box-sizing: border-box;
  24. overflow: initial;
  25. }
  26. /* .alert_invite_txt{
  27. width: 100%;
  28. font-size: 26rpx;
  29. color: #444444;
  30. line-height: 25px;
  31. white-space: pre-wrap;
  32. margin-bottom: 75rpx;
  33. } */
  34. .alert_invite_tit{
  35. font-weight: bold;
  36. font-size: 40rpx;
  37. color: #333333;
  38. margin-bottom: 55rpx;
  39. }
  40. .invite_btn{
  41. width: 100%!important;
  42. height: 80rpx;
  43. box-sizing: border-box;
  44. line-height: 80rpx;
  45. background: #ffcc21;
  46. border-radius: 50rpx;
  47. font-size: 30rpx;
  48. color: #444444;
  49. }
  50. .icon_close{
  51. width: 80rpx;
  52. height: 80rpx;
  53. margin:0 auto;
  54. margin-top: 80rpx;
  55. }
  56. .bottom_tit{
  57. font-size: 26rpx;
  58. color: #444444;
  59. text-align: center;
  60. }

.js:

  1. Component({
  2. data: {
  3. iconClose: 'http://39.105.134.221:8080/test/source1.png' //需要后端将icon_close_white放在服务器上,这个暂时用播放的
  4. },
  5. options:{
  6. multipleSlots: true
  7. },
  8. properties: {
  9. title: {
  10. type: String,
  11. value: '邀请获下载券'
  12. },
  13. isShowInvite: {
  14. type: Boolean,
  15. value: false
  16. },
  17. bottomTxt:{
  18. type:String,
  19. value:''
  20. },
  21. },
  22. methods: {
  23. _alertClose() {
  24. this.setData({
  25. isShowInvite: false
  26. })
  27. }
  28. }
  29. })

pages页面使用该组件:

  1. <alert-invite-rules id="inviteRules" title="没有下载券了" isShowInvite="{
  2. {isShowInvite}}">
  3. <view slot="rules">
  4. <view class="alert_invite_txt">{
  5. {couponTxt}}</view>
  6. </view>
  7. <view slot="twobutton">
  8. <button class="invite_btn" style="bottom:20px" hover-class="none">¥1买整套</button>
  9. <button class="invite_btn invite_btn_gray" hover-class="none" open-type="share">邀请获券</button>
  10. </view>
  11. </alert-invite-rules>

嗯嗯….

以上pages页面里面的 就直接可以完成 弹框 + 弹框内容。这样就简洁了好多。

发表评论

表情:
评论列表 (有 0 条评论,121人围观)

还没有评论,来说两句吧...

相关阅读

    相关 程序定义组件

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装