iscrolljs 看API 回顾以前开发中失误

简介: 今天有空 细致的看看iscrolljs api 发现自己以前的几个失误是没看api造成的 失误1 页面a操作 影响了页面b的滚动条 api 解释: options.bindToWrapper The move event is normally bound to the document and not the scroll container.

今天有空 细致的看看iscrolljs api 发现自己以前的几个失误是没看api造成的

失误1 页面a操作 影响了页面b的滚动条

api 解释:

options.bindToWrapper

The move event is normally bound to the document and not the scroll container. When you move the cursor/finger out of the wrapper the scrolling keeps going. This is usually what you want, but you can also bind the move event to wrapper itself. Doing so as soon as the pointer leaves the container the scroll stops.

Default: false

iscrolljs 默认 是绑定到 页面文档,而不是当前的这个操作的div,所以其他页面操作时候就有可能影响 这个页面的滚动条,例如我原来滚动条在页面底部,其他页面操作几次后这个滚动条跑到中间去了

通过设置bindToWrapper 可以让滚动条绑定到当前的div,2每个滚动区域应该有自己独立的iscrolljs实例

失误2 下拉上拉刷新后,滚动条不及时更新

api解释:

Mastering the refresh method

iScroll needs to know the exact dimensions of both the wrapper and the scroller. They are computed at start up but if your elements change in size, we need to tell iScroll that you are messing with the DOM.

This is achieved by calling the refresh method with the right timing. Please follow me closely, understanding this will save you hours of frustration.

Every time you touch the DOM the browser renderer repaints the page. Once this repaint has happened we can safely read the new DOM properties. The repaint phase is not instantaneous and it happens only at the end of the scope that triggered it. That's why we need to give the renderer a little rest before refreshing the iScroll.

To ensure that javascript gets the updated properties you should defer the refreh with something like this:

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

    setTimeout(function () {
        myScroll.refresh();
    }, 0);
};
原来iscrolljs要及时的知道页面dom的变化,根据最终的尺寸,确定滚动条,默认是定时监测的,所以,在有滚动条的页面增加数据和减少数据后,要及时刷新 test
相关文章
|
8天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
46 3
|
11天前
|
设计模式 API 开发者
探索现代后端开发:微服务架构与API设计
【10月更文挑战第6天】探索现代后端开发:微服务架构与API设计
|
6天前
|
缓存 监控 前端开发
利用GraphQL提升API开发效率
【10月更文挑战第10天】本文介绍了GraphQL的核心概念、优势及其实现步骤,探讨了其在现代开发中的应用,包括动态数据需求、单页应用和微服务架构。通过缓存策略、批处理、安全性和监控等实战技巧,提升API开发效率和用户体验。
|
9天前
|
监控 Cloud Native API
利用声明式API管理提高开发效率
【10月更文挑战第8天】声明式API管理通过声明式配置简化了API的定义和管理,提高了开发效率和可维护性。本文介绍了声明式API管理的核心优势、实施步骤及其在微服务、云原生应用和跨团队协作中的应用,并提供了实战技巧。
|
16天前
|
安全 API 数据库
掌握GraphQL:现代API开发的新选择
【10月更文挑战第1天】在传统RESTful API显现出局限性后,GraphQL作为新型API查询语言和运行时,提供更灵活的数据获取方式。客户端可精确指定所需数据结构,减少传输量并提升效率。本文探讨GraphQL核心概念、优势及实施方法。尽管存在复杂性和性能优化等挑战,GraphQL仍是构建现代API的强大工具。
|
19天前
|
存储 API 数据库
深入浅出后端开发:从零到一搭建RESTful API
在数字化的浪潮中,后端开发如同一座桥梁,连接着用户界面与数据存储。本文将引导你理解后端开发的核心概念,并通过实践案例,展示如何从零开始构建一个RESTful API。我们将探索设计原则、选择合适的编程语言和框架、数据库交互以及API测试等方面。无论你是初学者还是希望巩固知识的开发者,这篇文章都将为你提供一条清晰的学习路径。
|
21天前
|
存储 JSON JavaScript
探索后端开发:从零构建简易RESTful API
【9月更文挑战第35天】在数字时代的浪潮中,了解如何搭建一个后端服务变得至关重要。本文将通过构建一个简易的RESTful API来揭开后端开发的神秘面纱。我们将使用Node.js和Express框架,逐步引导你理解并实践API的设计、实现与测试过程。无论你是编程新手还是希望扩展技能边界的开发者,这篇文章都将为你提供一次深入浅出的学习旅程。
|
26天前
|
安全 测试技术 API
后端开发中的API设计原则与最佳实践
本文将深入探讨在后端开发中API(应用程序编程接口)设计的基本原则和最佳实践。通过阐述如何构建高效、可扩展且安全的API,帮助开发者提升后端系统的性能和用户体验。不同于传统的摘要,本文无需包含背景介绍,直接进入主题,为读者提供实用的指导。
38 7
|
23天前
|
缓存 安全 测试技术
探索后端开发:构建高效API的艺术
【9月更文挑战第34天】在数字世界的幕后,后端开发如同一位默默无闻的艺术家,精心雕琢着每一个数据交互的细节。本文将带你走进后端开发的工作室,揭秘那些让API变得高效、可靠的技术手段。我们将一起学习如何设计RESTful API,使用现代编程语言实现功能,以及确保我们的服务在现实世界中稳定运行的最佳实践。准备好,让我们一起开启这场技术的探索之旅吧!
43 2
|
24天前
|
SQL 缓存 安全
深入理解后端开发中的API设计原则
【9月更文挑战第32天】在数字化浪潮中,API(应用程序编程接口)作为连接不同软件组件的桥梁,其设计质量直接影响着后端系统的效能与扩展性。本文将通过浅显易懂的方式,探讨如何构建高效、安全且易于维护的API,同时提供实用的代码示例,帮助读者在后端开发实践中提升API设计的水平。
34 3