手撸一个可以点击控制滚动的小功能

先看效果

正常人：使用swiper插件。

我：手撸它。

先说一下基本想法和遇到的坑，还是老套路，搞两个div。里面的长，外面的短，就可以实现滚动的效果了。

但是滚动条十分碍眼，把它去掉。然后弄两个箭头点击，为内侧的div的scrollTop（scrollLeft）赋值就可以实现左右滚动的效果了。下面开始撸。

首先看页面部分：

*注：$t是多语言，<i>均为饿了么图标，nameing为显示图片的方法。

<div class="weekly">
        <div class="between">
          <div class="start">
            <p class="title">{{ $t("cu.earn_special_title") }}</p>
            <img
              src="@/assets/bank/hot.png"
              alt=""
              height="23px"
              style="margin-left:10px"
            />
          </div>
          <div>
            <i
              class="el-icon-arrow-down text"
              v-if="!isShow"
              @click="isShow = true"
            ></i>
            <i class="el-icon-arrow-up text" v-else @click="isShow = false"></i>
          </div>
        </div>
        <div class="between" :class="isShow ? 'hideShita' : 'element'">
          <i
            class="el-icon-arrow-left text"
            style="margin-top:40px"
            @click="back"
            v-if="scroll > 0"
          ></i>
          <i v-else></i>
          <div class="item-body" id="ib" style="margin-top:-24px">
            <div class="item-body-nei">
              <div
                class="item"
                v-for="item in specialStakingList"
                :key="item.id"
                @click="toEarn(item.crypto)"
              >
                <div class="around">
                  <img :src="nameimg[item.crypto]" alt="" width="28px" />
                  <p class="icon">{{ item.crypto }}</p>
                </div>
                <div
                  class="center"
                  :style="`color:#${item.color};margin:10px 0`"
                >
                  <p class="num">{{ (item.rate * 100).toFixed(1) }}</p>
                  <p class="bai">%</p>
                </div>
                <div class="between">
                  <div class="huida">
                    {{ item.lockDay }} {{ $t("new.Days") }}
                  </div>
                  <div class="huixiao">APY</div>
                </div>
              </div>
            </div>
          </div>
          <i
            class="el-icon-arrow-right text"
            style="margin-top:40px"
            v-if="rightShowFlag"
            @click="next"
          ></i>
          <i v-else></i>
        </div>
      </div>

这里面的图标都是用了v-if,总体使用了flex布局，所以在v-else里面放了个空<i>占位。

所需变量：

data(){
    return{
      isShow: true, //是否显示 true为显示，false为隐藏
      scroll: 0, //滚动距离左边多少
      timer: "", //定时器
      specialStakingList: [], //数据列表
      rightShowFlag: true, //是否显示后面的尖角
      page: 0, //页数
    }
}

逻辑层部分：

初始化变量scroll

mounted() {
    let scroll = document.querySelector("#ib").scrollLeft;
    this.scroll = scroll;
    this.getCoin();
  },

 通过接口获取到页面数据。这时我们要计算内部的宽度，我这里每页的宽度是840px，如果超过就多加一页，为变量page赋值，设置一共有几页。

getCoin() {
      this.$http.get(`/api/private/XXXX/XXXX`).then((res) => {
        this.specialStakingList = res.data;
        let x = this.specialStakingList.length / 7;
        var len = document.querySelector(".item-body-nei");
        // console.log((Number(String(x).split(".")[0]) + 1) * 840 + "px");
        if (String(x).indexOf(".") > 0) {
          len.style.width = (Number(String(x).split(".")[0]) + 1) * 840 + "px";
          this.page = Number(String(x).split(".")[0]) + 1;
        } else {
          len.style.width = x * 840 + "px";
          this.page = x;
        }
      });
    },

为两边的尖嘴符号添加点击事件：

这里要做关于左右尖嘴的显示和隐藏，变量page终于用到了，如果是最后一页了就不显示右面的尖嘴了，如果里面的块到最左边距离为0，则不显示左侧的尖嘴。

next() {
      this.timer = window.setInterval(this.jia, 5);
    },
back() {
      this.timer = window.setInterval(this.jian, 5);
    },
jia() {
      var dom1 = document.querySelector("#ib");
      dom1.scrollLeft += 24;
      this.scroll = dom1.scrollLeft;
      let x = this.scroll / 840;
      if (String(x).indexOf(".") <= 0) {
        if (this.page == x + 1) {
          this.rightShowFlag = false;
        }
        clearInterval(this.timer);
      }
    },
jian() {
      this.rightShowFlag = true;
      var dom2 = document.querySelector("#ib");
      dom2.scrollLeft -= 24;
      this.scroll = dom2.scrollLeft;
      let x = this.scroll / 840;
      if (String(x).indexOf(".") <= 0) {
        clearInterval(this.timer);
      } else if (this.scroll <= 0) {
        clearInterval(this.timer);
        this.scroll = 0;
        dom.scrollLeft = 0;
      }
    },

解释一下为什么要这么写，因为单纯为scrollleft赋值，能实现但是非常生硬，于是我想搞个过度变化，一次变改为多次变，直到翻过一页为止。

每5毫秒移动24个px ，也就是840/24*5=175毫秒，过度的还可以。

这叫什么，这叫脑回路清奇。

待续。。。