如何使用swiper写一个场景式app

最新推荐文章于 2024-03-29 22:49:23 发布
最新推荐文章于 2024-03-29 22:49:23 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： html 文章标签： 幻灯片 swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wodemaya8/article/details/45247417
版权
本文介绍了如何利用swiper这个JavaScript插件来构建一个场景式app。内容包括从swiper官网下载资源，引入jQuery，配置swiper参数如mode和resistance，以及展示基本的初始化和HTML结构。示例代码展示了垂直滑动的实现，适用于仅在微信环境运行的app。
摘要由CSDN通过智能技术生成

swiper是一个js插件,主要实现幻灯片播放的效果,使用swiper可以轻松搭建一个场景式app.

这里写图片描述

大家可以使用手机打开如下链接查看最终效果:
http://www.tang520.com/wap_download1.html

首先需要前往swiper官网下载js和css文件:
http://www.swiper.com.cn/

引入头文件

<link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>

因为场景式app只运行在微信上,我们不考虑ie浏览器,所以直接使用jquery2.1.1版本.

所有的swiper代码都张差不多,如下所示:

<div class="swiper-container">  
    <div class="swiper-wrapper">
            <div class="swiper-slide">
                ....场景1
            </div>
            <div class="swiper-slide">
                ....场景2                 
            </div>
            <div class="swiper-slide">
                ....场景3             
            </div>
    </div>
</div>

在其中….部分写入任意的html代码

使用如下代码初始化swiper:

var mySwiper = new Swiper('.swiper-container', 
                        {
                                mode: 'vertical',
                                resistance:'100%'
                        });

其中mode指定了滑动方向,当前是垂直滑动.resistance指是否边缘拉伸效果,具体大家可以测试下.

