大数据轮播图排行组件样式封装

大数据轮播图带图标排行组件封装

1.请求接口数据或者在data中定义数据模拟

data () {
  return {
    // 数据存放
    dataList: [
      {
        name: '消防安全'，
        value: 238
      },
      {
        name: '养老问题'，
        value: 238
      },
      {
        name: '宠物问题'，
        value: 238
      },
      {
        name: '噪音沟通'，
        value: 238
      },
      {
        name: '垃圾问题'，
        value: 238
      }
    ],
    // 柱状图中想要设置的最大宽度，这里用的rem比例(1/192)
    maxWidth: 1.6875,
    // 定义总和
    sum: 0
  }
}

2.使用vueSeamlessScroll滚动组件

// 2.1安装组件
npm install --save vue-seamless-scroll

// 2.2导入组件
import vueSeamlessScroll from 'vue-seamless-scroll';

// 2.3注册组件
components: {
  vueSeamlessScroll
}

// 2.4在computed中配置设置
computed: {
  classOption () {
    return {
      // 速度
      step: 0.4,
      // 鼠标悬停停止滚动
      hoverStop: true,
      // 生成轮播组数
      limitMoveNum: 2,
      // 实时监听
      openwatch: true
    }
  }
}

// 2.5 使用组件，首先需要绑定上配置属性，然后再把需要展示的数据绑定上
<vue-seamless-scroll :class-option="classOption" :data="dataList"></vue-seamless-scroll>

// 2.6 内部使用ul和li标签进行渲染内容，li标签通过v-for遍历dataList中的item
<vue-seamless-scroll :class-option="classOption" :data="dataList">
  <ul class="item-box">
    <li
      v-for="(item, index) in dataList"
      :key="item.id"
      class="item"
    >
      // 设置前面图标样式，通过索引判断前三设置一个样式，后面的设置另一个样式
      <div
        class="icon"
        :class="index < 3 ? 'pmqs' : 'sypm'"
      >
        // 图标中展示的数字
        {{ index + 1 }}
      </div>
      <div class="content">
        <div class="tit">
          <span>{{ item.name }}</span>
          <span>{{ item.value }}</span>
        </div>
        <div class="outbox">
          // 动态绑定style，宽度在函数中获取动态的宽度
          <div :style="{'width': item.width, 'height': '0.03125rem', 'backgroundColor': '#1890ff'}"></div>
        </div>
      </div>
    </li>
  </ul>
</vue-seamless-scroll>

3.函数封装

// 3.1 封装排名函数
pmFun () {
  // 定义一个sum
  var sum = 0;
  // 第一次通过遍历，求出sum
  this.dataList.forEach(item => {
    sum += item.value;
  });
  // 把sum值赋给data中的sum，总和就求出来了
  this.sum = sum;
  // 第二次遍历，调用getWidth方法，求出每个item的宽度
  this.dataList.forEach(item => {
    // 通过数组的解构统一往item里面塞一个width属性，在上面动态绑定style时就可以使用item.width，每一个item.width是由item.value决定的
    item['width'] = this.getWidth(item.value);
  })
},
// 3.2 封装获取宽度的函数
getWidth (num) {
  // 传入num除以总数再乘以最大宽度，就是需要展示的宽度
  return num / this.sum * this.maxWidth + 'rem';
}

4.css样式封装，这里用的less

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.content {
  max-height: 1.020833rem;
  overflow: hidden;
  .item-box {
    .item {
      width: 100%;
      padding: 0.083333rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // left-icon
      .icon {
        margin: 0 0.083333rem;
        width: 0.1875rem;
        height: 0.21875rem;
        text-align: center;
        line-height: 0.21875rem;
        color: rgba(255, 255, 255, .85);
        font-size: 0.072917rem;
      }
      .pmqs {
        background-image: url('../../../assets/img/common/px1.png');
        background-size: 100% 100%;
      }
      .sypm {
        background-image: url('../../../assets/img/common/px2.png');
        background-size: 100% 100%;
      }
      // right-con
      .content {
        width: 1.739583rem;
        .tit {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.041667rem;
          span {
            color: rgba(255, 255, 255, .85);
            font-size: 0.072917rem;
          }
        }
        .outbox {
          width: 100%;
          padding: 0.026042rem;
          border: 0.005208rem solid #1E2B44;
        }
      }
    }
    .item:hover {
      background-color: rgba(59, 83, 129, .35);
    }
  }
}
</style>