推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：505
-
2020-05-12 浏览：502
微信小程序 - toptip效果
发布时间:2020-11-06在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);
