移动端小案例

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/minireset.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  
  <div id="root">
    <div class="content">
      <div class="content-item  active"  >

        <div class="header">
          <div class="left">
            <div class="name">广州</div>
            <div class="sj"></div>
          </div>
          <div class="center">
            星光大道测试影院
          </div>

          <div class="right">
            <div class="bs"></div>
          </div>
        </div>

        <div class="tab">
          <div class="tab-item ">
            <div class="a active">正在热映</div>
          </div>
          <div class="tab-item">
            <div class="a">即将热映</div>
          </div>
        </div>
      </div>
      <div class="content-item">商城</div>
      <div class="content-item">活动</div>
      <div class="content-item">我的</div>

    </div>

    <div class="bar">
      <div class="bar-item">

        <div class="img active"></div>
        <div class="text  active" >购票</div>
      </div>
      <div class="bar-item">

        <div class="img"></div>
        <div class="text">商城</div>
      </div>
      <div class="bar-item">

        <div class="img"></div>
        <div class="text">活动</div>
      </div>
      <div class="bar-item">

        <div class="img"></div>
        <div class="text">我的</div>
      </div>
      
    </div>
  </div>


  <script src="./js/index.js"></script>
</body>
</html>

 

less

* {
  margin: 0;
  padding: 0;
}

//设置rem
@font:375 / 10rem;

// 给html设置高度为100%
html,
body {
  height: 100%;
}

#root {
  height: 100%;
  position: relative;
  width: 100%;

  // 上部分
  .content {
    position: absolute;
    top: 0;
    bottom: 49 / @font;
    width: 100%;
    background-color: skyblue;

    &-item {
      height: 100%;
      width: 100%;
      font-size: 22 / @font;
      color: red;
      //影藏
      display: none;

      &.active {
        display: block;
      }

      .header {
        height: 44/@font;
        background-color: pink;
        display: flex;
        //交叉轴对齐方式
        align-items: center;
        //主轴对齐方式
        justify-content: space-around;
        .left {
          display: flex;
          //交叉轴对齐
          align-items: center;
          height: 100%;

          .name {
            width: 24/@font;
            height: 17/@font;
            font-family: PingFangSC-Regular;
            font-size: 12/@font;
            color: #666666;
            letter-spacing: 0;
            margin-right: 5/@font;
          }

          .sj {
            width: 7/@font;
            height: 4/@font;
            background-size: 100%;
            background-image: url("../imgs/Triangle.png");
          }
        }

        .center {
          font-family: PingFangSC-Regular;
          font-size: 14/@font;
          color: #333333;
          letter-spacing: 0;
          // line-height: 44/@font;
        }

        .right {
          width: 25/@font;
          height: 25/@font;
          background-size: 100%;
          background-image: url("../imgs/nav_filter.png");
        }
      }

      .tab {
        height: 44/@font;
        background-color: yellowgreen;
        display: flex;
        //主轴对齐方式
        justify-content: space-around;
        // //交叉轴对齐方式
        align-items: center;


        &-item{
          // font-family: PingFangSC-Regular;
          // font-size: 16/@font;
          // color: #38404d;
          // letter-spacing: 0;
          // width: 64/@font;
          // height: 22/@font;
          // position: relative;
          .a{
            font-family: PingFangSC-Regular;
            font-size: 16/@font;
            color: #38404d;
            letter-spacing: 0;
            width: 64/@font;
            height: 22/@font;
            position: relative;

            &.active::after {
              content: '';
              display: block;
              width: 20/@font;
              height: 2/@font;
              background-color: #262a32;
              position: absolute;
              bottom: -12/@font;
              left: 50%;
              margin-left: -10/@font;
            }

          } 
        }

        // 注意: 伪元素实际上是当前元素的子元素
        // &-item.a.active::after {
        //   content: '';
        //   display: block;
        //   width: 20/@font;
        //   height: 2/@font;
        //   background-color: #262a32;
        //   position: absolute;
        //   bottom: -12/@font;
        //   left: 50%;
        //   margin-left: -10/@font;
        // }
      }
    }
  }

  //底部
  .bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 49 / @font;
    // background-color: hotpink;
    //开启弹性盒子
    display: flex;
    //主轴对齐方式
    justify-content: space-around;
    // 交叉轴对齐方式
    align-items: center;

    &-item {
      display: flex;
      //主轴方向为竖直方向
      flex-direction: column;
      // 给主轴方向设置对齐方式
      justify-content: center;
      &:nth-child(1) {
        .img {
          width: 25 / @font;
          height: 25 / @font;
          background-size: 100%;
          background-image: url("../imgs/tab_home_normal.png");

          &.active {
            background-image: url("../imgs/tab_home_selected.png");
          }
        }
      }

      &:nth-child(2) {
        .img {
          width: 25 / @font;
          height: 25 / @font;
          background-size: 100%;
          background-image: url("../imgs/tab_store_normal.png");

          &.active {
            background-image: url("../imgs/tab_store_selected.png");
          }
        }
      }

      &:nth-child(3) {
        .img {
          width: 25 / @font;
          height: 25 / @font;
          background-size: 100%;
          background-image: url("../imgs/tab_activity_normal.png");

          &.active {
            background-image: url("../imgs/tab_activity_selected.png");
          }
        }
      }

      &:nth-child(4) {
        .img {
          width: 25 / @font;
          height: 25 / @font;
          background-size: 100%;
          background-image: url("../imgs/tab_mine_normal.png");
          &.active {
            background-image: url("../imgs/tab_mine_selected.png");
          }
        }
      }

      //文字样式
      .text {
        font-family: PingFangSC-Regular;
        font-size: 12 / @font;
        // color: #ff5200;
        letter-spacing: 0;

        &.active {
          color: #ff5200;
        }
      }
    }
  }
}

 

