React横向滚动计算

class Footer extends React.Component {
handleClick(e) {
const offset = 150; // 指定偏移量
this.scroller.scrollLeft = e.currentTarget.offsetLeft - offset;
} render() {
return <section className="m-tab">
<ul className="tab" ref={node => this.scroller = node}>
<li className="tab-item checked" onClick={e => this.handleClick(e)}>
<p className="day">DAY1</p>
<p className="content">抵达曼谷</p>
</li>
<li className="tab-item" onClick={e => this.handleClick(e)}>
<p className="day">DAY2</p>
<p className="content">抵达曼谷</p>
</li>
<li className="tab-item" onClick={e => this.handleClick(e)}>
<p className="day">DAY3</p>
<p className="content">抵达曼谷</p>
</li>
<li className="tab-item" onClick={e => this.handleClick(e)}>
<p className="day">DAY4</p>
<p className="content">抵达曼谷</p>
</li>
<li className="tab-item" onClick={e => this.handleClick(e)}>
<p className="day">DAY5</p>
<p className="content">抵达曼谷</p>
</li>
<li className="tab-item" onClick={e => this.handleClick(e)}>
<p className="day">DAY6</p>
<p className="content">抵达曼谷</p>
</li>
<li className="tab-item" onClick={e => this.handleClick(e)}>
<p className="day">DAY7</p>
<p className="content">抵达曼谷</p>
</li>
</ul>
</section>;
}
}

React Native横向滚动计算

import {View, Text, ScrollView, TouchableOpacity} from 'react-native';
import {_container, _inner, _item, _text} from './index.style'; const offsetX = 50; // tab默认偏移量 export default class FixedTab extends QComponent {
static reduxPlugin = {
mapStateToProps: state => state
} constructor(props) {
super(props);
this.scrollX = 0; // scroller的动态x偏移量
this.scrollWidth = 0; // scroller容器的宽度
this.contentWidth = 0; // scroller内部元素的宽度
this.itemLayout = {}; // scroller初始化每项的x偏移量
} onScroll(e) {
this.scrollX = e.nativeEvent.contentOffset.x;
} onLayout(e) {
this.scrollWidth = e.nativeEvent.layout.width;
} onContentLayout(e) {
this.contentWidth = e.nativeEvent.layout.width;
} onItemLayout(e, index) {
this.itemLayout[index] = e.nativeEvent.layout.x;
} changeType(index) {
// 滚动逻辑
const itemOffsetX = this.itemLayout[index] - this.scrollX;
if(itemOffsetX > offsetX) { // 右侧超出固定偏移量
if(this.itemLayout[index] + this.scrollWidth - offsetX < this.contentWidth) {
this.scroller.scrollTo({x: this.itemLayout[index] - offsetX});
} else {
this.scroller.scrollTo({x: this.contentWidth - this.scrollWidth});
}
} else {
if(this.itemLayout[index] > offsetX) { // 默认当前元素偏移量大于固定偏移量
this.scroller.scrollTo({x: this.itemLayout[index] - offsetX});
} else {
this.scroller.scrollTo({x: 0});
}
}
} render() {
return <ScrollView
ref={node => this.scroller = node}
style={_container}
horizontal={true}
showsHorizontalScrollIndicator={false}
onLayout={e => this.onLayout(e)}
onScroll={e => this.onScroll(e)}
scrollEventThrottle={16}
>
<View style={_inner} onLayout={e => this.onContentLayout(e)}>
{list.map((item, i) =>
<View key={i} onLayout={e => this.onItemLayout(e, i)}>
<TouchableOpacity style={_item} onPress={() => this.changeType(i)}>
<Text style={_text}>{item.name}</Text>
</TouchableOpacity>
</View>
)}
</View>
</ScrollView>;
}
}

横向tab计算滚动位置的更多相关文章

  1. vue-scroller记录滚动位置

    问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的bef ...

  2. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

  3. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  4. 横向不间断滚动DIV

    横向不间断滚动DIV,5个一组,js控制,自动生成任意组显示 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  5. “Win10 UAP 开发系列”之 在MVVM模式中控制ListView滚动位置

    这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一 ...

  6. html--offsetLeft,Left,clientLeft的关键--动态获取计算元素位置关系

    动态计算元素位置关系的时候,必备... http://www.cnblogs.com/panjun-Donet/articles/1294033.html

  7. android开发之记录ListView滚动位置

    这个问题本身不难,但是由于项目中的需求太过于复杂,结果导致这个问题变得不是那么容易实现.在网上一搜,结果如下: 我不知道是who copy who?反正介绍的所谓的三种方法,第一种都是无法运行的,很明 ...

  8. javascript-图片横向无缝隙滚动(可在服务器运行)

    前两次弄'图片横向滚动'javascript,在本地上运行得很美,可是一上到我们学校后台的服务器,就有很多问题,这个算是行的了. css代码: <style type="text/cs ...

  9. Android listView scroll 恢复滚动位置

    相信大家尝试过许多方法恢复滚动位置,本人也找了许多方法,唯有这个方法好用,下面把代码贴出来 声明两个变量 private int mPosition; private int lvChildTop; ...

随机推荐

  1. PHPStrom直接在编辑器打开php文件

    以下是自己配置PHP+Apache的开发环境,集成环境的话要换第二种方法(看个人配置):PHPStrom 如果希望直接在编辑器打开php文件,要做以下这几步配置. 第一种:非集成环境 1 2 3 第二 ...

  2. PHP判断一个文件是否能够被打开

    <?php // 需求:因为系统涉及大量的文档知识库,用户可以在线进行查看.为了验证文档是否正常打开.先需要从数据库取出路径和文件名,判断是否可以从对应的路径下打开文件.header(" ...

  3. Node.js概述1

    为什么我们要学习Node.js? 认为: Node.js就学习一周,时间比较短,不重要 将来工作我后端又不用Node.js做,我们又java/python/php/c,为什么要在意它 Node.js接 ...

  4. WPF快速入门系列(6)—— WPF资源和样式

    一.引言 WPF资源系统可以用来保存一些公有对象和样式,从而实现重用这些对象和样式的作用.而WPF样式是重用元素的格式的重要手段,可以理解样式就如CSS一样,尽管我们可以在每个控件中定义格式,但是如果 ...

  5. 深入探索WebSockets

    WebSockets简介 在2008年中期,开发人员Michael Carter和Ian Hickson特别敏锐地感受到Comet在实施任何真正强大的东西时所带来的痛苦和局限. 通过在IRC和W3C邮 ...

  6. 2019-2-16-WPF-封装-dotnet-remoting-调用其他进程

    title author date CreateTime categories WPF 封装 dotnet remoting 调用其他进程 lindexi 2019-02-16 09:40:26 +0 ...

  7. POJ1655 Balancing Art

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13865   Accepted: 5880 De ...

  8. OSGi教程:Framework Namespaces Specification

    此教程基于OSGi Core Release 7 OSGi命名空间规范 详细的教程上面的英文教程里面有详细说明. 我就记录一下自己看完之后的简单理解: OSGi的Namespace规范就是规定了你Ma ...

  9. PHP核心编程--文件上传(包含多文件上传)

    一.单文件上传 图片上传界面: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. input的相关兼容性问题

    近来在制作登陆页的input文本框和密码框的时候,具体的实例可参考实现带样式的表单验证,我们发现在IE下默认的情况下,input 标签的密码框和文本框宽度不一致,这就尴尬了. 解决这个办法,我们是直接 ...