微信小程序 Toast自定义实例详解

2024-10-10 09:22:41

微信小程序 Toast自定义实例详解

实现类似于Android的Toast提示

index.js：

var timer;
var inputinfo = "";
var app = getApp()
Page({
 data: {
  animationData:"",
  showModalStatus:false
 }, 

 onLoad: function () { 

 },
 showModal: function () {
  // 显示遮罩层
  var animation = wx.createAnimation({
   duration: 200,
   timingFunction: "linear",
   delay: 0
  })
  this.animation = animation
  animation.translateY(200).step()
  this.setData({
   animationData: animation.export(),
   showModalStatus: true
  })
  setTimeout(function () {
   animation.translateY(0).step()
   this.setData({
    animationData: animation.export()
   })
  }.bind(this), 200)
  console.log("准备执行");
   timer = setTimeout(function () {
    if(this.data.showModalStatus){
     this.hideModal();
     console.log("是否执行");
   }
  }.bind(this), 3000)
 },
 clickbtn:function(){
  if(this.data.showModalStatus){
   this.hideModal();
  }else{
   this.showModal();
  }
 },
 hideModal: function () {
  if(timer != null){
   clearTimeout(timer);
   timer = null;
  }
  // 隐藏遮罩层
  var animation = wx.createAnimation({
   duration: 200,
   timingFunction: "linear",
   delay: 0
  })
  this.animation = animation
  animation.translateY(200).step()
  this.setData({
   animationData: animation.export(),
  })
  setTimeout(function () {
   animation.translateY(0).step()
   this.setData({
    animationData: animation.export(),
    showModalStatus: false
   })
  }.bind(this), 200)
 },
})

index.wxml：

<button type="default" bindtap="clickbtn">
 点击
</button>
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<!--对话框标题-->
 <view class="title-view">
  <view class="toast-view">
   要显示的内容
  </view> 

 </view>
</view>

效果图：

源码下载链接：http://xiazai.jb51.net/201701/yuanma/toastTestNew(jb51.net).rar

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

Android 自定义 Toast 显示时间

Android 自定义 Toast 显示时间实现代码: package com.wm.realname.util; import android.content.Context; import android.os.Handler; import android.view.View; import android.widget.Toast; /** * Toast自定义显示时间 * 使用方法 * 1.先初始化类 MyToast myToast = new MyToast(this); * 2.
分享Android中Toast的自定义使用

1.Toast源码分析老规矩,我们先去看Toast的源码. Toast有两种显示布局方式,一种最常见调用Toast.makeText() ,看源码是这样写的 public static Toast makeText(Context context, CharSequence text, @Duration int duration) { Toast result = new Toast(context); LayoutInflater inflate = (LayoutInflater) c
微信小程序自定义Toast实例代码

微信小程序自定义Toast实例代码 Toast样式可以根据需求自定义,本例中是圆形  <view class="btn" bindtap="btn_toast">自定义Toast</view>  <view class="toast_box" style="opacity:{{0.9}}"
超简单实现Android自定义Toast示例（附源码）

Bamboy的自定义Toast,(以下称作"BToast") 特点在于使用简单, 并且自带两种样式: 1)普通的文字样式: 2)带图标样式. 其中图标有√和×两种图标. BToast还有另外一个特点就是: 系统自带Toast采用的是队列的方式,当前Toast消失后,下一个Toast才能显示出来: 而BToast会把当前Toast顶掉, 直接显示最新的Toast. 那么,简单三步,我们现在就开始自定义一下吧! (一).Layout: 要自定义Toast, 首先我们需要一个XML布局. 但
android之自定义Toast使用方法

Android系统默认的Toast十分简洁,使用也非常的简单.但是有时我们的程序使用默认的Toast时会和程序的整体风格不搭配,这个时候我们就需要自定义Toast,使其与我们的程序更加融合. 使用自定义Toast,首先我们需要添加一个布局文件,该布局文件的结构和Activity使用的布局文件结构一致,在该布局文件中我们需设计我们Toast的布局,例如: 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> &
Android编程实现自定义toast示例

本文实例讲述了Android编程实现自定义toast.分享给大家供大家参考,具体如下: 效果图: 代码: //自定义布局的toast customViewToast.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast toast = Toast.makeText(ToastTest.this, "top", Toast.LENGTH_SHORT); /
android自定义toast(widget开发)示例

1.Toast控件: 通过查看源代码,发现Toast里面实现的原理是通过服务Context.LAYOUT_INFLATER_SERVICE获取一个LayoutInflater布局管理器,从而获取一个View对象(TextView),设置内容将其显示复制代码代码如下: public static Toast makeText(Context context, CharSequence text, int duration) { Toast result = new Toast(c
基于自定义Toast全面解析

Toast一般用来显示一行文字,用法比较固定: Toast.makeText(Context context,String message,int duration); 但是有时候想用toast 来显示复杂的view甚至是带有图片的view时这时候就要用到自定义的Toast,自定义Toast主要用到一下几个方法如图: 1.setView()方法用来显示用户自定义的view. 2. setGravity()用来确定Toast显示的位置. 3.setDuration()用来设置Toast显示的时间长
微信小程序 Toast自定义实例详解

微信小程序 Toast自定义实例详解实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx
微信小程序Redux绑定实例详解

微信小程序Redux绑定实例详解安装 clone或者下载代码库到本地: git clone https://github.com/charleyw/wechat-weapp-redux 将dist/wechat-weapp-redux.js(或者拷贝minify的也可以)文件直接拷贝到小程序的工程中,例如(下面假设我们把第三方包都安装在libs目录下): cd wechat-weapp-redux cp -r dist/wechat-weapp-redux.js <小程序根目录>/libs
微信小程序组件 marquee实例详解

微信小程序组件 marquee实例详解 1. marquee标签 html是有marquee标签的,可以实现跑马灯效果,但小程序没有,所以要实现.这里考虑使用css3的animation实现. html的marquee是这样使用的. <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1"
微信小程序地图map实例详解

微信小程序地图map实例详解 wxml: class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" co
微信小程序简单教程实例详解

刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 注意:如果要以非管理员微信号在手机上体验该小程序,那么我们还需要操作"绑定开发者".即在"用户身份"-"开发者"模块,绑定上需要体验该小程序
微信小程序省市区选择器实例详解(附源码下载)

微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu
微信小程序template模板实例详解

微信小程序template模板使用前言微信小程序中提供了template使用,即相同的板块可以进行代码互用,如下方的效果图,就可以用template. 效果图一.模板定义模板最重要的是模板的名称,即"" 以下是实例模板代码 <template name="postItem"> <view class='post-container'> <view class='post-author-date'> <image cl
微信小程序tabBar用法实例详解

本文实例讲述了微信小程序tabBar用法.分享给大家供大家参考,具体如下: 1.效果展示 2.原理:在app.json中配置tabBar属性 { "pages": [ "index", "picDisplay" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle&qu
微信小程序数据访问实例详解

先简单说一下,小程序的结构如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的数据访问,如果懂点ajax,都不是问题,没啥好讲的微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问
微信小程序 bnner滚动实例详解

微信小程序 bnner滚动首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加. Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全屏显示才出来. noClickImg 与 ClickImg:切换全屏与非全屏轮播图,绑定了点击事件 changeClick 来切换,只是改变样式即可. Block:图片列表. Number_img:当前轮播 index(currentNumber),与图片 length

微信小程序 Toast自定义实例详解

相关推荐

随机推荐