vue实现3D切换滚动效果

本文实例为大家分享了vue实现3D切换滚动效果的具体代码,供大家参考,具体内容如下

今天写项目,遇到一个点击切换的滚动需求,贴出来,做一个记录

这个是最终的一个效果,点击左右小箭头,实现滚动效果,但是只是简单滚动,没有动画之类的

实现思路:

  • css中,正常写一个divdisplay:flex来平铺图片
  • 然后中间位置定位一个框,框大小比外面的大,中间图片随意取列表中的一个就行
  • js中,使用v-for循环列表
  • 点击右侧时,将循环列表中的第一个图片删除,然后添加到列表最后一个,点击左侧时同理,这样,就能简单实现一个无缝循环的效果了
  • 最重要的一点,因为中间时梯形,要么就是让UI给一个框,前端设置超出隐藏属性,达到梯形效果,要么就是自己用polygon这个css属性调出一个多边形出来

贴一下代码,看看

// html
// <!-- 滚动 -->
    <div class="rolling">
      <div class="rolling-container">
        <div
          class="rolling-wraper"
          v-for="(v, i) in imgList"
          :key="i"
          @click="handleImg(v)"
        >
          <img
            :src="require(`@/assets/images/home/company/${v.img}.jpg`)"
            class="img"
          />
        </div>
        <!-- 左侧渐变阴影 -->
        <div class="gradient-left"></div>
        <div class="rolling-shadow"></div>
        <!-- 右侧渐变阴影 -->
        <div class="gradient-right"></div>
      </div>
      <!-- 中间放大层 -->
      <div class="photo-bg"></div>
      <img
        :src="
          require(`@/assets/images/home/company/${this.imgList[1].img}.jpg`)
        "
        class="img-large"
      />
      <img
        :src="require(`@/assets/images/home/company/photo-bg.png`)"
        class="trapezoidal"
      />
      <!-- 底部切换 -->
      <div class="top-botton">
        <div class="btn-left" @click="previous"></div>
        <div class="center-text">{{ this.imgList[1].text }}</div>
        <div class="btn-right" @click="next"></div>
   </div>
</div>
// js
data () {
    return {
        imgList: [
            {
              img: 'activity-01',
              text: '2020年职称宣传活动',
            },
            {
              img: 'activity-02',
              text: '2020年职称宣传活动1',
            },
            {
              img: 'activity-03',
              text: '2020年职称宣传活动2',
            },
          ],
    }
}

methdos: {
    // 点击左侧
    previous() {
      const direction = 'left';
      this.scrollImg(direction);
    },
    // 点击右侧
    next() {
      const direction = 'right';
      this.scrollImg(direction);
    },

    // 处理滚动列表图片
    scrollImg(direction) {
      if (direction === 'left') {
        const first = this.imgList.shift();
        this.imgList.push(first);
      } else {
        const last = this.imgList.pop();
        this.imgList.unshift(last);
      }
      console.log();
    },
}
// css重点代码
// 绘制多边形
// 这几个属性为逆时针旋转
 clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);

具体就根据设计稿慢慢调整

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue滚动tab跟随切换效果

    分享一个我前几天做的移动端 tab滚动跟随的例子 随着滚动条的滚动,tab会对应进行切换 首先我们需要监听当前页面的滚动 mounted(){ //记录每个内容对用的dom数组 this.arrDom = document.getElementsByClassName("item-content"); window.addEventListener('scroll', this.handleScroll); }, destroyed(){ window.removeEventListe

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • vue实现滚动鼠标滚轮切换页面

    本文实例为大家分享了vue实现滚动鼠标滚轮切换页面的具体代码,供大家参考,具体内容如下 新项目产品被甲方的要求逼疯了,大概返稿了100+次吧,最后甲方网上找了个他们认为的比较有科技感的模板,让我们照着写,首页就是类似于纵向走马灯,鼠标滚动切换,一次切换一整屏的效果.之前没接触过,写了个简单的demo,仅作为学习笔记. 其实原理很简单,就是把所有页面放在一个div中,然后滚动的时候改变外层div的top即可. 因为滚动条监听事件是实时的,所以要加上节流来防止页面切换太快速,我这控制在1.5s才能切

  • vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作

    template里面: <!-- tab切换star --> <ul class="tab-list" :class="{fixTitle:whether}"> <li @click="curId=0" :class="{'cur':curId===0}">产品特点</li> <li @click="curId=1" :class="{'cur

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • 详解使用vue-router进行页面切换时滚动条位置与滚动监听事件

    按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是...在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊... 说说我的破解方法: 1.在每个需要用vue-router切换的组件的mounted钩子内将页面的位置自动回滚到页面顶部,解决滚动条位置自动记录问题: 2.在每个组件内定义一条变量scrollWatch默认为true,在绑定滚动监听事件时加个if判断,只有在scrollWatch

  • vue实现整屏滚动切换

    本文实例为大家分享了vue实现整屏滚动切换的具体代码,供大家参考,具体内容如下 1.下载vue-awesome-swiper npm i vue-awesome-swiper -S 2.在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(vueAwesomeSwiper); 3.直接上案例,新建一个路由页面 <template> <div class="hello-world">

  • vue页面切换到滚动页面显示顶部的实例

    在用mint ui写移动端从'listview'跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击'listview'滚动list进入详情页面时发现详情页面不是从顶部开始显示. 一.目标: 'listview'进入详情页面时详情页面从页面顶部开始显示. 二.让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律 三.解决思路:进入详情页面的时候固定滚动页面的位置在顶部 四.代码实现:vue里面写法如下,至于updated生

  • Vue鼠标滚轮滚动切换路由效果的实现方法

    一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听 Vue路由切换过渡 vue的过渡 <transition :name="transitionName"> <div></div> </transition> 使用transition 包裹需

  • vue实现图片滚动的示例代码(类似走马灯效果)

    上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde

随机推荐