微信小程序同界面自定义弹窗问题

微信小程序同个页面第一个自定义底部弹出框点击跳转到第二个自定义底部弹出框,第二个底部弹出框能返回第一个弹窗,
有什么办法能解决

img

img

没那么复杂 , 你理解的有问题 , 传个值 , 第二个弹窗关闭的时候 ,给第一个弹窗传一个 true , 打开第二个弹窗的时候 第一个弹窗 为false , 就行 , 如有帮助给个采纳谢谢

其实这个很简单,你可以将第二个底部弹出框设置为第一个底部弹出框的子组件,在第一个底部弹出框中通过调用子组件的方法来显示第二个底部弹出框。这样在第二个底部弹出框中,你可以通过调用父组件的方法来返回第一个底部弹出框。
下面是具体实现步骤,希望对你有所帮助:

  1. 在第一个底部弹出框的wxml文件中引入第二个底部弹出框的自定义组件
    <!-- first-dialog.wxml -->
    <import src="../second-dialog/second-dialog.wxml"></import>
    <view>
    <!-- 第一个底部弹出框的内容 -->
    <button bindtap="showSecondDialog">显示第二个弹出框</button>
    <!-- 引入第二个底部弹出框的组件 -->
    <template is="second-dialog" data="{{showSecondDialog: showSecondDialog}}" />
    </view>
    
  2. 在第一个底部弹出框的js文件中定义方法来显示、隐藏第二个底部弹出框
    // first-dialog.js
    Page({
    data: {
     showSecondDialog: false
    },
    showSecondDialog() {
     this.setData({
       showSecondDialog: true
     })
    },
    hideSecondDialog() {
     this.setData({
       showSecondDialog: false
     })
    }
    })
    
  3. 在第二个底部弹出框的wxml文件中,添加一个按钮来返回第一个底部弹出框,并在点击按钮时调用父组件的方法来隐藏第二个底部弹出框。
    <!-- second-dialog.wxml -->
    <view>
    <!-- 第二个底部弹出框的内容 -->
    <button bindtap="hideDialog">返回第一个弹出框</button>
    </view>
    
  4. 在第二个底部弹出框的js文件中,添加一个hideDialog方法来调用父组件的方法来隐藏第二个底部弹出框。
    // second-dialog.js
    Component({
    methods: {
     hideDialog() {
       const parent = this.getRelationNodes('../first-dialog/first-dialog')[0]
       parent.hideSecondDialog()
     }
    }
    })
    
    这样,就可以在第一个底部弹出框中通过调用子组件的方法来显示第二个底部弹出框,在第二个底部弹出框中通过调用父组件的方法来返回第一个底部弹出框。