微信小程序 - toptip效果

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

1. /**
2. * 展示顶部 tip , 多次快速调用,会覆盖前次展示
3. */
4. UIComponent.showToptip = function (opt = {}) {
5. var self = this;
6. if (self.uiComponent_topTip_timer) { //如果之前有timer,那么取消后重新创建
7. clearTimeout(self.uiComponent_topTip_timer);
8. }
9. if (typeof opt == "string") {
10. opt = {
11. content: opt
12. }
13. }
14. //默认参数,也是外部参考的传参
15. var defaultOptions = {
16. show: false, //是否显示,默认不显示
17. style: "", //外部传入的自定义样式,比如字体,背景色
18. content: "操作成功", //默认的内容
19. duration: 2000 //显示延迟几秒
20. };
21. let app = getApp();
22. opt = app.util.extend(defaultOptions, opt);
23. self.setData({
24. 'uiComponent.toptip.show': true,
25. 'uiComponent.toptip.style': opt.style,
26. "uiComponent.toptip.content": opt.content
27. });
28. self.uiComponent_topTip_timer = setTimeout(() => {
29. self.setData({
30. 'uiComponent.toptip.show': false
31. });
32. }, opt.duration);
33. }

1. <view class="uiComponent uiComponent_toptip uiComponent_toptip_{{uiComponent.toptip.show &&'active'}}"
2. style="{{uiComponent.toptip.style}}"
3.  
4. >{{uiComponent.toptip.content}} </view>

1. .uiComponent {
2. z-index: 110;
3. }
4. /* toptip 顶部提示条效果 */
5. .uiComponent_toptip {
6. width: 100%;
7. display: block;
8. top:-50px;
9. position: fixed; text-align: center;
10. line-height: 2.3;
11. font-size: 30rpx;
12. transition: all .2s linear ;
13. }
14.  
15. .uiComponent_toptip_active {
16. top:0;
17. transition: all .3s linear ;
18. min-height: 32px;
19. color: #fff;
20. background-color: rgba(0,0,0,.8);
21. }