js

/*  适配代码开始   */

function adate(){

  // 获取物理像素
let w = document.documentElement.clientWidth

//获取更元素字体
let rootSize = w/10
// 根元素设置样式
document.documentElement.style.fontSize = rootSize +'px'
}

adate()

// 设备跟换
window.onresize = adate
/*  适配代码结束   */


/*   底部tab点击页切换逻辑 */
//划过事件,底部的图片高亮,字体颜色高亮,选项卡页要切换

//获取底部的元素,伪数组
let tabs = document.querySelectorAll('.bar-item')
// 获取图片元素
let imgs = document.querySelectorAll('.img')

let texts = document.querySelectorAll('.text')
let cis = document.querySelectorAll('.content-item')

let tabitem = document.querySelectorAll('.tab-item')
let a = document.querySelectorAll('.a')

//遍历每个底部的盒子
for(let i=0; i<tabs.length; i++){
  //给每个底部盒子绑定滑动事件
  tabs[i].addEventListener('touchstart', function(){
    
    //for循环,每次绑定一次滑动事件,所有的底部图片类消除active
    for (var j = 0; j < tabs.length; j++) {
      //每个图片元素清除active类
       imgs[j].classList.remove('active')
       //给每个文字清除active类
       texts[j].classList.remove('active')
       //给每个content-item选项清除active类
       cis[j].classList.remove('active')
    }

    //那个滑动事件,给那个图片添加active类
    imgs[i].classList.add('active')
    texts[i].classList.add('active')
    cis[i].classList.add('active')


  })
  
}

for (let i = 0; i <tabitem.length ; i++) {
    //绑定滑动事件
    tabitem[i].addEventListener('touchstart', function(){
     
      for (let j = 0; j <a.length ; j++) {
        a[j].classList.remove('active')
         
      }

      a[i].classList.add('active')


    })
}

 

 

posted @ 2020-09-01 22:29  全情海洋  阅读(238)  评论(0编辑  收藏  举报