【微信小程序封装底部弹出框】一

最新推荐文章于 2024-08-15 23:03:45 发布

常安cc

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量1.9k

点赞数

分类专栏：微信小程序前端文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/m0_55546349/article/details/125393612

版权

本文介绍了如何在微信小程序中封装一个底部弹出框组件，详细讲解了实现过程和关键代码，帮助开发者提升用户体验。

摘要由CSDN通过智能技术生成

【微信小程序封装底部弹出框一】

在这里插入图片描述

<!--index.wxml-->
<view>
  <button style="margin-top: 300px;" catchtap="changeRange2">点击唤起弹窗222</button>

  <!-- 弹框 -->
  <dialogA id='dialog' catchtouchmove="preventTouchMove" bind:customEventHandler="customEvent"></dialogA>
</view>

{
   
  "usingComponents": {
   
    "dialogA":"/components/dialogA/dialog",
    "dialog":"/components/dialog/dialog"
  }
}

// index.js
// 获取应用实例
const app = getApp()

Page({
   

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
   
        this.popup = this.selectComponent("#dialog"); //获取
    },
    
    
    // 调用子组件事件---弹窗2
    changeRange2(e) {
   
        var _this = this;
        _this.popup.changeRange(); //调用子组件内的函数

    },
    
})

在这里插入图片描述

<!--components/dialog/dialog.wxml-->

<view class="half-screen" catchtouchmove="preventTouchMove">
    <!--屏幕背景变暗的背景  -->
    <view class="background_screen" catchtap="hideModal" wx:if="{
    {showModalStatus}}"></view>
    <!--弹出框  -->
    <view animation="{
    {animationData}}" class="attr_box" wx:if="{
    {showModalStatus}}">
        <view class="dialog-box">
            <view class="dialog-head">