微信小程序 - toptip效果
在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: 110; } /* 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:0; transition: all .3s linear ; min-height: 32px; color: #fff; background-color: rgba(0,0,0,.8); }