H5滑动实现翻页（vue）

最新推荐文章于 2025-06-20 16:52:09 发布

原创

最新推荐文章于 2025-06-20 16:52:09 发布 · 7.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #滑动 #翻页 #swiper

个人blog，欢迎关注加收藏

H5 滑动翻页

框架：Vue + element + JQ + vue-awesome-swiper

项目：H5绣红旗

转载：vue-awesome-swiper - 基于vue实现h5滑动翻页效果

已经打好vue-cli项目，安装vue-awesome-swiper

npm i --s vue-awesome-swiper

main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

组件中
3.1 写上swiper结构

<transition name="fade">
            <swiper id="swiperBox" v-bind:options="swiperOption" ref="mySwiper">
                <!-- 第一页 -->
                <swiper-slide class="swiper-slide1">
                    <div class="page">
                        <home></home>
                    </div>
                </swiper-slide>
                <!-- 第二页 -->
                <swiper-slide class="swiper-slide2">
                    <div class="page">
                        <statistics></statistics>
                    </div>
                </swiper-slide>
                <!-- 第三页 -->