加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

基于mpvue的小程序swiper类3d轮播

发布时间：2020-12-14 19:22:24 所属栏目：资源 来源：网络整理
导读：前言 功能：实现类3d轮播，切换效果为放大缩小? 技术: 使用 mpvue框架，用小程序swiper组件以及小程序Animation动画对象 项目地址：?https://github.com/gzz0204/mpvue-swiper 效果： 演示效果图 一、结构 小程序swiper? 改为mpvue的写法。 设置previous-mar

前言

功能：实现类3d轮播，切换效果为放大缩小?
技术: 使用 mpvue框架，用小程序swiper组件以及小程序Animation动画对象

项目地址：?https://github.com/gzz0204/mpvue-swiper

效果：

演示效果图

一、结构

小程序swiper?
改为mpvue的写法。

设置previous-margin和next-margin来漏出两边的模块?
设置circular使轮播无限循环

绑定change事件，自定义handleChange方法获取当前swiper的index

小程序swiper文档

    

  1. <template>
    2. 

  2.   <div class="home_wrap">
    3. 

  3.       :previous-margin"previousMargin"
    4. 

  4. circular"circular"
    5. 

  5.         <blockv-for"(item,index) in datalist" :key"index">
    6. 

  6.               "curIndex===index ? 'active_item' : 'item'"animation"index == curIndex ? animationData : animationData2">
    7. 

  7.                 <Carddata"item" />
    8. 

  8. </swiper-item>
    9. 

  9. </swiper>
    10. 

  10. "swiper_dot_wrap"      <ul>
    11. 

  11. ></li>
    12. 

  12. </div>
    13. 

  13. 

    二、js
    

    

    import Card from '@/components/home_card'
    14. 

  14.   data (){
    15. 

  15.       curIndex: 0,
    16. 

  16.         coverImg 'http://n.sinaimg.cn/sinacn20118/201/w1080h721/20190119/3311-hrvcwnk7953342.jpg'
    17. 

  17. 'https://lh3.googleusercontent.com/IU9_NYevRO-fFjiH_hhjuxTOuDhG3cmMCWNOlnz2TBoG9jICiZevHGC0eJmvsrUwUAtbeFc=s128'
    18. 

  18. '圣彼得堡是另一个阿姆斯特丹'
    19. 

  19.       previousMargin'63rpx'      animationData2{}// 卡片缩小动画
    20. 

  20.     components{
    21. 

  21.   methods{
    22. 

  22. changeActive()
    23. 

    24. 

  24.     changeNormal var animation2  wxcreateAnimation({
    25. 

    26. 

  26. animation2  animation2
    27. 

  27.     changeActive  animation animation  animation
    28. 

  28. }
    29. 

  29. 

    三、样式
    

    

    home_swiper {
    30. 

  30.   position relative;
    31. 

  31.   height876rpx!important;
    32. 

  32. }
    33. 

  33.   transform scale);
    34. 

  34.   opacity;
    35. 

  35. active_item);
    36. 

  36. // 指示点
    37. 

  37.   top106rpx  right65rpx15rpx  ulfloat right    overflow hidden;
    38. 

  38.  left;
    39. 

  39. 2rpx solid #b99c6d;
    40. 

  40. &:lastchild{
    41. 

  41. }
    42. 

  42. }
    43. 

  43. 

    子组件card
    

    

    <template>
    44. 

  44. "card">
    45. 

  45. "img_wrap">
    46. 

  46. </div>
    47. 

  47. "cont_wrap">
    48. 

  48. "title_wrap">
    49. 

  49. >
    50. 

  50. "desc">{{desc}}</>
    51. 

  51. </template<script>
    52. 

    53. 

  53. }
    54. 

  54. scriptstyle lang scoped890rpxcard    position;
    55. 

  55.     border7rpxactive_item /* banner */
    56. 

  56.   /* 图片 */
    57. 

  57. 399rpx7rpx0    zindex5    opacity0.7/* 标题出处 */
    58. 

  58.   box  color#b99c6d;
    59. 

  59.     fontsize30rpx    lineheight35rpx70rpx    padding// 描述
    60. 

  60. 
            
    
            	
    相关内容
    

      

            
      
        
    
    
      
    	
      
        
      推荐文章
      
            
        
        
        
    	
        
        
        站长推荐
        
            
        
        
        
        
        
    	
        
        
        热点阅读
        
            
          
        
          
        
          
        
          
	
          


          

          

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。
          

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果
          

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同