精华内容
下载资源
问答
  • <!DOCTYPE html> <html lang="en"> <head> ...弹窗</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,...

     

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>弹窗</title>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    		<style type="text/css">
    			.toast {
    				padding: 10px 25px 10px 25px;
    				background: rgba(0, 0, 0, .5);
    				border-radius: 5px;
    				color: #ffffff;
    				text-align: center;
    				position: fixed;
    				left: 50%;
    				top: 40%;
    				transform: translate(-50%, -50%);
    				z-index: 100;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test">
    			<toast v-if='isShow' :message='isShowMsg'></toast>
    			<div class="container" @click="showToast">
    				点击显示 showToast
    			</div>
    		</div>
    		<script>
    			var that;
    			Vue.component('toast', {
    				props: ['message'],
    				template: `
    			    <div class="toast_bg_transparent">
    			        <div class="toast">
    			            <span>{{message}}</span>
    			        </div>
    			    </div>
    			    `
    			})
    			new Vue({
    				el: '#test',
    				data() {
    					return {
    						isShow: false,
    						isShowMsg: '', //弹窗提示
    					}
    				},
    				methods: {
    
    					showToast() {
    						console.log('点击了 showToast')
    						this.isShow = true;
    						this.isShowMsg = '错误提示';
    
    						setTimeout(() => {
    							this.isShow = false;
    						}, 1000);
    					}
    				},
    				mounted() {}
    			})
    		</script>
    	</body>
    </html>
    

     

    展开全文
  • 效果图 代码 <!DOCTYPE html> <html lang="en">...弹窗</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...

    效果图

    代码

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>弹窗</title>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    		<style type="text/css">
    			.toast {
    				padding: 10px 25px 10px 25px ;
    				background: rgba(0, 0, 0, .5);
    				border-radius: 5px;
    				color: #ffffff;
    				text-align: center;
    				position: fixed;
    				left: 50%;
    				top: 40%;
    				transform: translate(-50%, -50%);
    				z-index: 100;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test">
    			<toast v-if='isShow' :message='isShowMsg'></toast>
    			<div class="container" @click="showToast">
    				点击显示 showToast
    			</div>
    		</div>
    		<script>
    			var that;
    			Vue.component('toast', {
    				props: ['message'],
    				template: `
    			    <div class="toast_bg_transparent">
    			        <div class="toast">
    			            <span>{{message}}</span>
    			        </div>
    			    </div>
    			    `
    			})
    			new Vue({
    				el: '#test',
    				data() {
    					return {
    						isShow: false,
    						isShowMsg: '', //弹窗提示
    					}
    				},
    				methods: {
    
    					showToast() {
    						console.log('点击了 showToast')
    						this.isShow = true;
    						this.isShowMsg = '错误提示';
    
    						setTimeout(() => {
    							this.isShow = false;
    						}, 1000);
    					}
    				},
    				mounted() {}
    			})
    		</script>
    	</body>
    </html>
    

     

    展开全文
  • toast弹窗安卓

    2021-03-14 19:27:36
    安卓toast弹窗 toast弹窗是安卓的一个常用控件,它可以便利的获取上下文对象的地方,进行弹窗提示。本文不追究其中原理,只研究方法。toast的几个常用方法有四种。分别是普通弹窗,改变位置的弹窗,图片弹窗,...

    安卓toast弹窗


    toast弹窗是安卓的一个常用控件,它可以便利的获取上下文对象的地方,进行弹窗提示。本文不追究其中原理,只研究方法。toast的几个常用方法有四种。分别是普通弹窗,改变位置的弹窗,图片弹窗,自定义弹窗。

    1,普通toast弹窗

    Toast.makeText()是一个有参函数,参数值有三个。
    第一个参数是当前的上下文控件,getApplicationContext()获取上下文对象或this获取当前对象。
    第二个参数是你自己要显示的文字。
    第三个参数是显示的时间长短。有两种形态的值,一个是ms为单位。一个是长的3.5s和短的值2s。
    但是这种toast普通弹窗不能点按钮取消,只能等待时间过去。自行消失。是典型的提醒框。
    Toast toast=Toast.makeText(this, "显示文字", 10ms);
    toast.show();
    //this代表当前对象,"显示文字"是在提醒框的文字
    //三种形态10ms,Toast.LENGTH_LONG长的3.5s,Toast.LENGTH_SHORT短的2s
    //显示提醒框
    

    2,设置Toast弹窗弹出的位置

    Toast.setGravity()是一个有参函数,参数值也是三个。
    第一个参数设置toast弹窗在屏幕中显示的位置Gravity.top置顶,Gravity.center居中,Gravity.bottom底部。
    第二个参数是设置x轴的值,正数为右,负数为左。
    第三个参数是设置y轴的值,正数为上,负数为下。
    toast.setGravity(Gravity.TOP, 0, 0);
    //设置顶部显示,偏移量为0
    

    3,Toast弹窗中有图片

    在弹窗中添加图片,其实本质是给弹窗视图添加一个图片视图,弹窗视图中有布局对象,在布局对象中添加图片视图。 toastView.addview(图片视图,0)
    ImageView img= new ImageView(this); 
    //创建图片视图对象 ,this获取当前文件
    img.setImageResource(); 
    //设置图片
    LinearLayout toastView = (LinearLayout) toast.getView(); 
    //获得toast线性布局 
    toastView.setOrientation(LinearLayout.HORIZONTAL); 
    //设置线性布局为横向
    toastView.addView(img, 0); 
    //将Img在加入到此布局中的第一个位置 
    

    4,自定义Toast弹窗

    大概的原理是这样的new 一个toast类对象。然后你可以在类里写东西。也可以实例化一个弹窗对象,然后赋给新的对象样式。 这些是下面代码的详解

    linflate()方法
    layoutlinflater类方法

    LayoutInflater inflater=LayoutInflater.from(this);//创建一个layoutInFlater类对象,获取的控件变成视图
    View root=inflater.inflate(R.layout.toast, null);//将布局文件/res/layout/toast.xml实例化为root对象,从当前对象中提取视图。
    Toast toast=new Toast(MainActivity.this);//完全自定的toast要用构造函数来生成对象
    toast.setView(root);//设置自定义toast样式
    
    toast.setDuration(Toast.LENGTH_LONG);//设置toast的显示时间
    toast.show();  
    
    展开全文
  • android,Toast弹窗

    2015-06-15 10:41:57
    androidToast弹窗位置,以及图片和文字一起弹出。
  • 前言:本人也是刚接触Android开发,自己也在摸索中,在实现功能的过程中走了不少弯路,其中很重要...Toast toast=Toast.makeText(getApplicationContext(),"弹窗提示成功",Toast.LENGTH_SHORT);toast.setGravity(Gra...

    前言:本人也是刚接触Android开发,自己也在摸索中,在实现功能的过程中走了不少弯路,其中很重要的原因之一就是查询不到想要的内容,所以想把自己的经验分享出来。

    首先是Toast的应用,直接上关键代码。

    Toast toast=Toast.makeText(getApplicationContext(),"弹窗提示成功",Toast.LENGTH_SHORT);

    toast.setGravity(Gravity.CENTER,0,0);

    Toast.show();

    一般还要设置一个button的点击事件,点击之后出现弹窗。

    首先要获取Button的ID

    Button btn=(Button)findViewById(R.id.btn1);

    btn.setOnClickListener(onClick);

    实现:

    bf6d132583ab7123f5f56009527f4efa.png

    MainAvtivity.java代码

    479854a5b464c3f0921aa50c012eff03.png

    XML代码

    63720bb05b744e46c0a88314f0739fdd.png

    效果图

    接下来是获取控件的Text,这里用到getText();

    比如想要获取Button的值,主要代码就是String mStr=btn.getText().toString();

    实现:这里只放了效果图,只要加上上边这行代码,再把Toast中显示的内容替换就行了。

    af6d5142b77eae70cfb1978bb3504682.png

    效果图

    这就是Toast的全部内容,希望能对大家有所帮助,敬请期待后续。(欢迎私信交流)

    展开全文
  • 本文通过实例给大家讲解了vue的toast弹窗组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 类似于Toast弹窗提示,不同于iOS的Alter,可自定义宽高、展示坐标、颜色、展示时间等,展示之后自动消失!
  • 主要介绍了微信小程序使用component自定义toast弹窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 效果图 代码: <!DOCTYPE html> <html lang="en">...弹窗</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
  • 微信小程序里面的自带弹窗icon只有两种,success和loading。这篇文章主要介绍了微信小程序之自定义toast弹窗效果的实现代码 ,需要的朋友可以参考下
  • Flutter一步实现Toast 弹窗(fluttertoast 库) 在 Flutter 中,想要实现一个 Toast 弹窗效果,最简单、最直接的方法就是使用 fluttertoast 库来实现。 官网地址:https://pub.flutter-io.cn/packages/fluttertoast...
  • 最近新项目遇到一个需求,在输入错误的时候,使用toast弹窗提示,在此之前,我使用的弹窗都是只写在单个页面上,需要的时候写一个,虽然也可以,但是对这个项目来说就太过麻烦了,于是想要写一个toast弹窗组件,在...
  • 先看看使用系统Toast存在的问题:1.当通知权限被关闭时在华为等手机上Toast不显示;2.Toast的队列机制在不同手机上可能会...虽然大部分情况下效果都是OK的,但其实TYPE_TOAST弹窗依然存在兼容问题:4.Android8.0之后...
  • 以微信登录界面的toast弹窗为例: 我的appium版本是1.17.1,服务器运行时日志有这样的打印信息 所以我的desired_caps如下(如果是之前的版本,需要安装uiautomator2,并且在初始化时指定automationName为...
  • 这样以来toast弹窗就成了小程序不可或缺的组件。mptosat用过,不赖的一款。下面记录以下使用方法: 介绍 mptoast 是一个基于mpvue的简单弹窗组件 github地址:https://github.com/noahlam/mpvue-toast 安装 1....
  • Toast弹窗提示信息

    千次阅读 2014-01-13 11:29:05
      * Toast弹窗提示信息   *   * @param context   * 上下文(某一Activity)   * @param message   * 消息内容   */   public static void showMessage(Context context, String message)
  • 标题Android 开发(一):Toast弹窗与获取控件的值 本人也是刚接触Android开发,自己也在摸索中,在实现功能的过程中走了不少弯路,其中很重要的原因之一就是查询不到想要的内容,所以想把自己的经验分享出来。 主要...
  • React Native技术篇—自定义Toast弹窗

    千次阅读 2019-01-16 17:18:02
    注意:未经允许不可私自转载,违者必究 React Native官方文档:https://reactnative.cn/docs/getting-started/ ... 在写自定义Toast弹窗之前我们要先创建一个React Native第二视图层。 创建教程:https://b...
  • vue封装一个toast弹窗在js中调用

    千次阅读 2019-07-09 17:59:14
    实现一个基于vue直接跟js交互的toast弹窗插件 最终完成的效果图如下: 1.先写一个Toast.vue组件 文件位置/src/components/common/toast/Toast.vue <template> <div class="wrap" v-if="show" :...
  • 微信小程序之自定义toast弹窗

    千次阅读 2017-12-13 13:01:49
    但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了; 第一步:新建一个wxml文件用来装模板,方便以后使用,比如
  • toast弹窗 js

    千次阅读 2019-04-03 14:00:42
    //界面toast提示 /*使用方法 Toast('这是一个弹框',2000)*/ function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement('div'); m.innerHTML = msg; m....
  • 封装toast弹窗

    2019-07-24 11:25:07
    import toastComponent from "./toast.vue"; //把vue组件引进来 // 返回一个 扩展实例构造器 const ToastConstructor = vue.extend(toastComponent); // 定义弹出组件的函数 接收2个参数, 要显示...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 554
精华内容 221
关键字:

toast弹窗