微信小程序弹框(组件)

由于微信小程序没有引入ui库,有弹框样式写起来比较麻烦,所以自己封装了一个弹框组件
wxml

<view wx:if="{{show}}">
  <view class='mask_layer' bindtap='modal_click_Hidden' />
  <view class='modal_box'>
    <!-- <view class="title">title</view> -->
    <view class='content'>
      <!-- <text class='modalMsg'></text> -->
      <slot></slot>
      <!-- <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea> -->
    </view>
    <!-- <view class='btn1'>
      <view bindtap='modal_click_Hidden' class='cancel'>取消</view>
      <view bindtap='Sure' class='Sure'>确定</view>
    </view> -->
    <image class="closeRule" wx:if="{{showCloseBtn}}" bindtap="closeRule" data-type="help" src="https://bm-mini-program.oss-cn-hangzhou.aliyuncs.com/static/christmas/close.png"></image>
  </view>
</view>

js

// pages/BlankMEactivity/pages/component/van-poup/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
    },
    showCloseBtn:{
      type:Boolean
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    show: false,
    showCloseBtn:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    closeRule(){
      this.triggerEvent('closeRule')
    }
  }
})

json

{
  "component": true,
  "usingComponents": {}
}

wxss

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

.modal_box {
  max-height: 100%;
  overflow-y: auto;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  /* background: #fafafa; */
  padding: 30rpx 50rpx;
  border-radius: 3px;
}

.title {
  padding: 15px;
  text-align: center;
  background-color: gazure;
}

.content {
  padding-bottom: 70px;
  /* overflow-y: scroll; */
  /*超出父盒子高度可滚动*/
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.input_show1 {
  margin: 0 auto;
  width: 80%;
  margin-left: 10%;
  font-size: 32rpx;
  text-align: center;
}

.btn1 {
  width: 100%;
  margin-top: 65rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: white;
}

.cancel {
  width: 100%;
  padding: 10px;
  text-align: center;
  color: black;
}

.Sure {
  width: 100%;
  padding: 10px;
  color: #44b549;
  background-color: white;
  border-left: 1px solid #d0d0d0;
  text-align: center;
}

.modalMsg {
  text-align: center;
  margin-top: 45rpx;
  display: block;
}

.closeRule {
  width: 56rpx;
  height: 56rpx;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
### 微信小程序实现方式 在微信小程序开发中,可以通过多种方式进行展示。以下是常见的两种实现方式:内置 API 和自定义组件。 #### 使用 `wx.showModal` 方法 通过调用微信官方提供的 `wx.showModal` 接口可以直接创建一个简单的模态对话。此接口支持显示标题、内容以及两个按钮(确认和取消),并允许开发者监听用户的操作结果。 ```javascript wx.showModal({ title: &#39;提示&#39;, content: &#39;确定要取消订单吗?&#39;, success(res) { if (res.confirm) { console.log(&#39;用户点击了确认&#39;); // 执行确认逻辑 } else if (res.cancel) { console.log(&#39;用户点击了取消&#39;); // 执行取消逻辑 } }, }); ``` 上述代码展示了如何利用 `wx.showModal` 创建一个带有“确认”和“取消”选项的简单[^2]。 --- #### 自定义组件 对于更复杂的需求,比如需要更多样式定制或者额外的功能交互,则推荐使用自定义组件来构建。这种方式提供了更高的灵活性,能够满足特定业务场景下的需求。 下面是一个基于自定义组件实现案例: ##### 组件文件结构 假设我们已经有一个名为 `show-modal` 的组件位于路径 `/components/show-modal/` 下面。 ###### **组件配置** 在该组件内部定义其属性与方法如下所示: ```javascript Component({ /** * 组件的属性列表 */ properties: { show: { type: Boolean, value: false, }, title: { type: String, value: "", }, content: { type: String, value: "", }, }, /** * 组件的初始数据 */ data: {}, /** * 组件的方法列表 */ methods: { cancel_and_close() { this.setData({ show: false }); }, open_setting() { // 定义其他行为逻辑 }, }, }); ``` 这里设置了三个外部可传入的参数分别为是否显示(`show`)、标题文字(`title`)及主体描述文案(`content`);同时也包含了用于处理关闭动作和其他可能扩展功能的相关函数[^1]。 --- ##### 页面引入与绑定事件 当要在某个页面里运用到这个自定义好的弹窗时,需先注册它再于 WXML 中声明位置关系最后配合 JS 控制开关状态即可完成整个流程控制。 ###### 注册组件 编辑目标页面 json 文件添加一行指定所需加载模块名及其相对地址信息: ```json { "usingComponents": { "custom-modal": "/components/show-modal/show-modal" } } ``` ###### 调用示例 接着可以在对应 wxml 配置好实际渲染区域并通过动态变量管理显隐切换效果。 ```html <view> <!-- 其他 UI --> </view> <!-- 引入自定义组件 --> <custom-modal show="{{isShow}}" title="警告!" content="这是一条测试消息." /> <button bindtap="toggleModal">打开</button> ``` 同时也要记得补充关联 js 处理部分以便响应触发条件改变视图呈现状况。 ```javascript Page({ data:{ isShow :false }, toggleModal(){ let currentStatus=!this.data.isShow; this.setData({isShow:currentStatus}) } }); ``` 以上即为一种较为完整的解决方案说明^。 --- ### 动画增强体验 如果希望进一步提升用户体验还可以加入过渡动画使得界面变化更加自然流畅。具体做法是在初始化阶段获取全局唯一动画实例对象随后依据设定规则逐步调整节点样式直至达到预期视觉表现为止[^3]。 例如修改原有 close 函数增加平滑隐藏过程演示片段如下: ```javascript cancel_and_close() { const animation = wx.createAnimation({ duration: 500, timingFunction: &#39;ease-in-out&#39; }); this.animation = animation; animation.opacity(0).step(); this.setData({ animationData: animation.export() }) setTimeout(() => { this.setData({ show: false }) }, 600); }, ``` 这样就实现了渐隐消失的效果让整体显得更为精致细腻^。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值