微信小程序 自定义Toast实例代码

微信小程序 自定义Toast实例代码

Toast样式可以根据需求自定义，本例中是圆形

<!--按钮-->
<view class="btn" bindtap="btn_toast">自定义Toast</view>
<!--以下为toast显示的内容 opacity为透明度-->
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
  {{toastText}}
</view>
<view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">
  {{toastText1}}
</view>

Page {
 background: #f9f9f9;
}
/*按钮*/
.btn {
 width: 20%;
 margin-left: 38%;
 margin-top: 100rpx;
 text-align: center;
 border-radius: 10rpx;
 border: 10px solid #f00;
 background: #f00;
 color: #fff;
 font-size: 22rpx;
}
/*toast*/
.toast_box {
 width: 30%;
 height: 221rpx;
 margin-top: 60rpx;
 margin-left: 35%;
 text-align: center;
 border-radius: 166rpx;
 background: #f00;
 color: #fff;
 font-size: 32rpx;
 line-height: 220rpx;
}

Page({ 

 /**
  * 页面的初始数据
  */
 data: {
  //toast默认不显示
  isShowToast: false
 },
 showToast: function () {
  var _this = this;
  // toast时间
  _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;
  // 显示toast
  _this.setData({
   isShowToast: true,
  });
  // 定时器关闭
  setTimeout(function () {
   _this.setData({
    isShowToast: false
   });
  }, _this.data.count);
 },
 /* 点击按钮 */
 btn_toast: function () {
  console.log("点击了按钮")
  //设置toast时间，toast内容
  this.setData({
   count: 1500,
   toastText: '自定义',
   toastText1: 'Toast'
  });
  this.showToast();
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) { 

 },})

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

赞 (0)

相关推荐

  • 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

  • 超简单实现Android自定义Toast示例（附源码）

    超简单实现Android自定义Toast示例（附源码）

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

  • Android编程实现自定义toast示例

    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 显示时间

    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的自定义使用

    分享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自定义实例详解 实现类似于Android的Toast提示 index.js: var timer; var inputinfo = ""; var app = getApp() Page({ data: { animationData:"", showModalStatus:false }, onLoad: function () { }, showModal: function () { // 显示遮罩层 var animation = wx

  • 基于自定义Toast全面解析

    基于自定义Toast全面解析

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

  • android之自定义Toast使用方法

    android之自定义Toast使用方法

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

  • 微信小程序 自定义Toast实例代码

    微信小程序 自定义Toast实例代码

    微信小程序 自定义Toast实例代码 Toast样式可以根据需求自定义,本例中是圆形 <!--按钮--> <view class="btn" bindtap="btn_toast">自定义Toast</view> <!--以下为toast显示的内容 opacity为透明度--> <view class="toast_box" style="opacity:{{0.9}}"

  • 微信小程序自定义toast的实现代码

    今天写微信小程序突然发现一个尴尬的问题,请求报错需要提示,就去小程序API里找,可悲的小程序的toast并不能满足我的需求,原生提供的方法调用如下 wx.showToast({ title: '成功', icon: 'succes', duration: 1000, mask:true }) 下面是官方API的说明 可以看到支持的图标只有两种,连基本的warning和error都没有,最可悲的是title最多只支持7个汉字的长度,完全不能忍啊,现在哪个框架里还没有个正儿八经提示框的组件,想想还是

  • 微信小程序自定义toast组件的方法详解【含动画】

    微信小程序自定义toast组件的方法详解【含动画】

    本文实例讲述了微信小程序自定义toast组件的方法.分享给大家供大家参考,具体如下: 怎么创建就不说了,前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="to

  • 微信小程序自定义toast实现方法详解【附demo源码下载】

    本文实例讲述了微信小程序自定义toast实现方法.分享给大家供大家参考,具体如下: 一.微信官方默认toast toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~ 微信自带toast的效果: js文件: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 用法超级简单,但官方小程序有几个问题: 只能显示success.loading两种icon 且icon不可去除 持

  • 微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解

    微信小程序 自定义对话框实例详解 效果图: index.wxml: <button type="default" bindtap="clickbtn"> 点击 </button> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <

  • 微信小程序日期选择器实例代码

    /* JS代码部分 */ 3 const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.pu

  • 微信小程序自定义组件components(代码详解)

    在写小程序代码的时候,我们发现经常有一段代码我们经常敲,经常使用某一自定义组件,例如商城首页的轮播图和商品详情页的商品展示栏是近乎相同的代码:微信小程序里的弹窗提示可以使用在多个地方- 小程序自定义组件 找到components目录,没有就新建 在compoents目录里新建一个用于存放代码的目录(下面用g-swiper表示) 在g-swiper目录里新建Compoent(名字自取),新建后会和新建Page时一样自动生成四个页面文件(g-swiper.wxml g-swiper.wxss g-s

  • 微信小程序自定义toast弹窗效果的实现代码

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的:但是如果图标是字体,或者提醒的内容有很长捏(小程序中提醒的内容最多只能设置7个字,多了会被隐藏),那就只有自定义toast弹窗了: 第一步:新建一个wxml文件用来装模板,方便以后使用,比如 然后在这里面添加模板代码 <template name="toast"> //nam

  • 微信小程序 天气预报开发实例代码源码

    微信小程序 天气预报开发实例代码源码

    微信小程序 天气预报 实例主要功能 自动定位所在城市 根据所定位的城市获取天气信息 显示未来几天的天气情况 查看当天天气的详情信息 先看效果图 微信小程序-天气 首页 微信小程序-天气 详情页 思路及编码部份自动定位所在城市 wx.getLocation:通过官方文档的API中可以看到wx.getLocation可以获取到当前的地理位置和速度,不过获取到的地理位置只是经纬度,而不是真正的城市名称,但我们可以根据这个经纬度来获取城市名称等信息(需要用到第三方接口),再通过城市名称和城市ID获取对应

  • 微信小程序倒计时功能实例代码

    微信小程序倒计时功能实例代码

    本实例的主要功能是:单击按钮弹出一个半透明的弹出层,在规定的时间后才能激活关闭按钮,关闭弹出层. wxml部分 <view class="wrap"> <view class="btns"> <button formType="submit" class="btn" hover-class='btn_on' bindtap='show'>使用说明</button> <but

随机推荐