zoukankan      html  css  js  c++  java
  • 小程序模仿toast效果

    template建立toast模板

    <!--wxapp-toast start-->    
      <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>
    <!--wxapp-toast end--> 

    使用页面引用

    <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使用,比较方便】

  • 相关阅读:
    模拟tap事件和longTap事件
    jquery工具方法总结
    outline:0与outline:none区别
    babel吐槽
    兼容ie8 rgba()写法
    git删除文件夹
    css简写总结
    回调函数实例—(二)
    回调函数的那些事儿(转载)
    回调函数好文章汇总
  • 原文地址:https://www.cnblogs.com/biangz/p/7606709.html
Copyright © 2011-2022 走看看