轮播图自动渐隐渐现，最后进入首页
uni-app 2022-03-29 22:26:48

iShot2022-03-29_22.33.39 (1).gif 

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <view class="start-banner">  
  3.   
  4.         <view class="gui-flex gui-justify-content-center gui-align-items-center top-logo">  
  5.             <image mode="widthFix" src="/static/banner/logo.png"></image>  
  6.         </view>  
  7.           
  8.         <view class="banner-swiper" :style="{height:startBannerHeight+'px'}">  
  9.             <view class="banner-swiper-item" v-for="(item,index) in swipers" :key="index">  
  10.                 <image :src="item.img" mode="heightFix" class="banner-image"></image>  
  11.                 <view class="gui-flex gui-justify-content-center gui-align-items-center intro-wrapper">  
  12.                     <view class="intro">{{item.intro}}</view>  
  13.                 </view>  
  14.             </view>  
  15.         </view>  
  16.   
  17.         <view class="gui-flex gui-column gui-justify-content-center gui-align-items-center bottom-button">  
  18.             <button type="default" :plain="true" class="gui-button gui-noborder gui-bg-white" style="padding:5rpx 0;width: 400rpx; border-radius: 10rpx;" @click="toIndex()">  
  19.                 <text class="gui-primary-color gui-button-text">即刻启程</text>  
  20.             </button>  
  21.             <view class="gui-color-white gui-text-small gui-underline gui-margin-top" @click="toIndex()">加入我们</view>  
  22.         </view>  
  23.   
  24.     </view>  
  25. </template>  
  26.   
  27. <script>  
  28.     export default {  
  29.         data() {  
  30.             return {  
  31.                 startBannerHeight: 500,  
  32.                 currentIndex: 0,  
  33.                 swipers: [  
  34.                     {  
  35.                         'img': '/static/banner/intro-01.jpg',  
  36.                         'intro': '路虎自驾路线评级集合多方专业力量，致力于打造中国最具权威的自驾路线体系。'  
  37.                     },  
  38.                     {  
  39.                         'img': '/static/banner/intro-02.jpg',  
  40.                         'intro': '我们矢志不渝地为广大自驾旅行用户提供权威且独特地发现旅程。'  
  41.                     },  
  42.                     {  
  43.                         'img': '/static/banner/intro-03.png',  
  44.                         'intro': '为自驾旅行爱好者带来兼具自然景观、人文体验、全地形地貌及独特主题的优质路线。'  
  45.                     },  
  46.                 ],  
  47.                 time1: null  
  48.             }  
  49.         },  
  50.         onLoad: function() {  
  51.             var system = this.tool.system();  
  52.             // console.log(system);  
  53.             this.startBannerHeight = system.windowHeight  
  54.               
  55.               
  56.             this.init()  
  57.         },  
  58.         methods: {  
  59.             init() {  
  60.                 this.time1 = setTimeout(() => {  
  61.                 this.toIndex()  
  62.                 }, 12000);  
  63.             },  
  64.             toIndex() {  
  65.                 uni.navigateTo({  
  66.                     url: '/pages/tabbar/home',  
  67.                     success: res => {},  
  68.                     fail: () => {},  
  69.                     complete: () => {}  
  70.                 });  
  71.             }  
  72.         },  
  73.         onHide() {  
  74.             console.log('清除延时执行')  
  75.             clearTimeout(this.time1)  
  76.         }  
  77.     }  
  78. </script>  
  79.   
  80. <style scoped>  
  81.     .start-banner .top-logo{  
  82.         width: 750rpx;  
  83.         position: absolute;  
  84.         left: 0;  
  85.         top: 256rpx;   
  86.         z-index: 2;  
  87.         -webkit-animation-name: fadeInUp;  
  88.         animation-name: fadeInUp;  
  89.         -webkit-animation-duration: 3s;  
  90.         animation-duration: 3s;  
  91.     }  
  92.     .start-banner .bottom-button{  
  93.         width: 750rpx;  
  94.         position: absolute;  
  95.         left: 0;  
  96.         bottom: 300rpx;   
  97.         z-index: 2;  
  98.         -webkit-animation-name: fadeInUp;  
  99.         animation-name: fadeInUp;  
  100.         -webkit-animation-duration: 3s;  
  101.         animation-duration: 3s;  
  102.     }  
  103.     .start-banner .top-logo img,  
  104.     .start-banner .top-logo image{  
  105.         width: 455rpx;  
  106.     }  
  107.     .banner-swiper {  
  108.         width: 750rpx;  
  109.         height: 500rpx;  
  110.         background-color: #FFFFFF;  
  111.     }  
  112.     .banner-swiper-item {  
  113.         width: 750rpx;  
  114.         height: 100%;  
  115.         left: 0;  
  116.         top: 0;  
  117.         position: absolute;  
  118.         z-index: 0;  
  119.     }  
  120.     .banner-swiper-item .banner-image {  
  121.         width: 750rpx;  
  122.         height: 100%;  
  123.         position: absolute;  
  124.         left: 0;  
  125.         top: 0;  
  126.         /* -webkit-animation-timing-function: linear;  
  127.                 animation-timing-function: linear;  
  128.         -webkit-animation-iteration-count: infinite;  
  129.                 animation-iteration-count: infinite; */  
  130.         -webkit-animation-duration: 13s;  
  131.         animation-duration: 13s;  
  132.         opacity: 0;  
  133.     }  
  134.   
  135.     .banner-swiper-item:nth-child(1) .banner-image {  
  136.         opacity: 1;  
  137.         -webkit-animation-name: kenburns-1;  
  138.         animation-name: kenburns-1;  
  139.     }  
  140.   
  141.     .banner-swiper-item:nth-child(2) .banner-image {  
  142.         -webkit-animation-name: kenburns-2;  
  143.         animation-name: kenburns-2;  
  144.     }  
  145.   
  146.     .banner-swiper-item:nth-child(3) .banner-image {  
  147.         -webkit-animation-name: kenburns-3;  
  148.         animation-name: kenburns-3;  
  149.     }  
  150.   
  151.     .banner-swiper-item .intro-wrapper {  
  152.         width: 750rpx;  
  153.         position: absolute;  
  154.         top: 600rpx;  
  155.         left: 0;  
  156.     }  
  157.   
  158.     .banner-swiper-item .intro {  
  159.         color: #FFF;  
  160.         width: 460rpx;  
  161.         /* height: 80rpx; */  
  162.         text-align: center;  
  163.         /* -webkit-animation-timing-function: linear;  
  164.                 animation-timing-function: linear;  
  165.         -webkit-animation-iteration-count: infinite;  
  166.                 animation-iteration-count: infinite; */  
  167.         -webkit-animation-duration: 13s;  
  168.         animation-duration: 13s;  
  169.         opacity: 0;  
  170.         font-size: 30rpx;  
  171.         letter-spacing: 2px;  
  172.     }  
  173.       
  174.     .banner-swiper-item:nth-child(1) .intro {  
  175.         -webkit-animation-name: fadeInUp-1;  
  176.         animation-name: fadeInUp-1;  
  177.     }  
  178.     .banner-swiper-item:nth-child(2) .intro {  
  179.         -webkit-animation-name: fadeInUp-2;  
  180.         animation-name: fadeInUp-2;  
  181.     }  
  182.     .banner-swiper-item:nth-child(3) .intro {  
  183.         -webkit-animation-name: fadeInUp-3;  
  184.         animation-name: fadeInUp-3;  
  185.     }  
  186.       
  187.     /* 顶部logo */  
  188.     @-webkit-keyframes fadeInUp {  
  189.         from{  
  190.             opacity:0;  
  191.             -webkit-transform:translate3d(0,20px,0);  
  192.             transform:translate3d(0,20px,0)  
  193.         }  
  194.         to{  
  195.             opacity:1;  
  196.             -webkit-transform:translate3d(0,0,0);  
  197.             transform:translate3d(0,0,0)  
  198.         }  
  199.     }  
  200.       
  201.     @keyframes fadeInUp{  
  202.         from{  
  203.             opacity:0;  
  204.             -webkit-transform:translate3d(0,20px,0);  
  205.             transform:translate3d(0,20px,0)  
  206.         }  
  207.         to{  
  208.             opacity:1;  
  209.             -webkit-transform:translate3d(0,0,0);  
  210.             transform:translate3d(0,0,0)  
  211.         }  
  212.     }  
  213.   
  214.     /* 图片动画 */  
  215.     @-webkit-keyframes kenburns-1 {  
  216.         0% {  
  217.             opacity: 1;  
  218.         }  
  219.         20% {  
  220.             opacity: 1;  
  221.         }  
  222.         40% {  
  223.             opacity: 1;  
  224.         }  
  225.         60% {  
  226.           opacity: 0;  
  227.         }  
  228.         70% {  
  229.           opacity: 0;  
  230.         }  
  231.         90% {  
  232.           opacity: 0;  
  233.         }  
  234.         100% {  
  235.             opacity: 0;  
  236.         }  
  237.     }  
  238.   
  239.     @keyframes kenburns-1 {  
  240.         0% {  
  241.             opacity: 1;  
  242.         }  
  243.         20% {  
  244.             opacity: 1;  
  245.         }  
  246.         40% {  
  247.             opacity: 1;  
  248.         }  
  249.         60% {  
  250.           opacity: 0;  
  251.         }  
  252.         70% {  
  253.           opacity: 0;  
  254.         }  
  255.         90% {  
  256.           opacity: 0;  
  257.         }  
  258.         100% {  
  259.             opacity: 0;  
  260.         }  
  261.     }  
  262.   
  263.     @-webkit-keyframes kenburns-2 {  
  264.         0% {  
  265.             opacity: 0;  
  266.         }  
  267.         20% {  
  268.             opacity: 0;  
  269.         }  
  270.         50% {  
  271.             opacity: 1;  
  272.         }  
  273.         60% {  
  274.           opacity: 1;  
  275.         }  
  276.         70% {  
  277.           opacity: 0;  
  278.         }  
  279.         90% {  
  280.           opacity: 0;  
  281.         }  
  282.         100% {  
  283.             opacity: 0;  
  284.         }  
  285.     }  
  286.   
  287.     @keyframes kenburns-2 {  
  288.         0% {  
  289.             opacity: 0;  
  290.         }  
  291.         20% {  
  292.             opacity: 0;  
  293.         }  
  294.         50% {  
  295.             opacity: 1;  
  296.         }  
  297.         60% {  
  298.           opacity: 1;  
  299.         }  
  300.         70% {  
  301.           opacity: 0;  
  302.         }  
  303.         90% {  
  304.           opacity: 0;  
  305.         }  
  306.         100% {  
  307.             opacity: 0;  
  308.         }  
  309.     }  
  310.   
  311.     @-webkit-keyframes kenburns-3 {  
  312.         0% {  
  313.             opacity: 0;  
  314.         }  
  315.         20% {  
  316.             opacity: 0;  
  317.         }  
  318.         35% {  
  319.             opacity: 0;  
  320.         }  
  321.         60% {  
  322.           opacity: 0;  
  323.         }  
  324.         70% {  
  325.           opacity: 1;  
  326.         }  
  327.         90% {  
  328.           opacity: 1;  
  329.         }  
  330.         100% {  
  331.             opacity: 1;  
  332.         }  
  333.     }  
  334.   
  335.     @keyframes kenburns-3 {  
  336.         0% {  
  337.             opacity: 0;  
  338.         }  
  339.         20% {  
  340.             opacity: 0;  
  341.         }  
  342.         35% {  
  343.             opacity: 0;  
  344.         }  
  345.         60% {  
  346.           opacity: 0;  
  347.         }  
  348.         70% {  
  349.           opacity: 1;  
  350.         }  
  351.         90% {  
  352.           opacity: 1;  
  353.         }  
  354.         100% {  
  355.             opacity: 1;  
  356.         }  
  357.     }  
  358.       
  359.       
  360.     /* 文字动画 */  
  361.     @-webkit-keyframes fadeInUp-1 {  
  362.         0% {  
  363.             opacity:0;  
  364.             -webkit-transform:translate3d(0,20px,0);  
  365.             transform:translate3d(0,20px,0)  
  366.         }  
  367.         20% {  
  368.             opacity:1;  
  369.             -webkit-transform:translate3d(0,0,0);  
  370.             transform:translate3d(0,0,0)  
  371.         }  
  372.         50% {  
  373.             opacity: 0;  
  374.         }  
  375.         60% {  
  376.           opacity: 0;  
  377.         }  
  378.         70% {  
  379.           opacity: 0;  
  380.         }  
  381.         90% {  
  382.           opacity: 0;  
  383.         }  
  384.         100% {  
  385.             opacity: 0;  
  386.         }  
  387.     }  
  388.       
  389.     @keyframes fadeInUp-1 {  
  390.         0% {  
  391.             opacity:0;  
  392.             -webkit-transform:translate3d(0,20px,0);  
  393.             transform:translate3d(0,20px,0)  
  394.         }  
  395.         20% {  
  396.             opacity:1;  
  397.             -webkit-transform:translate3d(0,0,0);  
  398.             transform:translate3d(0,0,0)  
  399.         }  
  400.         50% {  
  401.             opacity: 0;  
  402.         }  
  403.         60% {  
  404.           opacity: 0;  
  405.         }  
  406.         70% {  
  407.           opacity: 0;  
  408.         }  
  409.         90% {  
  410.           opacity: 0;  
  411.         }  
  412.         100% {  
  413.             opacity: 0;  
  414.         }  
  415.     }  
  416.       
  417.     @-webkit-keyframes fadeInUp-2 {  
  418.         0% {  
  419.             opacity: 0;  
  420.         }  
  421.         35% {  
  422.             opacity: 0;  
  423.             -webkit-transform:translate3d(0,20px,0);  
  424.             transform:translate3d(0,20px,0)  
  425.         }  
  426.         40% {  
  427.           opacity: 1;  
  428.           -webkit-transform:translate3d(0,0,0);  
  429.           transform:translate3d(0,0,0)  
  430.         }  
  431.         60% {  
  432.           opacity: 1;  
  433.         }  
  434.         70% {  
  435.           opacity: 0;  
  436.         }  
  437.         90% {  
  438.           opacity: 0;  
  439.         }  
  440.         100% {  
  441.             opacity: 0;  
  442.         }  
  443.     }  
  444.       
  445.     @keyframes fadeInUp-2 {  
  446.         0% {  
  447.             opacity: 0;  
  448.         }  
  449.         35% {  
  450.             opacity: 0;  
  451.             -webkit-transform:translate3d(0,20px,0);  
  452.             transform:translate3d(0,20px,0)  
  453.         }  
  454.         40% {  
  455.           opacity: 1;  
  456.           -webkit-transform:translate3d(0,0,0);  
  457.           transform:translate3d(0,0,0)  
  458.         }  
  459.         60% {  
  460.           opacity: 1;  
  461.         }  
  462.         70% {  
  463.           opacity: 0;  
  464.         }  
  465.         90% {  
  466.           opacity: 0;  
  467.         }  
  468.         100% {  
  469.             opacity: 0;  
  470.         }  
  471.     }  
  472.       
  473.     @-webkit-keyframes fadeInUp-3 {  
  474.         0% {  
  475.             opacity: 0;  
  476.         }  
  477.         20% {  
  478.             opacity: 0;  
  479.         }  
  480.         35% {  
  481.             opacity: 0;  
  482.         }  
  483.         65% {  
  484.           opacity: 0;  
  485.           -webkit-transform:translate3d(0,20px,0);  
  486.           transform:translate3d(0,20px,0)  
  487.         }  
  488.         70% {  
  489.           opacity: 1;  
  490.           -webkit-transform:translate3d(0,0,0);  
  491.           transform:translate3d(0,0,0)  
  492.         }  
  493.         90% {  
  494.           opacity: 1;  
  495.         }  
  496.         100% {  
  497.             opacity: 1;  
  498.         }  
  499.     }  
  500.       
  501.     @keyframes fadeInUp-3 {  
  502.         0% {  
  503.             opacity: 0;  
  504.         }  
  505.         20% {  
  506.             opacity: 0;  
  507.         }  
  508.         35% {  
  509.             opacity: 0;  
  510.         }  
  511.         65% {  
  512.           opacity: 0;  
  513.           -webkit-transform:translate3d(0,20px,0);  
  514.           transform:translate3d(0,20px,0)  
  515.         }  
  516.         70% {  
  517.           opacity: 1;  
  518.           -webkit-transform:translate3d(0,0,0);  
  519.           transform:translate3d(0,0,0)  
  520.         }  
  521.         90% {  
  522.           opacity: 1;  
  523.         }  
  524.         100% {  
  525.             opacity: 1;  
  526.         }  
  527.     }  
  528.       
  529.       
  530. </style>  

 

本文来自于：http://www.yoyo88.cn/study/uniapp/616.html

上一篇 vue引入echarts 展示散点图
下一篇 微信小程序多点路线规划
相关的文章
Powered by yoyo苏ICP备15045725号