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


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 相关文章推荐
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
详解python statistics模块及函数用法
2019/10/27 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
实例代码讲解Python 线程池
2020/08/24 Python
python MD5加密的示例
2020/10/19 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
英国袜子店:Sock Shop
2017/01/11 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
初三学生个人自我评定
2014/04/06 职场文书
营销总监岗位职责
2014/09/16 职场文书
Python 全局空间和局部空间
2022/04/06 Python
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技