美文网首页
【CSS】类似淘宝金刚区的滚动条效果-vue版本

【CSS】类似淘宝金刚区的滚动条效果-vue版本

作者: 前端菜篮子 | 来源:发表于2022-02-17 11:22 被阅读0次

    html部分

    <div class="container">
      <!-- 金刚区,两行-->
      <div class="king-area" @scroll="scroll}">
        <!-- rowMap:{first:[],second:[]  -->
        <div class="row" v-for="(items, key) in rowMap" :key="key">
          <!-- 上下结构的icon和文字-->
          <div class="icon"
             v-for="(item, index) in items" :key="index">
            <!-- img如果有icon,用icon更佳 -->
            <img class="img" :src="item.icon" alt="" srcset="" />
            <div class="text">{{ item.text}}</div>
          </div>
        </div>    
      </div>
      <!-- 滚动条|进度条部分,这里直接套用vant-progress的效果 -->
      <div class="van-progress progress">
        <span class="van-progress__portion portion" :style="progressStyle"></span>
      </div>
    </div>
    

    两行,可能会前后对齐有些问题,看了下淘宝是每列2个icon, 根据总数分成n列
    len: icon的个数;list:icon对应的列表;奇数时,考虑最后一个没有的处理,这里不说明了

    <div class="container">
      <div class="king-area"  @scroll="scroll">
        <div v-for="i in Math.ceil(len/2)" :key="i" class="col">
          <!-- rowIndex:[2,1] -->
          <div class="icon"
              v-for="j in rowIndex" :key="j">
              <img class="img" :src="list[2*i - j].icon" alt="" srcset="" />
              <div class="text">{{ list[2*i - j].title }}</div>
           </div>
        </div>    
      </div>
      <div class="van-progress progress">
        <span class="van-progress__portion portion" :style="progressStyle"></span>
      </div>
    </div>
    

    金刚区样式部分这里就不具体介绍了,滚动条部分可以如下:

    .progress {
      top: 0.1rem;
      width:50px;
      left: 40%;
      .portion {
        background: rgb(242, 130, 106); width: 25px;
      }
    }
    

    下面直接写金刚区滚动事件改变滚动条(进度条)的样式
    left,也可以用transform: translate(?);

    export default {
        name:'XXX',
        data() {
            return {
                progressStyle:''
        }
        methods: {
            scroll(e) { 
                let {scrollWidth, clientWidth, scrollLeft} = e.target
                var maxScrollLeft = scrollWidth - clientWidth  //最大scrollLeft值
                let ratio = maxScrollLeft/50
                //用left,也可以用transform: translate(10px);
                this.progressStyle = `left: ${scrollLeft/ratio}%;`
            }
        }
    }
    

    相关文章

      网友评论

          本文标题:【CSS】类似淘宝金刚区的滚动条效果-vue版本

          本文链接:https://www.haomeiwen.com/subject/auojlrtx.html