首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

移动端下拉刷新和上加载实现

最近在做移动端开发,移动端的性能不如 PC 端,屏幕页没有 PC 大,需要我们优化的东西很多;在工作中我所做的移动端小页面,无一例外的都是将网页嵌入到安卓或者 IOS 里面去。...上加载 问题:如果数据太多前端一次性渲染或者请求所有数据,就不能做到用户体验和用户效果最佳 解决方案: 移动端分页,滚动到页面底部重新请求接口,然后把上次请求的数据和这一次请求的数据拼接到一个数组里面...this.refreshText.style.height = '0px'; this.text = ''; // 接口请求什么的事情 }, } } 复制代码 详细介绍请参考H5下刷新和上加载实现原理浅析...H5下刷新和上加载实现 博客会保持随时更新 sunseekers.cn/

1.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

JS判断当前设备属于哪种客户端并让移动端可调试

本文主要使用javascript代码判断当前设备属于何种客户端,并通过安装插件的方式让我们在移动端设备上也能查看前端项目打印的日志及网络请求,希望对读者朋友们有帮助。...1 判断当前设备属于何种客户端 1.1 通过navigator.userAgent判断 这是原生js的语句,可以直接拿来使用 // 返回由客户机发送服务器的user-agent 头部的值 const...下面我们借用一个js库来更加准确的判断当前设备属于哪种客户端。...方法 描述 Mobile device.mobile() 判断是否属于手机移动设备方法 Tablet device.tablet() Desktop device.desktop() 判断是否属于PC...--END-- 4 参考阅读 【1】js分别判断手机、电脑、iPad(https://juejin.cn/post/7033793636760453133)

88040

微信小程序前端分页实现思路以及示例

今天在学习微信小程序的时候,遇到了前端需要做下拉刷新的一个分页逻辑的操作,写本文章来记录以下实现微信前端下拉分页的实现。...同时在监听事件中需要做一个节流的判断,需要定义一个变量isLoading要是isLoading变量的值为true证明还在加载,这个时候就直接return。避免还未加载完成重复请求接口。  ...注意下面示例代码中的page并不是指页码,而是指当前加载到第几条数据(由于后端这样写了所以并不传递页码,而是传递第几条数据开始)下面是示例代码:js// pages/home/home.jsvar app...监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作...*/ onPullDownRefresh() { }, /** * 页面上触底事件的处理函数 */ onReachBottom() { if(this.data.isLoading

1.2K40

有赞移动消息卡片动态化方案实践

作者:杨彬 部门:电商移动 概述 消息业务作为有赞移动的共享业务,在微商城、零售、美业等 B 端 App 中承担着多客服的角色,多客服是有赞为商家提供的连接商家和买家的即时消息客服工具;在精选、有赞客...当前渲染的消息卡片视图 消息模型 layout ,根据不同的消息类型生成,会保存当前的消息体以及消息卡片的宽高,为了提升性能,缓存在 TableAdapter 数据源操作类中 消息卡片cell,根据后端下发不同的卡片类型...JS 动态库根据消息类型来判断当前的 cell 是否是 weex卡片 cell 接入 JS 动态库 我们在 JS 动态库中,暴露出获取 weex 卡片对应的 url 方法,入参是消息类型 获取 weex...整体流程 消息通道连接的时候,weex 模块去取对应的注册的 weex 页面;初始化 JS 动态库,其实也就是JS 相关的逻辑配置 后端下发消息数据,经过数据解析器将消息经过转化生成 layoutModel...缓存起来 在消息卡片视图工厂类 contentFactory 中,将消息类型传到 JS 端来判断当前消息类型是否需要注册成 weex 卡片 在获取卡片宽高、消息模型的卡片内容配置类 contentConfig

1.1K20

有赞零售小票打印跨平台解决方案

