H5 mock.插件下拉刷新上拉加载

最新推荐文章于 2022-08-08 16:31:36 发布
最新推荐文章于 2022-08-08 16:31:36 发布
阅读量176 收藏
点赞数 1
文章标签： js scss html javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fgiomg/article/details/120010304
版权

<!DOCTYPE html>

<html lang="en" style="font-size: 100px;">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="./css/style.css">

    <link rel="stylesheet" href="./fonts/iconfont.css">

    <link rel="stylesheet" href="./swiper (1).css">

    <script src="./mock.js"></script>

    <script src="./swiper.min (1).js"></script>

    <script src="./bScroll.js"></script>

</head>

<body style="font-size: 16px;">

    <div class="wrap">

        <header>

            <i class="iconfont icon-bofang2"></i>

            <span>关注 推荐 直播</span>

            <i class="iconfont icon-fangdajing"></i>

        </header>

        <main>

            <nav>

                <ul>

                    <li class="on">玩具1</li>

                    <li>玩具2</li>

                    <li>玩具3</li>

                    <li>玩具4</li>

                    <li>玩具5</li>

                    <li>玩具6</li>

                    <li>玩具7</li>

                </ul>

            </nav>

            <div class="swiper-container s1">

                <div class="swiper-wrapper sa">

                    <div class="swiper-slide sb" >

                   

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p><i class="iconfont icon-shezhi"></i></p>

                    </div>

                 

                    </div>

                    <div class="swiper-slide sb" >

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p> <i class="iconfont icon-shezhi"></i></p>

                    </div>

                </div>

                    <div class="swiper-slide sb" >

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p> <i class="iconfont icon-shezhi"></i></p>

                    </div>

                </div>

                    <div class="swiper-slide sb" >

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p> <i class="iconfont icon-shezhi"></i></p>

                    </div>

                </div>

                    <div class="swiper-slide sb" >

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p> <i class="iconfont icon-shezhi"></i></p>

                    </div>

                </div>

                    <div class="swiper-slide sb" >

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p> <i class="iconfont icon-shezhi"></i></p>

                    </div>

                </div>

                    <div class="swiper-slide sb" >

                    <div class="ch1">

                        <p> <i class="iconfont icon-shezhi"></i></p>

                   <div class="ch"></div>

                        <p> <i class="iconfont icon-shezhi"></i></p>

                    </div>

                </div>

            </div>

        </main>

        <footer>

            <dl>

                <dt class="iconfont icon-arrow-small-up"></dt>

                <dd>我的</dd>

            </dl>

            <dl>

                <dt class="iconfont icon-arrow-small-up"></dt>

                <dd>我的</dd>

            </dl>

            <dl>

                <dt class="iconfont icon-arrow-small-up"></dt>

                <dd>我的</dd>

            </dl>

            <dl>

                <dt class="iconfont icon-arrow-small-up"></dt>

                <dd>我的</dd>

            </dl>

        </footer>

    </div>

</body>

<script>

    var nav=document.querySelector('nav')

    var lis=document.querySelectorAll('nav li')

    var ch=document.querySelectorAll('.ch')

    var ch1=document.querySelectorAll('.ch1')

    var sb=document.querySelectorAll('.sb')

    ch.forEach((value, index) => {

        value.innerHTML=box()

     })

    

    sb.forEach((value, index) => {

        var bss=new BScroll(value,{

          pullDownRefresh:true,

          pullUpLoad:true

        })

        bss.on('pullingDown',function(){

            setTimeout(function(){

               bss.finishPullDown()

            value.querySelector('.ch').innerHTML=box()

        },2000) 

           

        })

        bss.on('pullingUp',function(){

            setTimeout(function(){

                bss.finishPullUp()

                value.querySelector('.ch').innerHTML+=box()

                 bss.refresh()

        },2000) 

        })

    })

  

    var s1=new Swiper('.swiper-container',{

        on:{

            slideChange:function(){

                nav.querySelector('.on') && nav.querySelector('.on').classList.remove('on')

                lis[this.activeIndex].classList.add('on')  

           }

    }

    })

   

    nav.οnclick=function(e){

        var t=e.target

        if(t.nodeName=='LI'){

        nav.querySelector('.on') && nav.querySelector('.on').classList.remove('on')

        t.classList.add('on')

        var index=[...lis].indexOf(t)

        s1.slideTo(index)

        }

     }

        

    

     function box(){

     var data=Mock.mock({

         'data|10':[{

             name:"@cword(8,13)",

             img:"@image(160x180,@color)"

         }]

     })

     inner=data.data.map((value, index) => {

         return `

         <dl>

            <dt> <img src='${value.img}'> </dt>

            <dd>${value.name}</dd>

         </dl>

         `

     }).join('')

     return inner

     }


 

</script>

</html>

