ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

微信小程序-贪吃蛇开发12 Modal标签

2022-01-22 14:32:15  阅读:79  来源: 互联网

标签:12 微信 贪吃蛇 标签 Modal 按钮 hidden 弹窗


本系列是作者自学实践过程的记录
本文是关于贪吃蛇的弹窗控制
有问题欢迎讨论

一、Model标签介绍

通过Modal标签,可以实现弹窗功能,例如当游戏结束时应该让用户执行什么样的操作。

属性作用
hidden弹窗是否隐藏
no-cancel取消按钮是否显示
confirm-text确定按钮文字展示
cancel-text取消按钮文字展示
bindfirm点击确认按钮后触发的回调
bindcancel点击取消按钮后触发的回调

二、Modal标签使用

贪吃蛇游戏中,不需要取消按钮,点击确认按钮后完成重置即可。

  <modal class = "modal" hidden="{{modal_hidden}}" no-cancel
  bindconfirm = "modelConfirm">
    <view>游戏结束,需要重新开始吗?</view>
  </modal>

对应的js函数

  // 弹出窗口控制,点击确认后执行的函数
  modalConfirm:function(){
    this.setData({
      // 恢复初始化
      score:0,
      ground:[],
      snake:[],
      food:[],
      modal_hidden:true,
      direction:""
    })
    this.onLoad()
  }

三、完结

到这里,贪吃蛇就完成了开发过程,代码已经上传到博客了,欢迎大家下载学习。

标签:12,微信,贪吃蛇,标签,Modal,按钮,hidden,弹窗
来源: https://blog.csdn.net/qq_44027696/article/details/122636833

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有