前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果，考虑到后面有可能有新的呈现方式，RN提供的组件没有这种滚动控件，不如自己封装，其实去年已经写了一篇但是写的比较乱，周末花了点时间重写梳理下做的东西
需求模仿腾讯课堂视频播放详情页面，效果如图： 1外层滚动控件到顶部，内层控制滚动 2内层滚动到顶部，外层控制滚动 835108-20170331111709149-156183149.gif 835108-20170331111723820-1491053367.gif 基本思路：是最外层有个父ScrollView,子tab页面中有ListView（React-native原生实现也是ScrollView），现在外部的ScrollView设定一个固定高度（屏幕高度+视频高度一半），接下来解决的难点是要
（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间） 我们讲完ScrollView组件，其实顺其自然的就应该讲解ListView,对于前段
上一篇文章介绍了高仿京东的沉浸式状态栏，可是跟京东首页的头部轮播图相比，依然有三处缺憾： 1、京东的头部Banner上方，除了有悬浮着的状态栏，状态栏下面还有一行悬浮工具栏，内嵌扫一扫图标、搜索框，以及消息图标； 2、把整个页面往上拉，状态栏的背景色从透明变为深灰，同时工具栏的背景也从透明变为白色； 3、页面下拉到顶后，继续下拉会拉出带有“下拉刷新”字样的布局，此时松手则会触发页面的刷新动作； 上面第一点的状态栏和工具栏悬浮效果，都有对应的解决办法；第二点的状态栏和工具栏背景变更，也存在可行的解决方案。倒是第三点的下拉刷新，以及第二点的上拉监听，却不容易实现。 虽然Android提供了专门的下拉刷新布局SwipeRefreshLayout，但它并没有页面随手势下滚的效果。一些第三方的开源库如PullToRefresh、SmartRefreshLayout固然能让整体页面下滑，可是顶部的下拉布局很难个性化定制，至于状态栏、工具栏的背景色修改更是三不管。因此若想呈现完全仿照京东的下拉刷新特效，只能由开发者编写一个自定义的布局控件了。 自定义的下拉刷新布局，首先要能够区分是页面的正常下滚，还是拉伸头部要求刷新。二者之间的区别很简单，直觉上看就是判断当前页面是否拉到顶了。倘若还没拉到顶，继续下拉动作属于正常的页面滚动；倘若已经拉到顶了，继续下拉动作才会拉出头部提示刷新。所以此处得捕捉页面滚动到顶部的事件，相对应的则是页面滚动到底部的事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能，故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。正好ScrollView提供了滚动行为的变化方法onScrollChanged，通过重写该方法即可判断是否到达顶部或底部，重写后的代码片段如下所示：
项目中，在使用<ion-content>滚动到底部的时候，一直使用其官方的scrollToBottom()，但是在实际运行的时候，总是无法显示出效果，这里就很奇怪了，官方也未做任何对于它的解释，为啥在
因为Android很多函数都是基于消息队列来同步，所以需要一部操作，addView完之后，不等于马上就会显示，而是在队列中等待处理，虽然很快，但是如果立即调用fullScroll， view可能还没有显示出来，所以会失败
1. clipToPadding 属性解释： clipToPadding默认为true，当clipToPadding为true时，表示布局不能绘制到padding区域。当clipToPadding为false时，表示布局能够被绘制到padding区域。 提出问题： 当我们为ListView、ScrollView、GridView设置了paddingTop或paddingBottom的时候，我们发现当滑动到顶部和底部的时候，默认情况下padding/margin在滑动中一直存在，view总是不能滑动到最底部和
在开发中，我们经常需要更新列表，并将列表拉倒最底部，比如发表微博，聊天界面等等,
概述 ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误。 Scroll
前言，一天在点外卖的时候，注意到饿了么列表页的滑动效果不错，但是觉得其中的手势滑动还是挺复杂的，正好又碰到了在熟悉Touch事件的理解当中，所以就抽空对着饿了么的列表页面尝试写写这个效果
scrollView.fullScroll(ScrollView.FOCUS_DOWN);滚动到底部
小伙伴们，在上文中我们介绍了Android视图组件RecyclerView，本文我们继续盘点，介绍一下视图控件的ScrollView。
Android中文翻译组：http://androidbox.sinaapp.com/
改变contentInset值会有一个不可预料的副作用，尤其是当你显示滚动条的时候。当用户拖拽内容到顶部或者底部，滚动条会越过任何被定义在contentInset的区域之内的范伟，例如navigation controller和toolbar。 想要修正这个问题，你必须设置scrollIndicatorInsets属性。设置vertical inset值限制了垂直滚动条，避免了越区域显示滚动条的问题。 滚动到特定的Offset：滚动到特定的top-left位置可以通过两种方式完成: setConte
对于电商App，商品详情无疑是很重要的一个模块，观察主流购物App的详情界面，发现大部分都是做成了上下两部分，上面展示商品规格信息，下面是H5商品详情，或者是嵌套了一个包含H5详情及评论列表的ViewPager界面，本文就是实现了一个兼容不同需求的上下滚动黏滞View-DragScrollDetailsLayout。 DragScrollDetailsLayout GitHub链接 实现效果图 首先看一下实现效果图 简单的ScrollView+Webview 当然，如果将Webview替换成其他的Lis
taro-chatroom多端实战项目是基于taro+react+redux+reactNative等技术开发的仿微信界面聊天实例，实现了消息发送、动图表情、图片查看、红包/朋友圈、小组等功能。
低头一族的我们，每天花大把大把的时间拉啊拉啊。当屏幕的内容超过一屏时，我们很熟练的往上拉一点就可以看到剩下的内容了，这时候右边还会滚动条告诉我们这是可以往上拉的。
通过两天的”实战“，今天我们稍微放松一下脚步，让大家喘口气歇一会儿，我们今天为大家带来的控件，解决了太多在项目中遇到的适配问题，如果你已经碰到了这种问题，就紧跟我们的脚步吧~
只执行一次： constructor、componentWillMount、componentDidMount 执行多次：render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行：componentWillUnmount（页面离开，组件销毁时） 不执行的：根组件（ReactDOM.render在DOM上的组件）的componentWillReceiveProps（因为压根没有父组件给传递props）
在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。
iOS键盘防键盘遮挡库 KKInputAvoidKeyBoard 每个 UITextField 都可以自己控制
React-native踩坑小记 最近开始研究ReactNative咯，大概一两周了吧已经，略略说一下遇到的一些坑爹问题 问题一般都出在android上。。。最近看GitH
事件对象可以拿到 pageY、clientY、offsetY，分别代表到点击的位置到文档顶部，到可视区域顶部，到触发事件的元素顶部的距离。
为可滚动容器的内容或滚动指示器（Scroll Indicator）添加外边距（Margin）。
在使用一些框架例如React Native去实际开发移动端应用的时候，性能是一个重要的问题。React Native默认情况下的性能是没有问题的，但是在实际开发React Native的时候，我们也可能会遇到一些性能相关的问题。
（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间） 编者按：其实我并不太喜欢在周末发公众号，毕竟大家都在休息和放松，不想学习，但是今天在群里我看到有人说：这周群主关于React Native的文章发的很少，不够学的，我发的少， 是因为我看阅读量少，所以减少了发布次数，但是看到群里的人这么一问，感觉我必须今天再多发一篇。回馈给一直跟着我学习的程序员和开发者。 大家好，我是ScrollView，相信做过移动或者前端开发的人肯定都很熟悉我，对，我就是
版权声明：本文为博主原创文章，转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/52107851
用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果，使用起来用户体验很好；Android并没有给我们封装这样一个效果，我们来看下在Android里如何实现这个效果。先看效果，感觉有些时候还是蛮实用的。
第四天任务： 今天主要任务完成精华模块的搭建。 精华页面的搭建 精华页面中全部界面的显示 日期的处理 热门评论的显示和处理 精华页面的搭建 精华页面分为全部、视频、声音、图片、段子五个界面，五个界面可
scrollIntoView对页面元素调用，会滚动元素的父容器，将该元素滚动到浏览器的可视区域
1、引言 最近在实现列表的滚动交互时，算是被复杂的业务场景整得怀疑人生了。今天主要聊一下关于 scroll 的应用： CSS 平滑滚动 JS 滚动方法 区分人为滚动和脚本滚动 2、CSS 平滑滚动 2.1 一行样式改善体验 在一些滚动交互比较频繁的场景，我们可以通过在可滚动容器上增加一行样式来改善用户体验。 scroll-behavior: smooth; 比如说，在文档网站里，我们常使用 # 来去定位到对应的浏览位置。 像上面这个例子，我们首先通过 # 去锚定对应内容，实现了一个 tab 切换的效果：
大家好，在前段时间我写过用ScrollView实现了自定义滚轮，但是在循环的效果不是特别好。（这次文章底部附上了Demo。O(∩_∩)O~）
由于移动设备物理显示空间一般有限，不可能一次性的把所有要显示的内容都显示在屏幕上。所以各大平台一般会提供一些可滚动的视图来向用户展示数据。Android平台框架中为我们提供了诸如ListView、GirdView、ScrollView、RecyclerView等滚动视图控件，这几个视图控件也是我们平常使用最多的。本节内容我们来分析一下横向滚动视图HorizontalScrollView。
笔者利用空余时间研究了一下javascript的Intersection Observer API，发现其有很大的应用场景，比如图片或者内容的懒加载，视差动画等。笔者也在之前的文章中详细介绍了3种Observer（观察者）的用法，包括位置监听，dom变化监听以及窗口变化监听，它们有非常多的应用场景，所以很有必要研究明白， 感兴趣的可以读完本片文章之后学习一下（几个非常有意思的javascript知识点总结）.
去年利用空余时间研究了一下javascript的Intersection Observer API，发现其有很大的应用场景，比如图片或者内容的懒加载，视差动画等。我也在之前的文章中详细介绍了3种Observer（观察者）的用法，包括位置监听，dom变化监听以及窗口变化监听，它们有非常多的应用场景，所以很有必要研究明白， 感兴趣的可以读完本片文章之后学习一下（几个非常有意思的javascript知识点总结）.
在滚动过程当中，其实是在修改原点坐标。当手指触摸后,scroll view会暂时拦截触摸事件,使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么scroll view 发送 tracking events 到被点击的subview。假如在计时器到点前发生了移动事件，那么 scroll view 取消tracking 自己发生滚动。
思路：UIView加载完成3后，用NSTimer结合setContentOffset将UITextView向下滚动1像素。在滚动到底部的时候停止NSTimer。每当手动滚动UITextView前销毁NSTimer，滚动后重新创建NSTimer。 NSTimer *timer; - (void)viewDidLoad { [self performSelector:@selector(resetText) withObject:nil afterDelay:3.0f]; } - (void)resetTe
在React Native开发中，官方为我们提供的Tab控制器有两种：TabBarIOS和ViewPagerAndroid。TabBarIOS，仅适用于IOS平台 ViewPagerAndroid，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab）。在项目开发中，我们优先选择一些开源兼容性比较好的第三方库，例如，react-navigation，以及本文即将说到的react-native-scrollable-tab-view(官方地址)。react-native-scrolla
滚动视图还满常见的，这里学习了一下基本所有的用法、属性设置和委托，单讲一个ScrollView也很简单，直接上代码远比一个个讲要清晰明了地多。
1 简介 UIScrollView 是负责滚动的视图。苹果最强大的地方就在于其良好的UI展示，和UE体验。如果不会很好的使用UIScrollView，就等于丧失了苹果一般的法力。 移动设备的屏幕大小是极其有限的，因此直接展示在用户眼前的内容也相当有限。当展示的内容较多，超出一个屏幕时，用户可通过滚动手势来查看屏幕以外的内容。 普通的 UIView 不具备滚动功能，不能显示过多的内容。 UIScrollView是一个能够滚动的视图控件，可以用来展示大量的内容，并且可以通过滚动查看所有的内容 1.1 工作原理
html设置 overflow-x: scroll;属性后怎么让指定位如果页面不够长(至少窗口长度两倍)，那肯定滚动不到一半的位置。否则任何浏览器都不会产生误差。下面的例子输出 100 个 ，页面加载的时候会滚动到第 51 个 。window.onload = function() { // 测试：100 个 足够使 scroll 长度大于 window 长
从事移动开发这么多年, 各种跨平台技术层出不穷.从最初的基于web的phonegap/cordova到后来的原生组件渲染react-native/weex,再到现在的flutter通过自己开发了一套原生控件渲染,可以说用户体验已经和原生开发相差无几了.
animating bool型 显示指示器(true，默认的)还是隐藏它(false)；
基于uniapp+vue仿微信聊天室uniapp-chatroom项目，vue语法及类似小程序api开发原生APP应用，实现了发送图文消息、表情(gif动图)，图片预览、地图位置、红包、仿微信朋友圈等功能。
MyLayout和TangramKit是一套基于frame之上的UI界面布局库的OC版本和Swift版本。目前最新版本升级为MyLayout1.7.0和TangramKit1.4.0。 ?OC1.7
MJRefresh项目地址 https://github.com/CoderMJLee/MJRefresh 下载下来后我们打开项目可以看到下面的目录 MJ项目结构 MJRefresh目录下就是下
由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了。目前发布了多个体验版，也将在3月底迎来正式版。基于 Taro 的良好架构演变，适配 React Native 的方案的也做了较大调整，本文将主要介绍 Taro 3 适配 React Native 运行时相关的详细设计与实现。
| 导语 动态化是APP未来的趋势，腾讯成立了动态化框架中台，打造腾讯自研的动态化框架解决方案。ScrollView是动态化框架UI组件的核心之一，而物理学算法可能是其中最重要的部分之一了，好的物理学算法能给用户带来最优秀的体验。最初iOS就是以丝滑而自然的滚动体验，征服了许多用户的心。 而对于从0开始打造UI框架的动态化框架来说，这也是最重要的部分之一。用户评判一个应用是否流畅的第一反应，可能就是在页面上划一划试试，因此物理学算法的好坏，将直接影响到用动态化框架打造的应用的体验。 本文将主要分析物理
popeye，携程软件技术专家，关注移动端跨端技术，致力于快速，高性能地支撑业务开发。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
