vue 实现横向滚动/tab切换渲染

实现横向滑动

当然了这种效果很多方法可以实现,以下这种是纯css来启动
废话不多说往下看:

效果图

代码

<template>
  <div class="lateral-sliding">
    <div class="lateral-sliding-item" v-for="(item,index) in items" :key="index">
      <div class="each-img"></div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: 3
    }
  }
}
</script>
 
<style scoped>
.lateral-sliding {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
}
.lateral-sliding-item {
  display: flex;
  margin-right: 8px;
  background-color: yellow;
}
.each-img {
  width: 150px;
  height: 88px;
}
 
</style>

tab切换渲染

1 对应的点击内容自定义

效果图

代码

!<template>
  <div class="main">
    <div>
      <div class="cont">
        <ul>
          <!-- index == num?'active':''" -->
          <li
            @click="btnclick(index)"
            :class="{ active: index == num }"
            v-for="(item, index) in list"
            :key="index">
            {{ item}}
          </li>
        </ul>
      </div>
        <div v-show="this.num==0">000000</div>
        <div v-show="this.num==1">111111</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        "儿童科",
        "妇产科",
        "肿瘤科",
        "心脑血管",
        "中医科",
        "西医科",
        "儿童科",
        "妇产科",
        "肿瘤科",
        "心脑血管",
        "中医科",
        "西医科",
      ],
      num: 0,
    };
  },
  created() {},
  methods: {
    btnclick(index) {
      this.num = index;
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  .title {
    font-size: 0.18rem;
    font-weight: 700;
    color: #000;
    height: 0.4rem;
    line-height: 0.4rem;
    background-image: linear-gradient(#f0fffc, #fff);
    padding-left: 0.09rem;
    padding-top: 0.05rem;
  }
  .cont {
    margin: 0 0.1024rem;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    padding-bottom: 0.1rem;
    ul {
      display: flex;
      li {
        float: left;
        margin-right: 0.08rem;
        text-align: center;
        line-height: 0.25rem;
        width: 0.7rem;
        height: 0.25rem;
        border-radius: 0.13rem;
        font-size: 0.13rem;
        color: #666666;
        background: #f8f8f8;
      }
    }
    .active {
      float: left;
      margin-right: 0.08rem;
      text-align: center;
      width: 0.7rem;
      height: 0.25rem;
      line-height: 0.25rem;
      border-radius: 0.13rem;
      font-size: 0.13rem;
      color: #3ebfa0;
      background: #e6f8f5;
      border: 1px solid #01cca6;
    }
  }
}
</style>

2 对应的内容是接口返回的

1. 一般接口返回都是以这种接口来进行返回给我们

[
    {title:'tabA标签',child:[{},{}]},
    {},{}
    ]

常规的话我们是渲染2次哈,如一下操作

但是转折来了 这种的话如果遇到不好调的样式问题需要单独开一个div

请看一下代码

我们定义一个num在data里面 在点击的时候把渲染的index赋值过去
这个意义是默认显示索引值为0 的值 点击时依次显示

!<template>
  <div class="main">
    <div>
      <div class="cont">
        <ul>
          <li
            @click="btnclick(index)"
            :class="{ active: index == num }"
            v-for="(item, index) in list"
            :key="index">
            {{ item}}
          </li>
        </ul>
      </div>
      <div v-for="(item1,index1) in list[num].child" :key="index1"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [{child:[]}],//这个child:[]对应的是你的里面的子
      num: 0,//就是默认显示第一个 点击显示其他的
    };
  },
  methods: {
    btnclick(index) {
      this.num = index;
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  .title {
    font-size: 0.18rem;
    font-weight: 700;
    color: #000;
    height: 0.4rem;
    line-height: 0.4rem;
    background-image: linear-gradient(#f0fffc, #fff);
    padding-left: 0.09rem;
    padding-top: 0.05rem;
  }
  .cont {
    margin: 0 0.1024rem;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;
    padding-bottom: 0.1rem;
    ul {
      display: flex;
      li {
        float: left;
        margin-right: 0.08rem;
        text-align: center;
        line-height: 0.25rem;
        width: 0.7rem;
        height: 0.25rem;
        border-radius: 0.13rem;
        font-size: 0.13rem;
        color: #666666;
        background: #f8f8f8;
      }
    }
    .active {
      float: left;
      margin-right: 0.08rem;
      text-align: center;
      width: 0.7rem;
      height: 0.25rem;
      line-height: 0.25rem;
      border-radius: 0.13rem;
      font-size: 0.13rem;
      color: #3ebfa0;
      background: #e6f8f5;
      border: 1px solid #01cca6;
    }
  }
}
</style>

横向滑动参考链接直达