快活林资源网

vue实现列表滚动的过渡动画
网络编程 2024/12/23 佚名
3 1
快活林资源网 Design By www.csstdc.com

本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下

效果图

失帧比较严重，在手机上效果更佳。

vue实现列表滚动的过渡动画

原理分析

这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的banner轮播，一个是下面的列表。这里的重点是做列表的动画，banner轮播的网上资料很多，请自行查找。

vue实现列表滚动的过渡动画

这个动画最重要的是在滚动中实时计算startIndex和endIndex，动画比较简单，就是scale和opacity的变化。向下滚动时，startIndex变小；向上滚动时，endIndex变大时，新露脸的项做该动画。当滚动连起来，就是一个完整的动画了。

涉及的技术

使用better-scroll做滚动以及轮播图

使用create-keyframe-animation做动画控制

实现步骤

1、vue的template部分

注意：由于IOS渲染速度比较快, 必须把没有展现在首屏的页面上的item隐藏掉，即index比startIndex小、比endIndex大的item都应该隐藏，避免页面动画混乱。

<div class="area-wrapper" ref="areaWrapper">
 <div v-for="(item, index) in areaList" :key="index"
 @click="clickAreaItem(item.id)"
 :ref="'area-' + index" class="area"
 :style="{ backgroundImage: 'url('+item.thumbUrl+')', 'opacity': (index < startIndex || index > endIndex) ">
  <div class="content">
  <h2 class="num">{{item.num}}</h2>
  <div style="vertical-align:text-bottom">
   <p class="name">{{item.name}}</p>
   <p class="desc">{{item.desc}}</p>
  </div>
  </div>
 </div>
</div>

高度预设。用于计算startIndex、endIndex

const AreaItemHeight = 119 // 每一项的高度（这里默认一致，如果不一致请自行修改startIndex、endIndex的计算方式）
const MarginBottom = 15  // 列表项的底部边距
const TopHeight = 160  // banner的高度
const BottomHeight = 50  // 底部Tab的高度

监听滚动。并实时计算startIndex、endIndex

scroll (position) {
 const scrollY = position.y
 if (scrollY < 0) {
  // startIndex计算
  const currentStartIndex = Math.abs(scrollY) <= TopHeight "htmlcode">



runAnimation (index) {
 animations.registerAnimation({
  name: 'scale',
  animation: [
   {
   scale: 0.5,
   opacity: 0
   },
   {
   scale: 1,
   opacity: 1
   }
  ],
  presets: {
   duration: 300,
   resetWhenDone: true
  }
 })
 animations.runAnimation(this.$refs['area-' + index], 'scale')
}





完整代码


.vue文件





<template>
<div class="address-wrapper" style="height: 100%;">
 <scroll ref="scroll" class="address-content" :data="areaList" @scroll="scroll" :listen-scroll="listenScroll" :probe-type="probeType" :bounce="false">
 <div>
  <div v-if="bannerList.length" style="position: relative;">
  <slider :list="bannerList">
   <div v-for="item in bannerList" :key="item.id" :style="{height: sliderHeight + 'px'}">
   <img class="needsclick" :src="/UploadFiles/2021-04-02/item.thumbUrl">


本地json文件,请自行修改图片路径


bannerAddress.json





[
 {
 "id": 1,
 "contentId": 111111,
 "type": 1,
 "thumbUrl": "./static/img/banner/banner_address_1.jpg"
 },
 {
 "id": 2,
 "contentId": 111111,
 "type": 1,
 "thumbUrl": "./static/img/banner/banner_address_2.jpg"
 },
 {
 "id": 3,
 "contentId": 111111,
 "type": 1,
 "thumbUrl": "./static/img/banner/banner_address_3.jpg"
 }
]





areaList.json





[
 {
 "id": "ba062c32fdf611e7ba2d00163e0c27f8",
 "name": "凯里",
 "desc": "这是凯里哟~",
 "num": 17,
 "thumbUrl": "./static/img/area/kaili.png"
 }, {
 "id": "ba5287a7fdf611e7ba2d00163e0c27f8",
 "name": "丹寨",
 "desc": "这是丹寨哟~",
 "num": 8,
 "thumbUrl": "./static/img/area/danzai.png"
 }, {
 "id": "ba9da079fdf611e7ba2d00163e0c27f8",
 "name": "麻江",
 "desc": "这是麻江哟~",
 "num": 12,
 "thumbUrl": "./static/img/area/majiang.png"
 }, {
 "id": "baeb0926fdf611e7ba2d00163e0c27f8",
 "name": "黄平",
 "desc": "这是黄平哟~",
 "num": 7,
 "thumbUrl": "./static/img/area/huangping.png"
 }, {
 "id": "bb357191fdf611e7ba2d00163e0c27f8",
 "name": "施秉",
 "desc": "这是施秉哟~",
 "num": 6,
 "thumbUrl": "./static/img/area/shibing.png"
 }, {
 "id": "bb842d8ffdf611e7ba2d00163e0c27f8",
 "name": "镇远",
 "desc": "这是镇远哟~",
 "num": 3,
 "thumbUrl": "./static/img/area/zhenyuan.png"
 }, {
 "id": "bbce67dffdf611e7ba2d00163e0c27f8",
 "name": "岑巩",
 "desc": "这是岑巩哟~",
 "num": 23,
 "thumbUrl": "./static/img/area/cengong.png"
 }, {
 "id": "bc198ca9fdf611e7ba2d00163e0c27f8",
 "name": "三穗",
 "desc": "这是三穗哟~",
 "num": 66,
 "thumbUrl": "./static/img/area/sansui.png"
 }, {
 "id": "bc64498bfdf611e7ba2d00163e0c27f8",
 "name": "天柱",
 "desc": "这是天柱哟~",
 "num": 128,
 "thumbUrl": "./static/img/area/tianzhu.png"
 }, {
 "id": "bcaf466bfdf611e7ba2d00163e0c27f8",
 "name": "锦屏",
 "desc": "这是锦屏哟~",
 "num": 107,
 "thumbUrl": "./static/img/area/jinping.png"
 }, {
 "id": "bcfa6f1bfdf611e7ba2d00163e0c27f8",
 "name": "黎平",
 "desc": "这是黎平哟~",
 "num": 211,
 "thumbUrl": "./static/img/area/liping.png"
 }, {
 "id": "bd44cca9fdf611e7ba2d00163e0c27f8",
 "name": "从江",
 "desc": "这是从江哟~",
 "num": 17,
 "thumbUrl": "./static/img/area/congjiang.png"
 }, {
 "id": "bd8f5cd4fdf611e7ba2d00163e0c27f8",
 "name": "榕江",
 "desc": "这是榕江哟~",
 "num": 17,
 "thumbUrl": "./static/img/area/rongjiang.png"
 }, {
 "id": "bdda2928fdf611e7ba2d00163e0c27f8",
 "name": "雷山",
 "desc": "这是雷山哟~",
 "num": 17,
 "thumbUrl": "./static/img/area/leishan.png"
 }, {
 "id": "be25afc0fdf611e7ba2d00163e0c27f8",
 "name": "台江",
 "desc": "这是台江哟~",
 "num": 17,
 "thumbUrl": "./static/img/area/taijiang.png"
 }, {
 "id": "be702db5fdf611e7ba2d00163e0c27f8",
 "name": "剑河",
 "desc": "这是剑河哟~",
 "num": 17,
 "thumbUrl": "./static/img/area/jianhe.png"
 }
]





关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com