vue之swiper插件引入加载在模板混用

深碍√TFBOYSˉ_ 2022-03-17 01:13 179阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.css">
        <style>
             .swiper-container {
                width:100%;
                height:300px;
            }
            .box0 {
               background-color: red;
            }
    
            .box1 {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <new-swiper>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" :class = "index > 0 ? 'box1' :'box0'"  v-for="(t,index) in title">{
       {t}}</div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </new-swiper>
        </div>
    </body>
    </html>

<script src="node_modules/swiper/dist/js/swiper.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
    //js部分
    
        //创建模板
        let newSwiper = {
            template : `<div><slot></slot></div>`,
            //在vue生命周期挂载完成时初始化weiper
            mounted(){
                    new Swiper(".swiper-container",{
                        direction:"horizontal",
                        loop : true,
                         pagination: {
                              el: '.swiper-pagination',
                            }
                    })
                }
        }
    
        new Vue({
            el : "#app",
            components : {
                newSwiper
            },
            data : {
                title : ["t1","t2"]
            },
        })
    
    
    
    
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关快速入门在Vue中使用滑动插件Swiper

前言 swiper 开源、免费、强大的滑动插件。 swiper中文网 [https://www.swiper.com.cn/][https_www.swiper

柔情只为你懂/ 2023年10月18日 11:57/ 0 赞/ 69 阅读

相关若依引入swiper / VUE引入swiper

现有需求要求实现竖直方向的同时显示3个item的轮播效果，若依VUE（前后端分离）版本使用的是Element UI，框架中的`carousel`组件只能实现简单的轮播效果，并且

妖狐艹你老母/ 2022年10月07日 08:56/ 0 赞/ 401 阅读

相关不用插件vue实现滚动加载

关键所在是实现滚动到底部，然后进行post请求，然后将获得的分页的数据push到数组中 1，在data中定义三个变量page,isadd,data\_wrpa其中page是控

╰+哭是因爲堅強的太久メ/ 2022年05月25日 14:38/ 0 赞/ 340 阅读

相关 vue swiper的插件

首先我们要用到swiper,所以要安装它，通过npm安装 <table> 安装 <tbody> <tr> <td>npm install swiper<

喜欢ヅ旅行/ 2022年05月25日 13:09/ 0 赞/ 209 阅读

相关 vue图片懒加载插件 vue-lazyload

第一步：安装插件 npm i vue-lazyload --save 第二步：在main.js中引入，并使用 ![watermark_type_ZmFuZ3poZ

柔光的暖阳◎/ 2022年04月16日 06:06/ 0 赞/ 748 阅读

相关 vue项目引入swiper组件

swiper官网: [https://3.swiper.com.cn/api/Navigation\_Buttons/2015/0308/209.html][https_3.s

Dear 丶/ 2022年04月13日 14:14/ 0 赞/ 465 阅读

相关 vue之swiper插件引入加载在模板混用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

深碍√TFBOYSˉ_/ 2022年03月17日 01:13/ 0 赞/ 180 阅读

相关 vue 组件懒加载引入

非常简单 ![20190523144347434.png][] components: { appview : resolve => requir

た入场券/ 2022年01月28日 06:41/ 0 赞/ 382 阅读

相关 vue-infinite-scroll：滚动加载vue插件（一）

一、下载 vue-infinite-scroll： npm install vue-infinite-scroll --save 二、main.js配置vue-in

电玩女神/ 2021年12月10日 19:05/ 0 赞/ 671 阅读

相关 vue 插件(swiper)使用

两种方法: 1... 打开[https://www.swiper.com.cn/download/index.html][https_www.swiper.com.cn_d

本是古典何须时尚/ 2021年11月22日 14:52/ 0 赞/ 410 阅读