微信小程序 - toptip效果 - 新聞資(zī)訊 - 雲南小程序開發|雲南軟件開發|雲南網站(zhàn)建設-西山區知普網絡科技工作室

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不管是網站(zhàn),軟件還是小程序,都要直接或間接能為您産生價值,我們在追求其視覺表現的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站(zhàn)成為營銷工具,讓軟件能切實提升企業(yè)内部管理水平和(hé)效率。優秀的程序為後期升級提供便捷的支持!

微信小程序 - toptip效果

發表時間:2021-3-31

發布人:葵宇科技

浏覽次數:36

在Page頂部下(xià)滑一個(gè)提示條 , 代碼見 /mixins/UIComponent.js ,其中(zhōng)的self 可(kě)以認為是微信小程序的Page對象

效果: 默認2秒展示,上移動(dòng)畫隐藏

  1. /**
  2. * 展示頂部 tip , 多次快速調用,會覆蓋前次展示
  3. */
  4. UIComponent.showToptip = function (opt = {}) {
  5. var self = this;
  6. if (self.uiComponent_topTip_timer) { //如(rú)果之前有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: "", //外部傳入的自定義樣式,比如(rú)字體,背景色
  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. >{{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. .uiComponent_toptip_active {
  15. top:0;
  16. transition: all .3s linear ;
  17. min-height: 32px;
  18. color: #fff;
  19. background-color: rgba(0,0,0,.8);
  20. }

相關(guān)案例查看更多