用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-3-20 18:42:39 天下雪原创达人 造轮子 人生巅峰 楼主 123474
组件系列即将完结了啊。。。找不到可以做的组件了,其他组件和api似乎都不怎么常用。。。

官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject
即将移除组件: <toast/> <loading/> <action-sheet/> <modal/>, 可使用更方便的交互反馈 API 替代



相关demo:

微信小程序之自定义模态弹窗(带动画)实例
微信小程序实用组件:modal和toast通用插件封装(适用1221)

参考微信设计规范做的modal模态框

相关讨论:
Q:wx.showToast()某种情况下title的显示内容被截断,如wx.showToast({ title: '篮球2的17:00-18:00时段已经售出!'}); 只显示'篮球2的17:00-18:00时...'。iphon6必现,其他机型未测试。
A:toast/modal 等组件属于原生组件,具体的行为取决于系统原生接口。如果需要自定义它们的表现,建议使用 JS 和 WXML 自定义自己的业务逻辑。


小程序的Modal弹框,触摸灰层会跳转页面!!!
在手机端调试的时候,绑定这个modal弹出后,触摸屏幕的灰层会跳转到绑定页面,没有按预想执行
1.png 2.png
你需要在弹出的modal外层加一个view, width,height 都是100%,加上透明度;还有z-index,这样就点击不到下面的view层了,还有看看你的点击事件是给谁加了


相关讨论:
showModal里的content为什么不支持换行\r \n <br>都无效
showModal里的content为什么不支持换行\r \n <br>都无效,有别的解决方法吗?
先在JS里做好换行成数组:例 info.name_server = info.name_server.split(";");
然后前台用for循环出来
<view wx:for="{{domaininfo.name_server}}">
{{item}}
<view>


相关讨论:
textarea和placeholder内容会显示在modal上
我这个modal用的还是在页面上定义的modal,不是showmodal方法,因为目前showmodal只能显示一个文本,不能做复杂的布局
11.jpg

由于textarea是原生组件实现,层级最高,目前还无法支持在上面覆盖元素这样的交互设计。


相关讨论:
showModal的内容(content)可以定制吗?
希望showModal的内容可以放input等组件进去,以便获取用户输入。showModal能实现这类需求吗?
页面定义<modal></modal>,通过hidden控制显示状态
例如,一个隐藏提示:
<modal bindconfirm="hideTip" hidden="{{tipHide}}" no-cancel="true" confirm-text="完成">
<image mode="aspectFit" src="../../image/aaa.png"></image>
<text>这是一个提示</text>
</modal>

但样式还是受到限制;


相关讨论:
showModal 回调函数fail不响应
以下写法,不管弹出的点击哪个按钮(确定或取消)都是回调到succes函数里面,fail函数不会回调。
wx.showModal({
  title: "title",
  content: "xxx",
  success: function(c){
    console.log('success', c)
  },
  fail: function(a){
    console.log('fail', a)
  },
  complete: function(b){
    console.log('complete', b)
  }
})

无论点击哪个按钮都是如下输出:
success Object {errMsg: "showModal:ok", confirm: false}
profile.js [sm]:56 complete Object {errMsg: "showModal:ok", confirm: false}
已经找到解决方案
if (res.confirm) {
            console.log('用户点击确定')
          }



相关内容:遮罩层:
微信小程序demo:同城拼单:发布活动,遮罩层
微信小程序学习用demo:DQ:购物车合算,遮罩层
微信小程序小工具之遮罩
小程序小技巧《二十一》使用modal,css实现遮罩层




新增讨论:wx.showModal() bug
之前开发的时候,印象中,该弹框弹出后,需要点击确定/取消  弹框才消失。
但是今天上线后发现,点击空白处,弹框也会消失,之后用手机调试也是这样,
是我记错了还是出bug了???

答:林超
如图

33.jpg



请问一下,如果用showModal的话有没有方法可以关闭Modal?
发新帖
    您需要登录后才可以回帖 登录 | 立即注册