×飘逸つ的云彡
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5基于iScroll实现下拉刷新和上拉加载更多
12-08
前言       前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果，脑海里第一反映就是微博那种效果，刚开始的理解有些偏差，以为下拉也是追加数据，上拉也是追加数据，后请教同事后发现其实下拉只是刷新最新数据而已，上拉是追加数据。 使用技巧       1、引用iScroll.js， 在初始化时添加两个事件监听：touchMove、DOMContentLoaded。       2、实现iScroll插件的onScrollEnd事件， 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。       3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送
php wap页下拉刷新代码,mui实现移动端上拉加载下拉刷新功能(示例代码)
weixin_42464697的博客
03-11 134
mui.init({pullRefresh: {container: ‘#pullrefresh‘,//要操作的容器，可选择到的都行，#Id,.Class都行down: {style:‘circle‘,color:‘#2BD009‘, //可选，默认“#2BD009” 下拉刷新控件颜色height:‘150px‘,//可选,默认50px.下拉刷新控件的高度,range:‘100px‘, //可选 ...
移动开发----改造PullToRefresh下拉刷新和上拉加载
Wayne的博客
11-02 975
改造PullToRefresh下拉刷新和上拉加载 前言： 本篇文章主要分为两部分，一是PullToRefresh下拉刷新和上拉加载的使用，二是PullToRefresh的改造，用自定义一个动画替换掉Loading的动画，如果动画很厉害的您，就可以自己添加喜欢的动画，做出自己想要的下拉刷新和上拉加载了。 默认效果图：
如何实现上拉加载，下拉刷新（原生）？
Harley567
08-08 1947
上拉加载，下拉刷新的实现原理以及代码实现
如何实现上拉刷新下拉加载
weixin_46166771的博客
07-22 860
在page页面设置enablePullDownRefresh属性 激活下拉
H5上拉下拉加载数据，带js模拟数据
07-17
总结，实现H5上拉下拉加载数据的关键在于理解滚动事件、模拟数据和异步请求。通过熟练掌握这些技术，可以为用户提供流畅、无缝的浏览体验，从而提升网站或应用的整体质量。在实际项目中，还需注意性能优化，避免因...
vue.js整合vux中的上拉加载下拉刷新实例教程
10-18
在本文中，我们将深入探讨如何在Vue.js项目中整合Vux库，实现上拉加载和下拉刷新功能。Vux是一个基于Vue.js和WeUI设计的移动端UI组件库，适用于微信端应用。以下是对实现这一功能的详细步骤的解析。 首先，你需要...
vue+mock.js实现前后端分离
10-16
【Vue+Mock.js 实现前后端分离】 在现代Web开发中，前后端分离是一种常见的架构模式，它将前端UI和后端服务解耦，提高了开发效率和系统的可维护性。Vue.js 是一个轻量级的前端框架，而Mock.js 是一个用于模拟数据的...
JQuery+ajax+mock.js模拟注册
10-16
实现JQuery+ajax+mock.js模拟注册，判断输入框是否输入正确
mock.js模拟数据实现前后端分离
10-16
主要为大家详细介绍了mock.js模拟数据实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
h5移动端下拉刷新插件demo
11-15
微信公众号h5页面使用的下拉刷新翻页和上拉刷新翻页插件mescroll-master
H5页面APP端展示（下拉刷新，上拉加载）
12-16
H5页面APP端展示（下拉刷新，上拉加载）
网页下拉刷新上拉加载插件（pull-to-refresh）完美修改版
12-05
iscroll插件的完全修改版，完美实现了上拉刷新，下拉加载等功能，附带实现分析数据，三个晚上的研究成果啊，最近缺分，求打赏啊
html5下拉刷新控件
07-24
只要引入JS，即可让你的页面可以下拉，并执行你的刷新请求
AlloyPullRefresh一个H5下拉刷新组件
08-12
AlloyPullRefresh一个H5下拉刷新组件
微信小程序精通到入门---05网络请求、mock、上拉下拉刷新
shuixiou1的博客
04-12 353
微信小程序精通到入门---05网络请求、mock、上拉下拉刷新 一、网络请求 小程序经常需要往服务器传递数据或者从服务器拉取信息，这个时候可以使用wx.request这个API，微信小程序默认请求后端域名必须是https的，可以在微信开发工具设置不校验域名设置，在第一章已经讲解，不在复数。 1、wx.request的参数和响应 基本请求 wx.request({ url: 'https://test.com/getinfo', success: function(res) { c
H5下拉刷新和上拉加载实现原理浅析
weixin_33935777的博客
04-17 776
原文链接：justrockit.top 前言 在移动端H5网页中，下拉刷新和上拉加载更多数据的交互方式出现频率很高，开源社区也有很多类似的解决方案，如iscroll，pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。 实现原理 下拉刷新 实现下拉刷新主要分为三步： 监听原生touchstart事件，记录其初...
在原生H5中使用mock模拟数据
weixin_45688725的博客
07-22 812
之前写过在react项目中如何使用mock数据，因为最近在写原生H5，所以在这里总结一下原生中如何使用mock数据。 1.在项目中下载mockjs并引入 <script src="./node_modules/mockjs/dist/mock.js"></script> 2.建立MockJson.js Mock.mock( 'index', //这里对应下面mock请求的URL { "data":[ {"id":"0","title":"1.不知道如何预约体检
h5下拉刷新和上拉加载插件mescroll
RogerWang_H5的博客
02-22 962
// 官网：http://www.mescroll.com/api.html // 基本使用： // 创建MeScroll对象 var mescroll = new MeScroll("area", { up: { auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false isBounc...
mock.stubs
最新发布
12-24
mock.stubs是一个用于创建模拟对象的方法。它可以用来定义模拟对象的行为，以便在测试中模拟真实对象的行为。 以下是一个使用mock.stubs方法的示例： ```go // 创建一个模拟对象 mock := mock_db....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值