0
点赞
收藏
分享

微信扫一扫

Angular4.x 中使用Swiper

日月同辉9908 2022-07-14 阅读 39
ide初始化javascriptLinux系统/运维
加载失败

请问一些 ng4.x里面引入轮播组件 无法执行下面的的命令，npm install @types/swiper --save

npm install @types/swiper --save-dev 应该怎么解决呢？

话不多说 ，反正网上的资料拿过来了跑项目，直接把环境装挂了，最终的罪人是无法翻墙，所以会报如下的错误：


Angular4.x 中使用Swiper_初始化

2.png


Angular4.x 中使用Swiper_ide_02

3.png

然后各种找文章博客，都没用，都一样的告诉你他们就是这么装成功的。

说了这么多，解决方案如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

其他人推荐的是淘宝镜像源：​​https://www.jianshu.com/p/fae87fef8ad0​​（参考这个吧，我就不搬了）

放一张我执行成功的图：

Angular4.x 中使用Swiper_初始化_03

5.png

暂时先到这里，后面有问题再继续跟进，主要界面要写一个效果，想来还是加个插件来做：


Angular4.x 中使用Swiper_javascript_04

6.png

可以参考如下效果图：

Angular4.x 中使用Swiper_初始化_05

ng加入轮播插件.gif

静态界面：

<div class="swiper-container">
        <div class="swiper-wrapper" >
            <div class="swiper-slide tl-color-0">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-1">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-2">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-3">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-4">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-5">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-6">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <div class="swiper-slide tl-color-7">
                <div class="swiper-slide tl-card">
                    <div class="tl-font-30 tl-p-b6">40</div>
                    <div class="tl-font-14 tl-p-b6">一级会员人数</div>
                    <div class="tl-font-12 tl-p-b6"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                    <div class="tl-font-12"><span>充值:￥5000</span>    <span>赠送:￥500</span></div>
                </div>
            </div>
            <!--<div class="swiper-slide tl-color-3">Slide 3</div>
            <div class="swiper-slide tl-color-2">Slide 4</div>
            <div class="swiper-slide tl-color-1">Slide 5</div>
            <div class="swiper-slide tl-color-5">Slide 6</div>
            <div class="swiper-slide tl-color-1">Slide 7</div>
            <div class="swiper-slide tl-color-2">Slide 8</div>
            <div class="swiper-slide tl-color-3">Slide 9</div>
            <div class="swiper-slide tl-color-4">Slide 10</div>-->
        </div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

Css



.tl-card{
    padding-left: 20px;
    padding-right: 20px;
    display: block!important;

}

.tl-card2{
    width:210px;
    height:123px;
    border-radius:6px;
    float: left;
    margin-right: 17px;
    padding-left: 20px;
    padding-right: 20px;
}

.tl-color-0{
    background: #FDAF94;
}
.tl-color-1{
    background: #F7D570;
}
.tl-color-2{
    background: #88BDF7;
}
.tl-color-3{
    background: #A78BFA;
}
.tl-color-4{
    background: #5EE7BB;
}
.tl-color-5{
    background: #A3E96B;
}
.tl-color-6{
    background: #DC8BFA;
}
.tl-color-7{
    background: #FB8D8D;
}

.tl-font-30{
    font-size:30px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}
.tl-font-14{
    font-size:14px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
}
.tl-font-12{
    font-size:12px;
    font-family:'PingFang-SC-Bold';
    font-weight:bold;
    color: #ffffff;
    float: left;
}
.tl-p-b6{
    margin-bottom: 6px;
    display: flex;
}

/********* 这里来展示轮播图的效果******************************************/
.swiper-container {
    width: 96%;
    height: 120px;
    margin: 20px;
    padding-left: 20px;
}
.swiper-slide {
    width: 250px!important;
    height: 120px!important;
    margin-right: 38px!important;
    margin-left: 30px!important;
    text-align: center;
    border-radius:6px;
    /*text-align: center;
    font-size: 18px;
    !* Center slide text vertically *!
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}

初始化函数，在顶部用这种引入全局变量的模式初始化Swiper，如果用import的模式不知为啥，new Swiper会报语法错误

Angular4.x 中使用Swiper_ide_06

3.png

参考一篇博客：# ​​Angular4中使用后台去数据，Swiper不能滑动的解决方法​​​​javascript:void(0)​​

onloaded(){
        var mySwiper = new Swiper('.swiper-container',{
            slidesPerView : 3,  //启用网格模式，每次滑动三个
            slidesPerGroup : 3,
            observer:true,//修改swiper自己或子元素时，自动初始化swiper （必须加）
            observeParents:true,//修改swiper的父元素时，自动初始化swiper (必须加)

            navigation: { //展示左右两侧的箭头图标
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })

    }


    ngOnInit(): void {
        console.log('Swiper',Swiper);
        this.getMemberChartData('d');
      //  this.onloaded(); //如果在这里初始化会出现数据没有返回，就开始渲染的问题，导致swiper报错，如果是静态界面可以这里初始化
    }

ngAfterViewInit(){
        this.onloaded();
    }

前提条件，你需要引入swiper插件：

angular4.x 如何正确的引入swiper插件​​https://www.jianshu.com/p/629e9908c1b3​​

举报

相关推荐

angular4.x 如何正确的引入swiper插件

cssajaxassets目录虚拟化云计算

Angular4.X 介绍

javascripttypescript编程语言JavaScript前端开发

Angular4.x 日期管道

git默认值字符串Java编程语言

Angular4.x 中的服务

数据依赖注入ideJavaScript前端开发

Angular4.x 事件绑定直接赋值

编程语言

angular4.x 如何修改默认端口号

根文件夹json端口号Linux系统/运维

Angular4.x 安装|创建项目|目录结构|创建组件

创建项目node.js官网JavaScript前端开发

angular4.x 如何动态组装一个class的样式

idehtml虚拟化云计算

vue中使用swiper5

vue.jsjavascript前端

angular4.x 跳转详情后返回列表界面 搜索参数不重置的解决方案

重置搜索解决方案编程语言
0 条评论
加载失败