滑动容器 ScrollView

滑动容器，提供类似于小程序 ScrollView 的能力。

使用

API

安装使用

import { TiScrollView } from '@titian-design/mobile-react';

用法示例

纵向滚动

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiScrollView } from 'titian-h5-react';
import './style.scss';

export default function App() {
  const upper = () => {
    console.log('到达头部');
  };
  const lower = () => {
    console.log('到达底部');
  };

  const scroll = () => {
    console.log('滚动');
  };
  return (
    <div className="page-section-spacing">
      <TiScrollView scroll-y onScrolltoupper={upper} onScrolltolower={lower} onTiScroll={scroll}>
        <div className="scroll-view-item demo-text-1" />
        <div className="scroll-view-item demo-text-2" />
        <div className="scroll-view-item demo-text-3" />
      </TiScrollView>
    </div>
  );
}

codesanbox

copy

code

.page-section-spacing {
  width: 100%;
  --scroll-view-width: 100%;
  --scroll-view-height: 150px;
}

.scroll-view-item {
  position: relative;
  height: 150px;
  color: #fff;
  font-size: 36px;

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }
}

.scroll-view-item-h {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 150px;
  color: #fff;
  font-size: 36px;
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }
}

.demo-text-1 {
  background-color: #1aad19;
}

.demo-text-1::before {
  content: 'A';
}

.demo-text-2 {
  background-color: #2782d7;
}

.demo-text-2::before {
  content: 'B';
}

.demo-text-3 {
  background-color: #f1f1f1;
  color: #353535;
}

.demo-text-3::before {
  content: 'C';
}

横向滚动

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiScrollView } from 'titian-h5-react';
import './style.scss';

export default function App() {
  const upper = () => {
    console.log('到达头部');
  };
  const lower = () => {
    console.log('到达底部');
  };

  const scroll = () => {
    console.log('滚动');
  };
  return (
    <div className="page-section-spacing">
      <TiScrollView scroll-x extStyle="width: 100%" onScrolltoupper={upper} onScrolltolower={lower} onTiScroll={scroll}>
        <div className="scroll-view-item-h demo-text-1" />
        <div className="scroll-view-item-h demo-text-2" />
        <div className="scroll-view-item-h demo-text-3" />
      </TiScrollView>
    </div>
  );
}

codesanbox

copy

code

.page-section-spacing {
  width: 100%;
  --scroll-view-width: 100%;
  --scroll-view-height: 150px;
}

.scroll-view-item {
  position: relative;
  height: 150px;
  color: #fff;
  font-size: 36px;

  &::before {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }
}

.scroll-view-item-h {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 150px;
  color: #fff;
  font-size: 36px;
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }
}

.demo-text-1 {
  background-color: #1aad19;
}

.demo-text-1::before {
  content: 'A';
}

.demo-text-2 {
  background-color: #2782d7;
}

.demo-text-2::before {
  content: 'B';
}

.demo-text-3 {
  background-color: #f1f1f1;
  color: #353535;
}

.demo-text-3::before {
  content: 'C';
}

TiScrollView API

属性 Properties

属性	类型	默认值	必填	说明	备注
scrollX	boolean	false	否	允许横向滚动	-
scrollY	boolean	false	否	允许纵向滚动	-
upperThreshold	number | string	2px	否	距顶部/左边多远时，触发 scrolltoupper 事件	-
lowerThreshold	number | string	2px	否	距底部/右边多远时，触发 scrolltolower 事件	-
scrollTop	number | string	-	否	设置竖向滚动条位置	-
scrollLeft	number | string	-	否	设置横向滚动条位置	-
scrollIntoView	string	-	否	值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素	-

事件 Events

名称	参数列表	说明	备注
onScrolltoupper	(e: CustomEvent) => void	滚动到顶部/左边时触发	-
onScrolltolower	(e: CustomEvent) => void	滚动到底部/右边时触发	-
onTiScroll	(e: CustomEvent) => void	滚动时触发	-

CSS 变量 CSS Variables

变量	默认值	说明	备注
--scroll-view-width	auto	宽度	-
--scroll-view-height	auto	高度	-
--scroll-view-padding-v	0	上下 padding 间距	-
--scroll-view-padding-h	0	左右 padding 间距	-
--scroll-view-min-width	initial	最小宽度	-
--scroll-view-max-width	initial	最大宽度	-
--scroll-view-min-height	initial	最小高度	-
--scroll-view-max-height	initial	最大高度	-
--scroll-view-virtual-display	inline-block	组件根节点 display 属性	-
--scroll-view-virtual-position	relative	组件根节点 position 属性	-