在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象

效果: 默认2秒展示,上移动画隐藏

/**
* 展示顶部 tip , 多次快速调用,会覆盖前次展示
*/
UIComponent.showToptip = function (opt = {}) {
var self = this;
if (self.uiComponent_topTip_timer) { //如果之前有timer,那么取消后重新创建
clearTimeout(self.uiComponent_topTip_timer);
}
if (typeof opt == "string") {
opt = {
content: opt
}
}
//默认参数,也是外部参考的传参
var defaultOptions = {
show: false, //是否显示,默认不显示
style: "", //外部传入的自定义样式,比如字体,背景色
content: "操作成功", //默认的内容
duration: 2000 //显示延迟几秒
};
let app = getApp();
opt = app.util.extend(defaultOptions, opt);
self.setData({
'uiComponent.toptip.show': true,
'uiComponent.toptip.style': opt.style,
"uiComponent.toptip.content": opt.content
});
self.uiComponent_topTip_timer = setTimeout(() => {
self.setData({
'uiComponent.toptip.show': false
});
}, opt.duration);
}
 <view class="uiComponent uiComponent_toptip uiComponent_toptip_{{uiComponent.toptip.show &&'active'}}"
style="{{uiComponent.toptip.style}}" >{{uiComponent.toptip.content}} </view>
.uiComponent {
z-index:;
}
/* toptip 顶部提示条效果 */
.uiComponent_toptip {
width: 100%;
display: block;
top:-50px;
position: fixed; text-align: center;
line-height: 2.3;
font-size: 30rpx;
transition: all .2s linear ;
} .uiComponent_toptip_active {
top:;
transition: all .3s linear ;
min-height: 32px;
color: #fff;
background-color: rgba(0,0,0,.8);
}

微信小程序 - toptip效果的更多相关文章

  1. 微信小程序 折叠效果

    <view class='help'> <view class='help_item'> <view class='title' data-index='1' catch ...

  2. 微信小程序 --- 日历效果

    wxml部分: <view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ yea ...

  3. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. weapp微信小程序初探demo

    https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览

  5. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  6. 微信小程序初见+nodejs服务端 (一个简单的博客)

    推荐网址: 腾讯云快速开发(nodejs前后端):https://developers.weixin.qq.com/miniprogram/dev/qcloud/qcloud.html#%E5%AF% ...

  7. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 微信小程序资源整理

    微信小程序相关的文档.教程.开源项目等资源的整理,以便于开发学习使用. —— —— 收录仅作个人学习使用,涉及侵权行为及时联系: maple_6392@163.com 项目地址:GitHub | 码云 ...

  9. 微信小程序学习 动手撸一个校园网小程序

    动手撸一个校园网微信小程序 高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序. 效果预览 源码地址:Gith ...

随机推荐

  1. (LeetCode 53)Maximum Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  2. 根据轨迹线构造GPS点的方法

    在地理国情普查项目中,元数据中的轨迹线图层由外业GPS点转换构成.理论上,外业GPS轨迹点在采集时间.采集人员等方面应当保持一致.但是,由于管理上.操作上的原因导致有元数据轨迹线而外业GPS轨迹点的现 ...

  3. iOS 图片比例缩放

    方法 //Resize image - (UIImage *)resizeImage:(UIImage *)image withQuality:(CGInterpolationQuality)qual ...

  4. java 和 C# 响应输出的相似度

    java servlet response: bf.append("Shipment No, STT No, WIN Event, DateTime, WOU Envent, DateTim ...

  5. select使用实例——str_cli函数(修订版)

    我们可以使用select函数重写http://www.cnblogs.com/nufangrensheng/p/3587962.html中的str_cli函数,这样服务器进程一终止,客户就能马上得到通 ...

  6. 流编辑器sed

    sed与grep一样,都起源于老式的ed编辑器,因其是一个流编辑器(stream editor)而得名.与vi等编辑器不同,sed是一种非交互式编辑器(即用户不必参与编辑过程),它使用预先设定好的编辑 ...

  7. Unity3D入门工具介绍(一)

    1.UnitySetup-4.1.2.exe安装包 2unity.pro.4.1.2.patch-MPT.exeUnity3D破解补丁  关于Unity3d 可以看下这个 http://book.2c ...

  8. window下虚拟环境搭建

    1.找到你的host文件

  9. 工作总结 表单提交中 Input 设置 disabled readonly

    input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正 ...

  10. chome 离线安装包地址

    https://www.chromedownloads.net/chrome32win-stable/  --32bit https://www.chromedownloads.net/chrome6 ...