微信小程序中如何实现自定义消息提示框
这篇文章主要介绍微信小程序中如何实现自定义消息提示框,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
专注于为中小企业提供成都网站建设、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业罗湖免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了千余家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
微信小程序 自定义消息提示框
需求描述:
wx.showToast(OBJECT)接口调用,但是不需要icon和image,即便image为空也有占位,实际上只想输出自定义文本内容。
效果截图:
代码如下:
123456 123456 123456 123456 123456 {{text}}
/* index.wxss */ .showModule { /* 用样式控制隐藏 visibility: hidden;*//* flex 布局 */ display: flex; justify-content: center; align-items: center; /* 生成绝对定位的元素,相对于浏览器窗口进行定位 */ position: fixed; /* 如果 height,width 不变的情况下,left,top 不用修改 */ left: 35%; top: 40%; height: 20vh; width: 30vw; /* 不透明 */ opacity: 0.99; background-color: #7b7b7b; /* 圆角 */ border-radius: 30rpx; } .showModule .text { /* flex 布局 */ display: flex; /* 字体加粗 */ font-weight: bold; color: white; font-size: 13pt; font-family: "微软雅黑"; /* Helvetica, Arial, Hiragino Sans GB, Source Han Sans CN, PingFang SC, Roboto, 微软雅黑, Heiti SC, Microsoft Yahei, sans-serif; */ }
//index.js //获取应用实例 var app = getApp() Page({ data: { text: "弹窗内容", isShow: false }, onShow() { this.setData({ text: "用户取消支付", isShow: true }) } })
以上是“微信小程序中如何实现自定义消息提示框”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
文章名称:微信小程序中如何实现自定义消息提示框
文章链接:http://ybzwz.com/article/pdjece.html