架构设计的核心在于通过 JS 实现支持跨平台的小票解析脚本,并具有动态更新的优势;通过服务端下发可编辑的样式模板实现小票内容的灵活定制;客户端启动 JS 执行器执行 JS 小票脚本引擎(以下简称:JS...1、JS 引擎设计 JS 引擎主要能力就是处理小票模版和业务数据,将业务数据整合到模版中(处理不了的交给移动端处理,比如图片),然后将整合模版数据转换成打印指令返给移动端。 整体处理流程图 ?...2、模板管理服务 小票模板的动态编辑和下发,模版动态配置信息存储和各业务全量模版存储,提供移动端动态配置信息接口,取业务小票模版接口,各业务方业务数据接口。 整体处理流程图 ?...移动端只需要关心需要打印什么业务小票,然后去后端取业务小票模版和业务数据,将取到的数据传给 JS 引擎进行预处理,返回模版中处理不了的图片 url 信息,然后移动端进行下载图片,进行二值转换,输出像素的...逻辑是先判断本地下发的文件是否存在,如果存在就加载下发 JS ,否则加载 app 中 bundle 里面的 JS 文件。

1.7K20

有赞零售移动端收银商品实践

在选型上零售移动采用后者作为商品离线数据方案,通过同步时间来进行增量更新取最新的门店商品数据。...基本的同步过程: 移动端读取本地最新同步时间,根据时间请求服务端 服务端下发增量数据 客户端对比本地时间和增量数据的时间,判断是否已取最新数据 如果本地已是最新数据,停止同步;否则继续增量取数据,重复步骤...移动端解析业务线类型数据,判断数据变更类型如:商品更新、商品删除、商品创建等,触发数据同步任务。 一个简化的商品长连接同步时序图: ?...引擎的汉字转拼音方案 在跨平台技术选型上,零售移动选择 JS 引擎解决两端数据一致性问题。...JS 引擎能够解析执行 JS 脚本,帮助移动端进行跨平台开发。

2.3K20

基于HLS-TS&RTMP-FLV的微信小程序点直播方案

问题背景: 视频监控不仅仅要上云,还要支持多端播放,这一块在移动端APP和PC端难度不大,只要能实现一个简单的播放器引擎内核,然后交叉编译为不同端的SDK就可以。...随着移动互联网的发展,特别是微信生态的完善。很多客户都在做轻量的微信小程序,所以支持在网页、微信小程序的点直播就很有必要了。...,需要做一次音频转码动作,需要将音频g711.a的音频转码为AAC的,这里转码库我们采用开源的fffmpeg转码; ---- 问题3:小程序利用RTMP直播时,没有办法听声音,当前画面只有视频无声音;...API做身份鉴权,鉴权通过则允许流,鉴权失败则返回失败,不允许客户端下流,当然也可以对一些IP开白名单; ---- 问题7:直播播放时,经常卡顿,转圈不能流畅播放; 问题原因:由于下行网络等原因或者设备推流原因...服务端加调试日志等进行进一步大判断和分析,用专业工具分析写下来的码流,排查问题是时间戳问题,还是编解码问题还是服务自己内部处理问题; ---- Demo代码: 基于微信小程序Live-player组件

2.4K20

融云技术分享:全面揭秘亿级IM消息的可靠投递机制

学习交流: - 移动端IM开发入门文章:《新手入门一篇就够:从零开发移动端IM》 - 开源IM框架源码:https://github.com/JackJiang2011/MobileIMSDK 2、推荐阅读...《从客户端的角度来谈谈移动端IM的消息可靠性和送达机制》 《一套亿级用户的IM架构技术干货(下篇):可靠性、有序性、弱网优化等》 《从新手到专家:如何设计一套亿级消息量的分布式IM系统》 《浅谈移动端IM...客户端服务端下行段消息交互示意图: 4、客户端与服务端消息交互具体实现 正如上节所言,我们将消息的交互流程进行了拆分:即拆分出上下行。...1)直发消息: 即服务端主动发送(给目标客户端)的消息: 1)客户端 SDK 依据本地存储的最新消息时间戳判断,用来做排序等逻辑; 2)对同一个用户直发消息1条,其他转通知。...5.2 接收方多端同步 具体逻辑是: 1)IM 服务收到消息后,先判断接收方的投递范围,这个范围指的是接收方用户的哪些的终端要接收消息; 2)IM 服务将范围以及当前消息,发送到 CMP,CMP 依据范围

83620

五年 Web 开发者 star 的 github 整理说明

omi 腾讯AlloyTeam Web组件化框架 AlloyTeam/sodajs 腾讯AlloyTeam 模版引擎 nolimits4web/Template7 移动优先的模版引擎 airbnb.../mobileValidate 移动端表单验证控件(适用于jquery和zepto) impress/impress.js css3动画库 benmajor/jQuery-Touch-Events...jquery的移动端事件库 mtjs/mt 手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架 scrat-team/scrat WEBAPP模块化开发框架(利用本地缓存...前端本地客户端压缩图片、自动按需加载文件 amfe/lib-flexible 可伸缩布局方案 ximan/dropload 移动端下拉刷新、上加载更多插件 madrobby/zepto 移动端的...前端模版引擎 dcloudio/mui 移动端开发框架 h5bp/mobile-boilerplate 移动端快速开发模版 angular/angular.js 现代化组件化开发框架 expressjs

8.8K50

融云技术分享:全面揭秘亿级IM消息的可靠投递机制

《从客户端的角度来谈谈移动端IM的消息可靠性和送达机制》 《一套亿级用户的IM架构技术干货(下篇):可靠性、有序性、弱网优化等》 《从新手到专家:如何设计一套亿级消息量的分布式IM系统》 《浅谈移动端...通过通知取机制,可以有效的减少客户端服务端网络交互次数,并且对多条消息进行打包,提升有效数据载荷。既能保证时效,又能保证性能。 客户端服务端下行段消息交互示意图: ?...1)直发消息: 即服务端主动发送(给目标客户端)的消息: 1)客户端 SDK 依据本地存储的最新消息时间戳判断,用来做排序等逻辑; 2)对同一个用户直发消息1条,其他转通知。...具体逻辑是: 1)用户多个终端链接成功后,发送一条消息,这个消息到达 CMP(IM 接入服务) 后,CMP 做基础检查,然后获此用户的其他终端连接; 2)服务把客户端上行的消息,封装为服务端下行消息,直接投递给用户的其他客户端...5.2 接收方多端同步 具体逻辑是: 1)IM 服务收到消息后,先判断接收方的投递范围,这个范围指的是接收方用户的哪些的终端要接收消息; 2)IM 服务将范围以及当前消息,发送到 CMP,CMP 依据范围

74920
领券