移动端h5滑动切换幻灯片

最新推荐文章于 2024-07-26 20:46:33 发布

小王今天也要加油鸭~！

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量277

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/wang944282/article/details/136324480

版权

移动端h5滑动切换幻灯片

结构大概是这样的：

<div class="evaluate-scroll">
  <div class="evaluate-scroll-area" :style="{transform: 'translateX(-' + showIndex * 3.08 + 'rem)', marginLeft: 0.32 - showIndex * 0.16 + 'rem'}"
       @touchmove="getTouchDirection($event)" @touchstart="getStartOptions($event)">
    <section class="evaluate-scroll-item"
             v-for="(item, index) in evaluateArray" :key="index">
      <div class="content-area">
        <p class="title-summary" v-html="item.titleSummary"></p>
        <p class="content" v-html="item.content"></p>
      </div>
    </section>
  </div>
</div>

scss

.evaluate-scroll{
    display: inline-flex;
    .evaluate-scroll-area{
        display: inline-flex;
        text-align: left;
        margin: 0.48rem auto 0;
        .evaluate-scroll-item{
            width: 3.08rem;
            padding: 0.3rem 0.3rem 0.54rem;
            box-sizing: border-box;
            border-radius: 0.2rem;
            border: 0.02rem solid #FF9BBD;
            background: white;
            box-shadow: 0.08rem 0.04rem 0.16rem 0px rgba(73, 35, 165, 0.06);
            margin-right: 0.16rem;
            position: relative;
            .title-summary{
                text-align: center;
                font-size: 0.18rem;
                max-width: 1.64rem;
                height: 0.42rem;
                margin-top: -0.06rem;
            }
            .content{
                width: 100%;
                margin: 0.24rem 0 0;
                font-size: 0.14rem;
                line-height: 0.24rem; /* 164.286% */
            }
        }
    }
}

js: 这里的index是0-4，可以根据自己的需求改

getStartOptions(e){
  this.startX = e.changedTouches[0].pageX;
  this.startY = e.changedTouches[0].pageY;
},
  getTouchDirection(e){
    clearTimeout(this.toolsChangeTimer)
    //防止多次触发
    this.toolsChangeTimer = setTimeout(() => {
      this.isAllowChangeTimer = true;
    }, 400)
    if (!this.isAllowChangeTimer) {
      return ;
    }
    let moveEndX = e.changedTouches[0].pageX;
    let moveEndY = e.changedTouches[0].pageY;
    let X = moveEndX - this.startX;
    let Y = moveEndY - this.startY;
    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
      this.toolsShowIndex--;
      if (this.toolsShowIndex < 0) {
        this.showIndex = 4
      }
    } else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
      this.showIndex++;
      if (this.toolsShowIndex > 4) {
        this.toolsShowIndex = 0
      }
    }
    this.isAllowChangeTimer = false;
  },