侧边工具条实现 scss+requirejs（1）

最新推荐文章于 2023-06-07 14:26:06 发布

原创最新推荐文章于 2023-06-07 14:26:06 发布 · 592 阅读

2 ·

CC 4.0 BY-SA版权

SASS 同时被 2 个专栏收录

7 篇文章

订阅专栏

requirejs

5 篇文章

订阅专栏

本文介绍了如何使用SCSS编写CSS样式，并结合RequireJS和jQuery实现页面的返回顶部功能。作者通过一个慕课案例复习了SCSS，并分享了三种HTML布局的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

慕课上的一个案例，刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊，拖了好久好久哦。

实现的效果大概是这样

三种html的布局以及优缺点：

+ 第一种是用雪碧图，通过改变hover的定位来改变图片背景。缺点是如果要更改图标需要同时更改一整张图。
+ 第二种是通过使用图标字体的方式，优点是可以随时更改图片以及颜色。布局稍微复杂一点点。
+ 第三种是通过before和after的方法，布局更简单，但是css代码更加复杂。

*下面是第一种和第二种的布局方式*

<aside class="toolbar">
        <!-- a[href="javascript:;"].toolbar-item.toolbar-item-weixin*4 -->
        <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
        <a href="javascript:;" class="toolbar-item toolbar-item-app">
            <span class="toolbar-layer"></span>
        </a>
        <a href="javascript:;" class="toolbar-item toolbar-item-top" id="backTop"></a>
    </aside>

<aside class="toolbar">
    <!-- a[href="javascript:;"].toolbar-item.toolbar-item-weixin*4 -->
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">公众<br/>账号</span>
        </span>
        <span class="toolbar-layer toolbar-layer-weixin"></span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">意见<br/>反馈</span>
        </span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">app<br/>下载</span>
        </span>
        <span class="toolbar-layer toolbar-layer-weixin"></span>
    </a>
    <a href="javascript:;" class="toolbar-item">
        <span class="toolbar-btn">
            <i class="toolbar-icon"></i>
            <span class="toolbar-text">返回<br/>顶部</span>
        </span>
    </a>
</aside>

scss 实现css样式

+ 注意一：首先是取名方式按照BEM思想，然后先写统一样式，对固定的样式采取定义变量的形式
+ 注意二：在实现所有样式以后，再次提取出公共样式，并且对样式设计通过@mixin @extend等进行简化，在这里就通过@mixin为浏览器兼容定义了方法

@charset "UTF-8";
$toolbar-size: 52px;
//背景图片定位方法
@mixin toolbar-item($pos,$hoverPos){
  background-position:$pos;

  &:hover {
    background-position:$hoverPos;
  }
}
/**
常用函数工具条
 */
@mixin transition($transition){
  -webkit-transition:$transition;
  -moz-transition:$transition;
  -ms-transition:$transition;
  -o-transition:$transition;
  transition:$transition;
}

@mixin transform-origin($origin){
  -webkit-origin:$origin;
  -moz-origin:$origin;
  -ms-origin:$origin;
  -o-origin:$origin;
  origin:$origin;
}

@mixin scale($scale){
  -webkit-transform:$scale;
  -moz-transform:$scale;
  -ms-transform:$scale;
  -o-transform:$scale;
  transform:$scale;
}

@mixin opacity($opacity){
  opacity: $opacity;
  filter: alpha(opacity = $opacity * 100);
}
/** end */

.toolbar{
  display: block;
  width: 52px;
  position:fixed;
  right:20px;
  bottom:100px;
}
.toolbar-item,.toolbar-layer{
  //优化代码，提取公共样式
  background: url("toolbar.png") no-repeat;
}
.toolbar-item{
  width:100%;
  height: $toolbar-size;
  display: block;
  position: relative;
  margin-top: 1px;
  @include transition(all ease-in-out 0.5s);

  &:hover{
    .toolbar-layer{
      @include opacity(1);

      @include scale(scale(1));

      @include transform-origin(95% bottom);

      @include transition(all ease-in-out 1s);
    }
    @include transition(all ease-in-out 0.5s);
  }
}

.toolbar-item-weixin {
  @include toolbar-item(0 -798px,0 -860px);

  .toolbar-layer{
    height:212px;
    background-position:0 0;
  }
}
.toolbar-item-feedback{
  @include toolbar-item(0 -426px,0 -488px);
}
.toolbar-item-app{
  @include toolbar-item(0 -550px,0 -612px);

  .toolbar-layer{
    height:194px;
    background-position:0 -222px;
  }
}
.toolbar-item-top{
  @include toolbar-item(0 -674px,0 -736px);
  // display: none;
}
.toolbar-layer{
  width: 172px;
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  @include opacity(0);

  @include scale(scale(0.01));

  @include transform-origin(95% bottom);

  @include transition(all ease-in-out 1s);
}

通过requirejs，jq实现功能（这里主要是回到顶部的功能）

+ 通过script标签引入requirejs，然后并引入入口文件main.js
+ 通过config给一些引用设置别名，比如对于jquery-2.1.1.min设置为jquery
+ 引入模块，这里指jquery

// 通过config给一些引用设置别名
requirejs.config({
    //注意paths写法，我已经栽了两次跟头了
    paths:{
        jquery:'jquery-2.1.1.min'
    }
});

// 引入模块，并通过一个变量表示引入模块，惯例用$
requirejs(['jquery'],function($){
    //移动函数，可以通过设置移动时间来改变交互效果
    $('#backTop').on('click',move);
    //判断返回顶部按钮是否出现,传入当前窗口高度，当滚动高度大于当前窗口高度时，显示按钮
    //特别注意，每次滚动的时候需要判断，以及初始化页面的时候需要判断
    $(window).on('scroll',function(){
        checkPosition($(window).height());
    });
    //这个缺点是反应很慢TOT，所以需要在css上设置一个初始化display为none
    checkPosition($(window).height() / 2);

    function move(){
        $('body,html').animate({
            scrollTop:0
        },500,'linear');
    }

    function checkPosition(Pos){
        if($(window).scrollTop() > Pos){
            $('#backTop').show();
        }else{
            $('#backTop').hide();
        }
    }
});