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


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 相关文章推荐
javascript代码加载优化方法
Jan 30 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python实时获取cmd的输出
2015/12/13 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python tkinter组件摆放方式详解
2019/09/16 Python
怎么快速自学python
2020/06/22 Python
Python自省及反射原理实例详解
2020/07/06 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
大学生军训广播稿
2014/01/24 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
详解Python牛顿插值法
2021/05/11 Python