[color=black]在Page顶部下滑一个提示条 , 代码见 /mixins/UIComponent.js ,其中的self 可以认为是微信小程序的Page对象
效果: 默认2秒展示,上移动画隐藏
微信小程序 - toptip效果
[b]88301-20171128175241612-573952559.png[/b] [i](141.9 KB, 下载次数: 0)[/i]
下载附件 [url=" url=]保存到相册[/url]
[align=left]2017-11-29 10:09 上传[/align]
[list=1]
[*]/**
[*] * 展示顶部 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);
[*]}
[/list]
[list=1]
[*]<view class="uiComponent uiComponent_toptip uiComponent_toptip_{{uiComponent.toptip.show &&'active'}}"
[*] style="{{uiComponent.toptip.style}}"
[*]
[*] >{{uiComponent.toptip.content}} </view>
[/list]
[list=1]
[*].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);
[*]}
[/list]
[/color]
|
|
