chenxuan0000 / vue-seamless-scroll

:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component
https://chenxuan0000.github.io/vue-seamless-scroll/
MIT License
1.83k stars 332 forks source link

使用rem,数值为小数时,ios16.2,纵向滚动,单次滚动的位移不准确 #221

Open meiguiyisenluo opened 11 months ago

meiguiyisenluo commented 11 months ago
<template>
  <vue-seamless-scroll
    v-if="classOption.singleHeight"
    :class-option="classOption"
    class="horse-race-lamp"
    :data="data"
  >
    <div class="text" v-for="(item, idx) in data" :key="idx">
      {{ item.text }}
    </div>
  </vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "HorseRaceLampTest",
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      data: [
        {
          text: "探索未知领域",
        },
        {
          text: "激发创新火花",
        },
        {
          text: "融汇智慧力量",
        },
        {
          text: "共创美好未来",
        },
      ],
      classOption: {
        autoPlay: true,
        limitMoveNum: 0,
        isSingleRemUnit: true,
        singleHeight: 0.28,
        waitTime: 2000,
        hoverStop: false,
        openTouch: false,
      },
    };
  },
  methods: {},
};
</script>
<style>
/* project base setting ,can't change this */
html {
  font-size: 52px;
}

/* custom */
.horse-race-lamp {
  height: 0.28rem;
  width: 160px;
  margin: 0 auto;
  overflow: hidden;
}
.text {
  font-size: 0.23rem;
  line-height: 0.28rem;
}
</style>
meiguiyisenluo commented 11 months ago

image

image

image

做了些debug,这个乘法0.28 * 52 得出的是 14.560000000000002,应该是14.56的不知道是不是这个影响到了判断

image

另外有一些想了解一下的,这个有开发环境的debug模式吗,我看源码有commandjs的模块引入,这个要怎么单独的运行起来这个项目呢。最好就是dev可以直接输出js,我自己的项目就能引用到最新的js那样。

然后就是这个singleHeight,如果是rem单位的情况下,step的值好像有点难写呀,源码计算realSingleStopHeight会获取根元素的fontsize计算,但是step却不会,这个应该很容易会出现无法整除的情况吧。

希望能回复一下,看看我有什么能帮到的