有了这两个swiper就可以正常运行了.
下面贴出这个场景式app的所有代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <meta name="viewport" content="width=240,user-scalable=no,initial-scale=1,target-densitydpi=medium-dpi" />
        <meta charset="utf-8">
        <title>糖库精品商城</title>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
        <script type="text/javascript" src="js/transformjs.1.0.beta.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.imgpreload.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/idangerous.swiper.css">
        <link rel="stylesheet" type="text/css" href="css/animate.css">
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <style>
            body {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0px;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
                color: #fff;
                display: none;
            }
            .swiper-slide {
                height: 100%;
                opacity: 0.6;
                -webkit-transition: 300ms;
                -webkit-transform: scale(0.9);
                overflow: hidden;
            }
            .swiper-slide img {
                width: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            .swiper-slide-visible {
                opacity: 0.5;
                -webkit-transform: scale(1);
            }
            .swiper-slide-active {
                top: 0;
                opacity: 1;
                -webkit-transform: scale(1);
            }
            .loader {
                width: 100%;
                height: 100%;
            }
            .loader img {
                position: absolute;
                left: 0px;
                width: 100%;
            }
            .loader span {
                text-align: center;
                width: 100%;
                position: absolute;
                bottom: 3px;
                left: 0px;
            }
            .poss {
                width: 0%;
                height: 3px;
                background-color: #0099FF;
                position: absolute;
                bottom: 0px;
                left: 0px;
            }
            .bt1 {
                width: 100%;
                height: auto;
                position: absolute;
                left: 0px;
                top: 0px;
            }
            .bt {
                width: 80%;
                height: 45px;
                line-height: 45px;
                background-color: rgba(255, 255, 255, 0.5);
                color: white;
                text-align: center;
                z-index: 99;
                margin: 4px auto;
                border-radius: 3px;
                font-weight: bold;
            }
            .bottomArrow {
                position: absolute;
                bottom: 15px;
                width: 25px;
                height: 19px;
                background: url(img/bottomarrow.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
                -webkit-animation: guideTop 1.5s infinite;
            }
            @-webkit-keyframes guideTop {
                0% {
                    -webkit-transform: translateY(35px);
                    opacity: 0
                }
                60% {
                    -webkit-transform: translateY (12px);
                    opacity: 1
                }
                100% {
                    -webkit-transform: translateY (0px);
                    opacity: 0
                }
            }
        </style>
    </head>

    <body>
        <div class="loader">
            <span>加载中</span>
            <img src="img/loadding.gif" width="100%" id="load" />
            <div class="poss"></div>
        </div>
        <div class="swiper-container">

            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/1-06-back.png" />
                    <img src="img/1-06.png" />
                    <div class="bt1">
                        <div class="bt" onclick="window.location.href='http://mp.weixin.qq.com/s?__biz=MjM5Njg3OTUzNw==&mid=204257251&idx=1&sn=a0300c8f69599571ec0d3fdc2df69c12&scene=1&from=groupmessage&isappinstalled=0#rd'">关注公众号</div>
                        <div class="bt" onclick="window.location.href='http://mp.weixin.qq.com/mp/redirect?url=https://itunes.apple.com/us/app/gotomeeting/id962258223'">下载苹果版</div>
                        <div class="bt" onclick="window.location.href='http://zhushou.360.cn/detail/index/soft_id/2516732'">下载安卓版</div>
                    </div>
                    <div class="bottomArrow"></div>
                </div>
                <div class="swiper-slide">
                    <img src="img/1-02-back.png" />
                    <img src="img/1-02.png" class="animated tada"/>
                    <div class="bottomArrow"></div>
                </div>
                <div class="swiper-slide">
                    <img src="img/1-03-back.png" />
                    <img src="img/1-03.png" />
                    <div class="bottomArrow"></div>
                </div>
                <div class="swiper-slide">
                    <img src="img/1-04-back.png" />
                    <img src="img/1-04.png" />
                    <div class="bottomArrow"></div>
                </div>
                <div class="swiper-slide">
                    <img src="img/1-05-back.png" />
                    <img src="img/1-05.png" />
                    <div class="bottomArrow"></div>
                </div>
                <div class="swiper-slide">
                    <img src="img/1-06-back.png" />
                    <img src="img/1-06.png" />
                    <div class="bt1">
                        <div class="bt" onclick="window.location.href='http://mp.weixin.qq.com/s?__biz=MjM5Njg3OTUzNw==&mid=204257251&idx=1&sn=a0300c8f69599571ec0d3fdc2df69c12&scene=1&from=groupmessage&isappinstalled=0#rd'">关注公众号</div>
                        <div class="bt" onclick="window.location.href='http://mp.weixin.qq.com/mp/redirect?url=https://itunes.apple.com/us/app/gotomeeting/id962258223'">下载苹果版</div>
                        <div class="bt" onclick="window.location.href='http://zhushou.360.cn/detail/index/soft_id/2516732'">下载安卓版</div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var imgs = ["img/1-02.png", "img/1-02-back.png", "img/1-03.png",
                "img/1-03-back.png", "img/1-04.png", "img/1-04-back.png",
                "img/1-05.png", "img/1-05-back.png", "img/1-06.png", "img/1-06-back.png"
            ];
            $(document).ready(
                function() {
                    $("#load").css("top",
                        window.innerHeight / 2 - window.innerWidth / 2);
                    var sum = 0;
                    jQuery.imgpreload(imgs, {
                        each: function() {
                            sum++;
                            $(".poss").css("width",
                                sum / imgs.length * 100 + "%");
                        },
                        all: function() {
                            $(".swiper-container").fadeIn(0);
                            var mySwiper = new Swiper('.swiper-container', {
                                mode: 'vertical',
                                resistance:'100%',
                                updateOmImagesReady: true,
                                onSlideChangeStart: function(swiper) {
                                    for (var i = 0; i < swiper.slides.length; i++) {
                                          var slide = swiper.slides[i];
                                          console.info(slide.getElementsByTagName("img")[1]);
                                          slide.getElementsByTagName("img")[1].className="";
                                        }
                                    var img = swiper.activeSlide()
                                        .getElementsByTagName("img")[1];
                                    switch(swiper.activeIndex){
                                        case 0:
                                            $(img).addClass("animated tada");
                                            break;
                                        case 1:
                                            $(img).addClass("animated wobble");
                                            break;
                                        case 2:
                                            $(img).addClass("animated bounceInDown");
                                            break;
                                        case 3:
                                            $(img).addClass("animated flipInY");
                                            break;
                                        case 4:
                                            $(img).addClass("animated rollIn");
                                            break;
                                        default:
                                            $(img).addClass("animated rubberBand");
                                            break;
                                    }

                                },
                                onSlideChangeEnd: function(swiper) {

                                    var img = swiper.activeSlide()
                                        .getElementsByTagName("img")[1];

                                }
                            })
                            $(".loader").fadeOut(200);
                        }
                    });
                    $(".bottomArrow").css("left", window.innerWidth / 2 - 25 / 2);
                    $(".bt1").css("top",
                        window.innerHeight / 2 - $(".bt1").height() / 2);
                });
            $.ajax({
                url: "wap/weixin/api",
                async: false,
                dataType: 'json',
                data: {
                    url: encodeURIComponent(window.location.href.split('#')[0])
                },
                success: function(data) {
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appid, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature, // 必填，签名，见附录1
                        jsApiList: ["onMenuShareTimeline",
                                "onMenuShareAppMessage",
                                "onMenuShareQQ",
                                "onMenuShareWeibo",
                                "startRecord",
                                "stopRecord",
                                "onVoiceRecordEnd",
                                "playVoice",
                                "pauseVoice",
                                "stopVoice",
                                "onVoicePlayEnd",
                                "uploadVoice",
                                "downloadVoice",
                                "chooseImage",
                                "previewImage",
                                "uploadImage",
                                "downloadImage",
                                "translateVoice",
                                "getNetworkType",
                                "openLocation",
                                "getLocation",
                                "hideOptionMenu",
                                "showOptionMenu",
                                "hideMenuItems",
                                "showMenuItems",
                                "hideAllNonBaseMenuItem",
                                "showAllNonBaseMenuItem",
                                "closeWindow",
                                "scanQRCode",
                                "chooseWXPay",
                                "openProductSpecificView",
                                "addCard",
                                "chooseCard",
                                "openCard"
                            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    });
                }
            });




            wx.ready(function() {
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                var shareData = {
                    title: '糖库精品商城',
                    desc: '糖库精致礼品商城是一个专门搜集并出售最新,最精致,最美观的礼品的手机app,您可以在安卓,苹果,微信上浏览我们',
                    link: 'http://tang520.weiyibao.com/wap_download1.html',
                    imgUrl: 'http://tang520.weiyibao.com/img/logo.png'
                };
                wx.onMenuShareAppMessage(shareData);
                wx.onMenuShareTimeline(shareData);
                wx.onMenuShareQQ(shareData);
                wx.onMenuShareWeibo(shareData);

            });
        </script>

    </body>

</html>
wodemaya8
关注
专栏目录
基于swiper.js 微场景
10-29
支持swiper嵌套，同一个slide中嵌套另一个swiper，同时还有动画效果，差不多swiper应用都可以从中推出来
应用场景怎么写
顺其自然~专栏
03-19 3255
应用场景是产品或服务实际应用环境和情境。应用场景的概念在产品设计和市场营销中非常重要，它帮助设计者和营销人员更好地理解用户的需求和使用习惯。：应用场景描述了用户使用产品时的环境背景，包括用户所在的地点、周围的事物以及可能的社会互动情况。：它还包括用户使用产品的目的或目标，即用户希望通过产品解决什么问题或满足什么需求。：应用场景还涉及用户为了达到目标而进行的一系列活动和事件的顺序。
swiper，animate使用方法
weixin_30646315的博客
10-10 330
1、先链接css和js文件 <link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/> <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <script type="t...
Swiper Animate使用方法
free_pi的博客
07-14 1216
使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。 初始化时隐藏元素并在需要的时刻开始动画。 //Swiper4.x 初始化 var mySwiper = new Swiper ('.swiper-container', { on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this).
swiper卡牌式与全屏限高是轮播图.zip
09-30
- Swiper组件是uni-app内置的基础组件之一，它提供了一个灵活的轮播功能，可以用来实现图片轮播、页面切换等多种效果。 - 使用`<swiper>`标签在模板中声明轮播图容器，通过`<swiper-item>`标签包裹需要轮播的内容...
vue3中使用swiper7
Bejpse的博客
03-06 1470
项目场景： 前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。 另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失 普通vue3项目： win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。 之后在命令行里面输入vue create vue3 接着选择创建默认的vue3项
Uniapp swiper 滚动图组件
09-10
【标题】"Uniapp swiper 滚动图组件"是一个基于Vue.js开发的全端兼容的前端组件，专为在不同平台（如iOS、Android、H5等）上实现滑动轮播效果而设计。它提供了丰富的功能和高度的自定义性，使得开发者能够轻松地在...
swiper-5.3.8.zip
06-10
3. **初始化 Swiper**：在 JavaScript 中创建一个新的 Swiper 实例，指定配置选项，如自动播放、循环等。 4. **配置选项**：Swiper 提供众多可配置选项，例如 slidesPerView、autoplay、loop、pagination 等，可以...
WebSinglePageApp:利用swiper.js框架制作的手机单页滑动轻应用，主要利用CSS3的帧动画
06-20
WebSinglePageApp 利用swiper.js制作的手机单页滑动轻应用 利用zepto.js在移动端开发 利用CSS3实现帧动画效果 （建议在移动端打开） 或用微信扫一扫下面的二维码
swiper制作的场景应用
05-20
利用swiperjs开发的手机滑屏场景应用，这个是官网的demo，打虎的例子。可移植性强，对于做手机应用的可以下载下来观摩学习。
swiper&微场景
h13783313210的博客
01-15 905
swiper微场景开发流程： 1.下载最新的swiper，官方网址：http://www.swiper.com.cn/  2.API文档是配置项手册 中文教程---Swiper Animate是Swiper的动画效果，功能很强大 3.引入CSS和JS文件： swiper.min.js和swiper.min.css。如果用到动画效果则需要引入swiper.animate.min.js和an
仿腾讯云手机端产品展示页面类swiper效果（附源码）
weixin_30924239的博客
02-18 327
老婆做项目非需要做得像腾讯云手机端产品展示效果，有点像swiper，但还是点不一样，研究了很久发现用现有的swiper功能没办法实现，没办法只好想办法把腾讯云的抠下来研究一下。现在大公司的前端做的都非常高端，经过了二个多小时我才算是把效果给弄下来了。 源码下载地址：http://pan.baidu.com/s/1i46hXK5 转载于:https://www.cnblogs.com/c...
Swiper插件的基本使用方法和案例
2401_84010784的博客
03-29 279
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s。swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s。swiper-animate-effect：切换效果，例如 fadeInUp。步骤五、在需要运动的元素上面增加类名ani ，和其他的类似插件相同。步骤四：Swiper动画的初始化，以及animate的初始化。步骤三：HTML和JS的基本内容。三、Swiper制作元宵节动画。四、基于swiper制作轮播图。
网站动画效果-Swiper Animate & wow.js
weixin_48596030的博客
05-17 1320
网站动画效果-Swiper Animate & wow.js
关于在uni-app中使用swiper（APP实测可用）
热门推荐
weixin_46021159的博客
10-22 1万+
关于在uni-app中使用swiper ，详细讲解。
Swiper Animate使用方法、Swiper 动画效果
蔡菜小奥比的博客
01-25 1468
swiper animate使用方法
uniapp 横向swiper滚动
最新发布
10-26
UniApp 的横向 Swiper 滑动组件是一种用于展示多个卡片或内容模块水平滑动效果的 UI 组件。它通常用于列表、轮播图等场景。在 UniApp 中，你可以通过以下步骤来创建一个横向滚动的 Swiper： 1. 引入组件：首先，在 Vue 文件中安装 UniApp 的 Swiper 组件，如果还没有安装，可以使用 `uni-app-vue` 包管理器 (如 Vite 或者 HBuilderX) 进行安装，例如： ```html <template> <importer src="vant/swipe/swipe" /> </template> ``` 2. 添加滑块：在模板中添加 `<van-swipe>` 标签，并设置必要的属性，比如 `swipeable` 表示是否允许滑动，`autoplay` 设置自动切换时间等： ```html <van-swipe :swipeable="true" :autoplay="3000"> <van-swipe-item v-for="(item, index) in items" :key="index"> <img :src="item.image" alt="" /> <div>{{ item.title }}</div> </van-swipe-item> </van-swiper> ``` 其中，`items` 是一个包含图片路径和标题的对象数组。 3. 定义数据：在你的 Vue 实例中，初始化 `items` 数组，并在需要的时候更新它来动态控制滑动内容： ```js export default { data() { return { items: [ { image: 'path/to/item1.jpg', title: 'Item 1' }, { image: 'path/to/item2.jpg', title: 'Item 2' }, // ... 更多项 ] }; } }; ``` 4. 可选功能：如果你还需要其他交互，如左右箭头、暂停/播放按钮等，可以在样式表中引入 Vant UI 或自定义样式，并在模板中添加相应的按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值