微信小程序 自定义消息提示框


Posted in Javascript onAugust 06, 2017

微信小程序 自定义消息提示框

需求描述:

wx.showToast(OBJECT)接口调用,但是不需要icon和image,即便image为空也有占位,实际上只想输出自定义文本内容。

效果截图:

微信小程序 自定义消息提示框

代码如下:

<!--index.wxml-->
<!-- 页面正文 -->
<view>
 <block wx:for="{{50}}">
  <view> 123456 123456 123456 123456 123456</view>
 </block>
</view>
<!-- 自定义弹窗 -->
<view class="showModule" wx:if="{{isShow}}">
 <!-- 这部分内容可以灵活修改,例如改成一个模态框 -->
 <view class="text ">{{text}}</view>
</view>
/* 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
  })
 }
})

以上就是微信小程序 自定义消息提示框的实例,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery 日期分离成年月日的代码
May 14 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
js制作支付倒计时页面
Oct 21 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
最通俗易懂的javascript变量提升详解
Aug 05 #Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 #Javascript
js分页之前端代码实现和请求处理
Aug 04 #Javascript
微信小程序 rich-text的使用方法
Aug 04 #Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 #Javascript
JS中使用media实现响应式布局
Aug 04 #Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 #Javascript
You might like
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php2html php生成静态页函数
2008/12/08 PHP
使用php来实现网络服务
2009/09/15 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php实现可逆加密的方法
2015/08/11 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python Logging 日志记录入门学习
2018/06/02 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python批量下载抖音视频
2019/06/17 Python
Python猴子补丁知识点总结
2020/01/05 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
linux系统都有哪些运行级别
2016/03/26 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
高校学生干部的自我评价分享
2013/11/04 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
保护环境建议书300字
2014/05/13 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
4种方法python批量修改替换列表中元素
2022/04/07 Python