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


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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
几种响应式文字详解
May 19 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
最通俗易懂的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
Cakephp 执行主要流程
2010/03/24 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
用python实现一个简单的验证码
2020/12/09 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
超市客服工作职责
2014/06/11 职场文书
骨干教师申报材料
2014/12/17 职场文书
经理助理岗位职责
2015/02/02 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Css预编语言及区别详解
2021/04/25 HTML / CSS