插件——swiper轮播(watch+nextTick结合使用)

2022-02-06 03:01:03 阅读：279 来源： 互联网

标签：nextTick 插件轮播 DOM watch swiper Swiper

swiper轮播

1、安装swiper5

npm install swiper@5

2、在需要使用轮播图的组件内导入swpier和它的css样式

//引入Swiper
import Swiper from 'swiper'
//引入Swiper样式
import 'swiper/css/swiper.css'

3、在组件中new Swiper实例之前，页面中必须要有dom标签
4、创建swiper实例

确保数据加载好了---watch，监听数据的变化
确保结构渲染出来了---nextTick，获取更新后的 DOM

<div class="swiper-container" id="mySwiper" ref="cur">
    <div class="swiper-wrapper">
        <div v-for="carousel in list" :key="carousel.id" class="swiper-slide">
            <img :src="carousel.imgUrl" />
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script>
import Swiper from 'swiper';
export default {
    name: 'Carousel',
    props: {
        list: {
            type: Array,
            default() {
                return []
            }
        }
    },
    watch: {
        //监听bannerList数组的变化，由[]-->数组中有四个元素
        list: {
            immediate: true,
            handler(newVal, oldVal) {
                //如果执行handler方法，代表组件身上这个属性的属性已经有了【数组：四个元素】
                //再刷新的话，还是不行，说明结构还是没有
                //原因：当前这个函数执行，只能保证bannerList数据有了，但是没有办法保证v-for结构渲染出来了没。
                //解决：nextTick 在下次 DOM 更新  循环结束之后 执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
                //nextTick
                this.$nextTick(() => {
                    //当执行这个回调函数的时候：保证服务器数据回来了，v-for执行完毕了【轮播一定有了】
                    //更新dom之后
                    //保证页码中的结构一定是有的，经常和很多插件一起使用【都需要dom存在】
                    // console.log('nextTick')
                    var mySwiper = new Swiper(this.$refs.cur, {
                        loop: true, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        }
                    })
                })
            }
        }
    }
};
</script>

标签：nextTick,插件,轮播,DOM,watch,swiper,Swiper
来源： https://www.cnblogs.com/jiajia-hjj/p/15865210.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

插件——swiper轮播(watch+nextTick结合使用)

swiper轮播