切换风格

后盾人PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 129|回复: 0

[web前端] 老师帮忙看下require.js加载amazeui.swiper.js无效的问题

[复制链接]
     
  • TA的每日心情

    2018-3-11 14:29
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    3

    帖子

    71

    积分

    幼儿园

    Rank: 1

    积分
    71
    活动推广币
    0 个
    后盾币
    71 个
    注册时间
    2018-3-11
    在线时间
    0 小时
    帖子
    3
    发表于 2018-3-11 14:42:46 | 显示全部楼层 |阅读模式
    本帖最后由 金刚狼v2 于 2018-3-11 14:51 编辑

    我想用require.js来按需加载Amaze UI框架和相关的js插件,
    在加载amazeui.swiper.js这个幻灯插件是不成功了,
    直接使用<script src="bellelib/jquery.min.js"></script><script src="assets/js/amazeui.swiper.js"></script>载入就能正常跑起来,,

    使用require.js加载,文件顺序和路径什么的都正确,可是就是报错,时好时坏,非常不稳定!

    main.js配置
    1. /**

    2. * 前端模块配置


    3. */

    4. require.config({
    5.         baseUrl: 'belle',
    6.         paths: {
    7.                
    8.                 'jquery': 'lib/jquery.min',
    9.                 'amazeuiswiper': 'assets/js/amazeui.swiper',//swiper焦点图
    10.                 'css': 'lib/css.min',

    11.         },
    12.         shim: {
    13.          
    14.                 'amazeuiswiper': {
    15.                         exports:'amazeuiswiper',
    16.             deps: ['jquery','css!assets/css/amazeui.swiper.min.css']//swiper依赖关系
    17.        },
    18.         
    19.         }

    20. });


    复制代码


    html
    1. <!doctype html>

    2. <html class="no-js">
    3. <head>
    4. <meta charset="utf-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="description" content="">
    7. <meta name="keywords" content="">
    8. <meta name="viewport" content="width=device-width, initial-scale=1">
    9. <!--<script src="bellelib/jquery.min.js"></script>-->
    10. <script src="belle/lib/require.js"></script>
    11. <script src="main.js"></script>
    12. <script>require(['amazeuiswiper'], function(){});
    13. </script>



    14. <!--<script src="assets/js/amazeui.swiper.js"></script>        -->
    15.         
    16. <link rel="stylesheet" type="text/css" href="demo.css" />
    17. <title>Amaze UI 前端框架</title>

    18. </head>

    19. <body>

    20.         
    21. <div class="swiper-container demo" id="demo2">
    22.   <div class="swiper-wrapper">
    23.     <div class="swiper-slide">Slide 1</div>
    24.     <div class="swiper-slide">Slide 2</div>
    25.   </div>
    26.   
    27.   <!-- Add Pagination -->
    28.   
    29.   <div class="swiper-pagination"></div>
    30. </div>
    31. <script>

    32. $('#demo2').swiper({
    33.   pagination: '#demo2 .swiper-pagination',
    34.   paginationClickable: true
    35. });
    36.         </script>        

    37. </body>
    38. </html>
    复制代码


    开始正常跑起来,
    QQ截图20180311114149.jpg

    刷新几下就报错了,非常不稳定!

    QQ截图20180311114619.jpg


    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    Archiver|小黑屋|后盾人 人人做后盾 ( 京ICP备12048441号-3 )

    GMT+8, 2018-6-20 01:52 , Processed in 0.151604 second(s), 32 queries .

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表