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

2024-12-01 17:22:32

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

需求描述：

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
  })
 }
})

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

微信小程序获取微信运动步数的实例代码

现在运动计步很火,无论是蚂蚁森林,还是微信上都很火爆,本文介绍了微信小程序微信运动步数的实例代码,分享给大家微信小程序API-微信运动 https://mp.weixin.qq.com/debug/wxadoc/dev/api/we-run.html#wxgetwerundataobject 思路:wx.login获取的code请求获取的session_key,wx.getWeRunData获取的iv,encryptData,将它们一起发送到后台解密就行了. 安全顾虑,因为只是示例所以直接传递
微信小程序本地图片按照屏幕尺寸处理

微信小程序本地图片按照屏幕尺寸处理前言: 个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的宽度和高度,具体步骤如下图. 1.本地图片导入步骤一:选择最左侧的菜单中的项目步骤二:选择打开后将图片直接拷贝到新建的image文件夹下图片导入完成后,项目的整体目录结构如下图所示, 2.按屏幕尺寸自适应图片宽和高步骤一:编写工具函数,返回封装后
微信小程序 rich-text的使用方法

微信小程序 rich-text的使用方法 rich-text 属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性. 结点类型:type = node , name 标签名 String 是支持部分受信任的HTML结点, attrs 属性 Object 否支持部分受信任的属性,遵循Pascal命名法 , children 子结点列表 Array 否结构和nodes一致结点类型:type = t
微信小程序页面跳转传值实现代码

微信小程序页面跳转传值实现代码微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全
微信小程序-滚动消息通知的实例代码

写在前面: 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动. (需要注意的是:只要你的swiper存在vertical属性,无论你给值为true或者false或者不设参数值,都将实现上下滚动) 从深圳回来做了一个微信小程序的小项目,令人欣慰的一点事是,回来很快时间内把在深圳两天的房租给赚回来了,哈哈... wxml <s
微信小程序同步请求授权的详解

微信小程序同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分
微信小程序对接七牛云存储的方法

前言: 做小程序有一段时间了,总结一下做过的技术点,特此贡献给小伙伴们!项目中,有图片存储.视频存储.录音存储这三个需要云对接存储. 一.图片/视频/录音上传七牛对接准备工作: a.你要有一个七牛账号,实名认证后,在七牛的个人中心,有个秘钥管理-里面有一对秘钥,是上传必须的.这对秘钥,配置在后端,配置时可以设置允许上传格式,也可以设置为任何格式都可上传,让我们的后端大哥去慢慢弄吧.另外,还需要在七牛的对象存储里新建一个存储空间,所要上传的文件就是存储在你创建的空间里,如果你为了方便管理,也可
微信小程序三级联动地址选择器的实例代码

本文介绍了微信小程序三级联动地址选择器的实例代码,分享给大家,有需要的可以一起了解一下在一些电商类的小程序中,地址选择这个功能一般是必备的,一般的收货信息都需要有一个能选择省市县的控件,当然也有些人为了省事就直接写了一个供输入的input,那么这样做的缺点不言而喻,而且用户体验也不是那么的好,今天的这篇文章就分享一下微信小程序地址选择的实现.省市县的数据以及区域码可以从国家统计局查询到,具体可以自己搜一下.照例先上源码和效果图源码传送门 picker和picker-view组件在正式介绍实
微信小程序自定义消息提示框

微信小程序自定义消息提示框需求描述: wx.showToast(OBJECT)接口调用,但是不需要icon和image,即便image为空也有占位,实际上只想输出自定义文本内容. 效果截图: 代码如下:   <view> <block wx:for="{{50}}"> <view> 123456 123456 123456 123456 123456</vi
微信小程序-消息提示框实例

做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }
微信小程序下拉框功能的实例代码

微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码 <view class='top'> <view class='top-text'> 选择接收班级</view>  <view class='top-selected' bindtap='bindShowMsg'> <text>{{grade_name}}</text> <image src='/images/icon/do
微信小程序下拉框搜索功能的实现方法

最近在做一个项目的时候,需要用到下拉框搜索,网上搜了半天没找到想要的,决心自己动手写一个. 首先看下效果图: 左边是输入框,可以进行模糊查询,右边图标进行选择. 代码部分,我定义了五个参数,和一个自定义的方法, list:下拉框数组, _width:组件宽度, _height:组件高度, bind:action: 自定义方法考虑到每个人用的时候用的对象数组结构不同我预留了两个字段,做自定义(可不写),怎么样是不是很强大. actualvalue:下拉框实际值, showvalue:下拉框显示值
微信小程序下拉框组件使用方法详解

本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = region,以及value = "一维数组" //.wxml <picker mode="region" bindchange="bindViewEvent" data-model="component" data-me
微信小程序复选框实现多选一功能过程解析

这篇文章主要介绍了微信小程序复选框实现多选一功能过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下功能实现界面 data: { checkboxItems: [ { name: '全天(1-8节)', value: 'allday' }, { name: '上午(1-4节)', value: 'am' }, { name: '下午(5-8节)', value: 'pm' }, { name: '晚上(晚自习)', value: 'nigh
微信小程序实现搜索框功能及踩过的坑

先上代码: wxml:  <view class="inputcontainer"> <view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜索商品</view> <view class="edit" wx:else> <form bi
微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo
微信小程序实现搜索框功能

本文实例为大家分享了微信小程序实现搜索框功能的具体代码,供大家参考,具体内容如下效果: wxml文件: <view class="search_input" > <navigator url="/pages/search/search" open-type="navigate" class="navigator"> <text class="iconfont icon-guanbi&q
微信小程序自定义弹框效果

本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml  <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view>  <view cla

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

相关推荐

随机推荐

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