精华内容
下载资源
问答
  • toast弹窗安卓
    千次阅读
    2021-03-14 19:27:36

    安卓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();  
    
    更多相关内容
  • 本文通过实例给大家讲解了vue的toast弹窗组件功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 主要介绍了微信小程序使用component自定义toast弹窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 常用工具message和toast弹窗图片预览常用工具message和toast弹窗浏览器适配支持Chrome所有版本支持Firefox所有版本支持Safari所有版本不支持IE任何版本常用工具message和toast弹窗使用教程默认调用:alert('请打开...

    常用工具message和toast弹窗图片预览

    325827231025.png

    常用工具message和toast弹窗浏览器适配

    支持Chrome所有版本

    支持Firefox所有版本

    支持Safari所有版本

    不支持IE任何版本

    browser-12.png

    常用工具message和toast弹窗使用教程

    默认调用:

    alert('请打开麦克风')

    支持多参数:

    alert({

    title: '我是标题',

    content: '请打开https://huajiakeji.com/',

    doneText: '按钮文字'

    }).then(callback)

    默认调用:

    confirm('请打开麦克风')

    传递参数:

    confirm({

    title: '我是标题',

    content: '请打开麦克风',

    doneText: '确认按钮文字',

    cancalText: '取消按钮文字'

    }).then(() => {

    console.log('已确认')

    }).catch(() => {

    console.log('已取消')

    })

    默认调用:

    toast('请打开麦克风')

    设置停留时间和icon图标:

    toast({

    time: 3000,

    content: '停留3秒再消失',

    type: 'loading'

    })

    查看更多

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

    效果图

    代码:

    <!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>

     

    展开全文
  • //或者直接传入一个el参数来挂载 new divComponent({el:"#app"}) 好比当我想自定义一个toast弹窗,即可使用Vue.extend实现 //先定义好toast.vue组件模板 如下 <template> <div class="container"> <div> { text ...
    Vue.extend方法,返回的是一个扩展实例构造器

    可以理解为组件类的一个构造函数,其属性都为组件内的对应的属性

    //定义一个组件的构造函数
    const divComponent = Vue.extend({
    	template:`<div v-on:click="click">{ { text } }</div>`,
    	data() {
    		return {
    			text: 'hello word'
    		}
    	},
    	methods:{
    		click(){
    			console.log("click")
    		}
    	}
    })
    //调用new方法 实例化组件并挂载dom上
    new divComponent().$mount('#app');
    //或者直接传入一个el参数来挂载
    new divComponent({el:"#app"})
    
    好比当我想自定义一个toast弹窗,即可使用Vue.extend实现
    //先定义好toast.vue组件模板 如下
    <template>
    	<div class="container">
    		<div> { text } </div>
    	</div>
    </template>
    
    //新建toast.js 
    import Vue from 'vue';
    import toast from './toast.vue'
    //创建构造器 将组件放进去
    const ToastConstructor =  Vue.extend(toast);
    //定一个触发toast显示的方法 并且写好显示的规则、参数等
    function showToast(text,duration=2200){
    	const toastDOM = new ToastConstructor({
    		el:document.createElement("div"),
    		data(){
    			return{
    				text:text
    			}
    		}
    	})
    	//添加到body中
    	document.body.appendChild(toastDOM.$el)
    	//自动消失
    	setTimeout(()=>{
    		let dom = toastDOM.$el
    		dom.parentNode.removeChild(dom)
    	},duration)
    }
    //按照vue规则,定义全局方法需要暴露一个 install 方法,如default导出为方法则可当做install使用 因此这样写
    function toastRegistry(){
    	Vue.prototype.$toast = showToast
    }
    export default toastRegistry
    //最后在main.js中使用Vue.use(toastRegistry)引用即可
    
    展开全文
  • 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....
  • 效果图 代码 <!DOCTYPE html> <html lang="en">...弹窗</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
  • toast 弹窗 js

    2022-04-18 09:58:43
    使用js封装一个全局Toast提示弹窗组件,不使用UI库 export const Toast = { data() { return { } }, mounted() { }, methods: { // Toast 消息提示 toast(obj) { let { text, duration, img } = obj || {}...
  • 但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了; 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加...
  • 2.3 插入Toast弹窗

    2018-07-31 14:35:09
    在程序入口界面中插入Toast弹窗,点击“程序入口”打开“MainUIActivity.smali”文件,在方法窗口搜索“onCreate”方法,找到到调用“setContentView”方法的位置,如图2.8所示。  图 2.8 在...
  • Toast:弹窗 package com.example.newthree; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget....
  • 前言:我们在项目开发的过程中,也许会在很多页面实现弹窗的消息,普通的方法就是在这每个界面写些原生js代码来控制弹窗效果,这样明显非常冗余。可通过引入组件的方式,可解决部分冗余的代码,但是每个要使用的界面...
  • Vue.prototype.$mytoast = new Vue() Vue.prototype.$mytoast = mytoast export default mytoast 弹窗样式,放到全局的样式配置内 /* 提示框样式 */ .myshowToast{ display: block; width: 120px; height: 120px; ...
  • 原生JS之Toast弹窗

    2021-12-22 16:31:14
    Toast("复制成功", 2000); } function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement("div"); m.innerHTML = msg; m.style.cssText = ...
  • toast.js提示弹窗

    2020-05-16 10:16:55
    toast.js提示弹窗
  • vue写一个toast弹窗公共组件

    千次阅读 2018-12-20 09:40:34
    最近新项目遇到一个需求,在输入错误的时候,使用toast弹窗提示,在此之前,我使用的弹窗都是只写在单个页面上,需要的时候写一个,虽然也可以,但是对这个项目来说就太过麻烦了,于是想要写一个toast弹窗组件,在...
  • Flutter toast弹窗实现

    2021-12-27 16:56:35
    一.Flutter toast库配置,可参考fluttertoast配置引用 1.在pubspec.yaml中配置fluttertoast库,通过Pub get 获取fluttertoast的版本,通过Pub upgrade更新,eg: # The following adds the Cupertino Icons font ...
  • 以微信登录界面的toast弹窗为例: 我的appium版本是1.17.1,服务器运行时日志有这样的打印信息 所以我的desired_caps如下(如果是之前的版本,需要安装uiautomator2,并且在初始化时指定automationName为...
  • vue Toast 弹窗

    2019-10-05 00:17:15
    创建一个message.vue组件 <template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'"> <i :class="iconState ?'success':'wrong'">... ...
  • 类似于Toast弹窗提示,不同于iOS的Alter,可自定义宽高、展示坐标、颜色、展示时间等,展示之后自动消失!
  • 标题Android 开发(一):Toast弹窗与获取控件的值 本人也是刚接触Android开发,自己也在摸索中,在实现功能的过程中走了不少弯路,其中很重要的原因之一就是查询不到想要的内容,所以想把自己的经验分享出来。 主要...
  • toast.show('要提示的内容',2000) //2000是时间,2s后弹窗消失 具体代码如下: toast.js部分,需要的页面引用下这个js // 常用方法1 闪屏 toast 提示,2秒后关闭 var toast = { t: null, show: function (msg, ...
  • From:... 使用 monitor 查看效果一样: 插入 弹窗 道理一样。 保存,编译,运行 也可以自己写 smali 代码,引入自定义的 smali 包,强制弹出窗口等操作。。。 更多看视频教程。。。
  • 目前已经完成了toast组件模板,接下来就是在需要显示这个弹窗的页面中使用它。 index.json :引入组件 { " usingComponents ": { " toast ": "/components/Toast/toast" } } index.wxml : ...
  • <!DOCTYPE html> <html lang="en"> <head> ...弹窗</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,...
  • android,Toast弹窗

    2015-06-15 10:41:57
    androidToast弹窗位置,以及图片和文字一起弹出。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,309
精华内容 3,323
关键字:

toast弹窗

友情链接: g2.zip