微信小程序点击弹出输入框

微信小程序 专栏收录该内容
1 篇文章 0 订阅

微信小程序点击弹出输入框

第一次写博客,我决定不要太old school。
let’s get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中的点击弹出模态输入框的功能不好实现,于是找了许多文章,最终是实现了这个little bin,话不多说,骡子牵出来:


需求很简单:点击编辑按钮可以编辑商家编号,上代码:
wxml:

<button class="delete">
 <text>删除</text>
   </button>
   <button class="edit" bindtap="modalinput">
     <text>编辑</text>
   </button>
   <modal hidden="{{hiddenmodalput}}" title="请输入商家编号" 
   			confirm-text="提交" cancel-text="取消" bindcancel="modalinput" 
   			bindconfirm="confirm">
     <!-- 这里可以自由选择你的输入框类型<input type='text' placeholder="请输入内容" auto-focus/> -->
     <textarea placeholder="请输入内容"></textarea>
   </modal>

接下来再给edit按钮指定一下modalinput点击事件就行了,而且这里取消也是绑定的modalinput事件额

js:

Page({
  data: {
  //初始化隐藏模态输入框
  hiddenmodalput: true,
  },
  modalinput: function () {
  this.setData({
  	//注意到模态框的取消按钮也是绑定的这个函数,
  	//所以这里直接取反hiddenmodalput,也是没有毛病
    hiddenmodalput: !this.data.hiddenmodalput
  })
}
})

看看效果:
在这里插入图片描述
嗯,还不错,至于后面的提交事件就是js写请求了,没有毛病

更多详情请点击这里:
https://www.jb51.net/article/149121.htm

  • 3
    点赞
  • 2
    评论
  • 25
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值