Vue3中引入Swiper Element

最近想仿写一下小红书的PC端，仔细观察了一天。决定先从这个轮播图开始写。

分析一下：查看源码是使用了swiper，然后自己写的prev 和 next 按钮以及pageNation 。

1.从 NPM 安装和注册

npm install swiper

2.全局注册

在mian.ts中引入，执行一次。

// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

3.组件中使用

<swiper-container>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  ...
</swiper-container>

4.配置轮播图参数

<swiper-container :loop="true" :centered-slides="true" css-mode="true" mousewheel="true" speed="500">

这里有第一个坑，我想着不自己写，修改swiper自带的样式。 1.写在组件里的样式无法直接影响swiper，需要再写一个style 去除掉scoped 2.在我动态显示按钮时，左按钮直接被隐藏，又按钮出现undefined的单词，navigation正常显示。遂，放弃这种方法，自己写方法绑定功能函数。

<div class="arrow-controller left" :style="{ display: !navigationflag ? 'none' : 'block' }" @click="slidePrev">
                <svg t="1688720029036" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="5478" width="30" height="30">
                    <path
                        d="M301.568 536.32c-7.168 0-14.336-2.816-19.968-8.192-11.008-11.008-11.008-28.928 0-39.936L702.464 67.584c11.008-11.008 28.928-11.008 39.936 0 11.008 11.008 11.008 28.928 0 39.936L321.536 528.128c-5.376 5.376-12.8 8.192-19.968 8.192z"
                        p-id="5479" fill="#8a8a8a"></path>
                    <path
                        d="M722.432 964.864c-7.168 0-14.336-2.816-19.968-8.192L281.6 535.808c-11.008-11.008-11.008-28.928 0-39.936 11.008-11.008 28.928-11.008 39.936 0L742.4 916.736c11.008 11.008 11.008 28.928 0 39.936-5.632 5.376-12.8 8.192-19.968 8.192z"
                        p-id="5480" fill="#8a8a8a"></path>
                </svg>
            </div>
            <div class="arrow-controller right" :style="{ display: !navigationflag ? 'none' : 'block' }" @click="slideNext">
                <svg t="1688719972808" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="4891" width="32" height="32">
                    <path
                        d="M357.376 852.309333a25.6 25.6 0 0 0 36.181333 36.181334l358.4-358.4a25.6 25.6 0 0 0 0-36.181334l-358.4-358.4a25.6 25.6 0 0 0-36.181333 36.181334L697.685333 512l-340.309333 340.309333z"
                        fill="#8a8a8a" p-id="4892"></path>
                </svg>
            </div>
            <div class="pagination" :style="{ display: !navigationflag ? 'none' : 'flex' }" >
                <div class="pagination-item " :class="{active : (index+1)==curPage}" v-for="(item,index) in noteInfo.images" @click="slidPagination(index)"></div>
            </div>

绑定对应的鼠标移入显示，移出隐藏的css。完成了按钮点击进入下一个slide。

// 前后图片轮回按钮
function slideNext(){
    swiperEl.swiper.slideNext();
}
function slidePrev(){
    swiperEl.swiper.slidePrev();
}
//下放点点
function slidPagination(index:number){
    swiperEl.swiper.slideToLoop(index,10,false)
}

在测试中又发现一个新的问题，就是在第三页之后进入第一页时需要点击两次才行，然后出现了navigation的显示错误和右上角的图片序号错误。 去除loop之后，不循环没有这个问题。那么问题就出现在loop里。 继续看参考问题，寻找切换下一张slide的loop方法。 2023/7/8等待更新...

样式修改

样式

有以下 CSS 部分可用于样式设置：

container- 样式<div class="swiper">
wrapper- 样式<div class="swiper-wrapper">
button-prev- 上一个导航按钮的样式<div class="swiper-button-prev">
button-next- 下一个导航按钮的样式<div class="swiper-button-next">
pagination- 上一个分页容器的样式<div class="swiper-pagination">
- bullet- 分页项目符号元素的样式
- bullet-active- 活动分页项目符号元素的样式
scrollbar- - 滚动条容器的样式<div class="swiper-scrollbar">

例如：

swiper-container::part(bullet-active) {
  background-color: red;
}

Swiper Element 10.0.0

Vue3中引入Swiper Element

1.从 NPM 安装和注册

2.全局注册

3.组件中使用

4.配置轮播图参数

样式