小程序模仿toast效果

蔚落 2022-01-06 19:07 275阅读 0赞

template建立toast模板

<template name="toast">
        <view class="wxapp-toast-content-box" wx:if="{
         {isShowToast}}">     
          <view class="wxapp-toast-content">         
            <view class="wxapp-toast-content-text">         
              {
         {toastText}}         
            </view>    
          </view>     
        </view> 
      </template>

使用页面引用

<import src="../../template/template.wxml"/>

template建立toast模板的js（我放在了utils里）

const showToast = (text, o, count) => {
      var _this = o;
      count = parseInt(count) ? parseInt(count) : 2000;
      _this.setData({
        toast: { toastText: text, isShowToast: true, }
      });
      setTimeout(function () {
        _this.setData({
          toast: {
            isShowToast: false
          }
        });
      }, count);
    }
    
    module.exports = {
      showToast: showToast
    }

在使用页面的js里引用

//引用
    const common = require('../../utils/util.js');
    //使用
    common.showToast('我在测试toast', this, 1000)

【showToast方法在网上借鉴的别人的，出处找不到了，今天把它提取出来到template使用，比较方便】

转载于:https://www.cnblogs.com/biangz/p/7606709.html

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序多选效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

迷南。/ 2022年10月23日 12:57/ 0 赞/ 176 阅读

相关小程序--左侧滑动效果

一、效果图讲什么都不如直接上效果图好，所以我们先来看下实现效果如何。通过滑动屏幕，或者点击左上角的图标按钮，都能实现侧边栏的划出效果。 ![70][]![

「爱情、让人受尽委屈。」/ 2022年10月06日 00:57/ 0 赞/ 203 阅读

相关小程序-左右滑动效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

Dear 丶/ 2022年10月06日 00:57/ 0 赞/ 48 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 259 阅读

相关微信小程序之『自定义toast』

转载：请写明掘金原文链接及作者名 ‘小小小’ 一个潜心研究小程序QQ群：139128168 ← 点击加群一、微信官方默认toast toast最常见了，几乎

Bertha 。/ 2022年07月14日 14:14/ 0 赞/ 368 阅读

相关模仿电影院座位预定效果

效果 ![这里写图片描述][SouthEast] Html代码： <html> <head> <title>座位预定</title>

痛定思痛。/ 2022年06月13日 07:49/ 0 赞/ 217 阅读

相关模仿终端打字效果

模仿终端打字效果 … <script type="text/javascript"> var charIndex = -1; va

青旅半醒/ 2022年05月04日 06:00/ 0 赞/ 244 阅读

相关小程序模仿抖音

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

水深无声/ 2022年04月10日 12:29/ 0 赞/ 551 阅读

相关小程序模仿toast效果

template建立toast模板  <template name="toast">

蔚落/ 2022年01月06日 19:07/ 0 赞/ 276 阅读

相关小程序请假效果

var dateTimePicker = require('../../utils/dateTimePicker.js'); Page({ // 页

末蓝、/ 2021年09月17日 03:08/ 0 赞/ 428 阅读