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

最新推荐文章于 2024-08-28 09:08:23 发布

常安cc

最新推荐文章于 2024-08-28 09:08:23 发布

阅读量421

点赞数

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

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

版权

本文详细介绍了如何在微信小程序中封装一个底部弹出框组件，通过使用JavaScript实现动态展示和隐藏，增强了用户体验。

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

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

在这里插入图片描述

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

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


  <!-- <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({
   

    /**
     * 页面的初始数据
     */
    data: {
   
        
    },


    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
   


    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
   
        this.popup = this.selectComponent("#dialog"); //获取
    },




    // 调用子组件事件
    changeRange(e) {
   
        var _this = this;
        _this.popup.changeRange(); //调用子组件内的函数

    },
    // 调用子组件事件---弹窗2
    changeRange2(e) {
   
        var _this = this;
        _this.popup.changeRange(); //调用子组件内的函数

    },


    // 接受子组件传递的值
    customEvent: function (event) {
   },




    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
   

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
   

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
   

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
   

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
   

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (

最低0.47元/天解锁文章