fix(FloatLayout): 新增 ScrollView 的一些属性 close #258 #259

jd-opensource · Dec 18, 2018 · bb79794 · bb79794
1 parent 50f1788
commit bb79794
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 25 deletions.
diff --git a/@types/float-layout.d.ts b/@types/float-layout.d.ts
@@ -1,14 +1,35 @@
+/* eslint-disable no-restricted-globals */
 import { MouseEvent, ComponentClass } from 'react'
 import { BaseEventFunction } from '@tarojs/components/types/common'
 
 import AtComponent from './base'
 
-export interface AtFloatLayoutProps extends AtComponent{
+export interface AtFloatLayoutProps extends AtComponent {
   isOpened: boolean
 
   title?: string
 
+  scrollY?: boolean
+
+  scrollX?: boolean
+
+  scrollTop?: number
+
+  scrollLeft?: number
+
+  upperThreshold?: number
+
+  lowerThreshold?: number
+
+  scrollWithAnimation?: boolean
+
   onClose?: BaseEventFunction
+
+  onScroll?: BaseEventFunction
+
+  onScrollToUpper?: BaseEventFunction
+
+  onScrollToLower?: BaseEventFunction
 }
 
 declare const AtFloatLayout: ComponentClass<AtFloatLayoutProps>

diff --git a/docs/markdown/float-layout.md b/docs/markdown/float-layout.md
@@ -21,27 +21,33 @@ import { AtFloatLayout } from "taro-ui"
 :::demo
 
 ```html
-<AtFloatLayout
-  isOpened
-  title='这是个标题'
-  onClose={ this.handleClose } >
-  这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
-  随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
-  随你怎么写
+<AtFloatLayout isOpened title="这是个标题" onClose="{" this.handleClose }>
+  这是内容区 随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写这是内容区
+  随你怎么写这是内容区 随你怎么写这是内容区 随你怎么写
 </AtFloatLayout>
 ```
 
 :::
 
 ## AtFloatLayout 参数
 
-| 参数     | 说明                 | 类型    | 可选值 | 默认值  |
-| -------- | -------------------- | ------- | ------ | ------- |
-| title    | 元素的标题           | String  | -      | -       |
-| isOpened | 控制是否出现在页面上 | Boolean | -      | `false` |
+| 参数                | 说明                                       | 类型    | 可选值 | 默认值  |
+| ------------------- | ------------------------------------------ | ------- | ------ | ------- |
+| title               | 元素的标题                                 | String  | -      | -       |
+| isOpened            | 控制是否出现在页面上                       | Boolean | -      | `false` |
+| scrollY             | 是否垂直滚动                               | Boolean | -      | `false` |
+| scrollX             | 是否水平滚动                               | Boolean | -      | `false` |
+| scrollTop           | 设置竖向滚动条位置                         | Boolean | -      | `false` |
+| scrollLeft          | 设置横向滚动条位置                         | Boolean | -      | `false` |
+| upperThreshold      | 距顶部/左边多远时，触发 scrolltolower 事件 | Boolean | -      | `false` |
+| lowerThreshold      | 距底部/右边多远时，触发 scrolltolower 事件 | Boolean | -      | `false` |
+| scrollWithAnimation | 在设置滚动条位置时使用动画过渡             | Boolean | -      | `false` |
 
 ## AtFloatLayout 事件
 
-| 事件名称 | 说明                     | 返回参数 |
-| -------- | ------------------------ | -------- |
-| onClose  | 元素被关闭时候触发的事件 | -        |
+| 事件名称        | 说明                                         | 返回参数 |
+| --------------- | -------------------------------------------- | -------- |
+| onClose         | 元素被关闭时候触发的事件                     | -        |
+| onScroll        | 滚动时触                                     | -        |
+| onScrollToUpper | 滚动到顶部/左边，会触发 onScrollToUpper 事件 | -        |
+| onScrollToLower | 滚动到底部/右边，会触发 onScrollToLower 事件 | -        |
diff --git a/src/components/float-layout/index.js b/src/components/float-layout/index.js
@@ -52,7 +52,17 @@ export default class AtFloatLayout extends AtComponent {
 
   render () {
     const { _isOpened } = this.state
-    const { title } = this.props
+    const {
+      title,
+
+      scrollY,
+      scrollX,
+      scrollTop,
+      scrollLeft,
+      upperThreshold,
+      lowerThreshold,
+      scrollWithAnimation
+    } = this.props
 
     const rootClass = classNames(
       'at-float-layout',
@@ -73,7 +83,19 @@ export default class AtFloatLayout extends AtComponent {
             </View>
           </View>
           <View className='layout-body'>
-            <ScrollView scrollY className='layout-body__content'>
+            <ScrollView
+              scrollY={scrollY}
+              scrollX={scrollX}
+              scrollTop={scrollTop}
+              scrollLeft={scrollLeft}
+              upperThreshold={upperThreshold}
+              lowerThreshold={lowerThreshold}
+              scrollWithAnimation={scrollWithAnimation}
+              onScroll={this.props.onScroll}
+              onScrollToLower={this.props.onScrollToLower}
+              onScrollToUpper={this.props.onScrollToUpper}
+              className='layout-body__content'
+            >
               {this.props.children}
             </ScrollView>
           </View>
@@ -84,11 +106,25 @@ export default class AtFloatLayout extends AtComponent {
 }
 
 AtFloatLayout.defaultProps = {
-  isOpened: false
+  isOpened: false,
+
+  scrollY: true
 }
 
-AtFloatLayout.propTypes = {
-  onClose: PropTypes.func,
+AtFloatLayout.propType = {
   title: PropTypes.string,
-  isOpened: PropTypes.bool
+  isOpened: PropTypes.bool,
+
+  scrollY: PropTypes.bool,
+  scrollX: PropTypes.bool,
+  scrollTop: PropTypes.number,
+  scrollLeft: PropTypes.number,
+  upperThreshold: PropTypes.number,
+  lowerThreshold: PropTypes.number,
+  scrollWithAnimation: PropTypes.bool,
+
+  onClose: PropTypes.func,
+  onScroll: PropTypes.func,
+  onScrollToLower: PropTypes.func,
+  onScrollToUpper: PropTypes.func
 }
diff --git a/src/pages/layout/float-layout/index.js b/src/pages/layout/float-layout/index.js
@@ -16,10 +16,23 @@ export default class FloatLayoutPage extends Taro.Component {
     super(...arguments)
     this.state = {
       isOpened1: false,
-      isOpened2: false
+      isOpened2: false,
+      isOpened3: false
     }
   }
 
+  onScroll = (...args) => {
+    console.log('onScroll', args)
+  }
+
+  onScrollToLower = args => {
+    console.log('onScrollToLower', args)
+  }
+
+  onScrollToUpper = (...args) => {
+    console.log('onScrollToUpper', args)
+  }
+
   handleClick = type => {
     this.setState({
       [`isOpened${type}`]: true
@@ -34,7 +47,7 @@ export default class FloatLayoutPage extends Taro.Component {
   }
 
   render () {
-    const { isOpened1, isOpened2 } = this.state
+    const { isOpened1, isOpened2, isOpened3 } = this.state
 
     return (
       <View className='page float-layout-page'>
@@ -64,6 +77,17 @@ export default class FloatLayoutPage extends Taro.Component {
               </View>
             </View>
           </View>
+
+          <View className='panel'>
+            <View className='panel__title'>监听事件</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <AtButton onClick={this.handleClick.bind(this, 3)}>
+                  打开 Float Layout
+                </AtButton>
+              </View>
+            </View>
+          </View>
         </View>
 
         <AtFloatLayout
@@ -79,9 +103,43 @@ export default class FloatLayoutPage extends Taro.Component {
         </AtFloatLayout>
 
         <AtFloatLayout
-          title='这是个标题这是个标题这是个标题这是个标题这是个标题这是个标题'
+          title='这是个标题'
           isOpened={isOpened2}
-          onClose={this.handleClose.bind(this, '2')}
+          onClose={this.handleClose.bind(this, '3')}
+        >
+          <View className='content-wrapper'>
+            《诗人继续沉默》收录了耶霍舒亚的十二个中短篇小说。它们以梦境一般的笔法塑造了一个个既敏感又迟钝的角色。故事有时在城市，有时在战场，有时在遥远的山村，有时完全囿于家庭，并总是从司空见惯中生出离奇。每个故事的主线带来不断加剧的紧张感，即使从表面上看，根本没有重要的事情发生：
+            封笔的诗人与智力障碍的儿子一起生活；
+            绝望的备胎照顾梦中情人与别人的孩子
+            外派多年的父亲截取女儿追求者的信件 村民们每日仪式般等候火车经过
+            指挥官拒绝命令他的部队上战场 渴睡的工人溜回家休息
+            邻居当中有个永生不死的老头 …
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            《诗人继续沉默》收录了耶霍舒亚的十二个中短篇小说。它们以梦境一般的笔法塑造了一个个既敏感又迟钝的角色。故事有时在城市，有时在战场，有时在遥远的山村，有时完全囿于家庭，并总是从司空见惯中生出离奇。每个故事的主线带来不断加剧的紧张感，即使从表面上看，根本没有重要的事情发生：
+            封笔的诗人与智力障碍的儿子一起生活；
+            绝望的备胎照顾梦中情人与别人的孩子
+            外派多年的父亲截取女儿追求者的信件 村民们每日仪式般等候火车经过
+            指挥官拒绝命令他的部队上战场 渴睡的工人溜回家休息
+            邻居当中有个永生不死的老头 …
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+            然而，在这些虚构的世界里，即便是细微的行动也会陷入瘫痪。
+          </View>
+        </AtFloatLayout>
+
+        <AtFloatLayout
+          title='这是个标题'
+          isOpened={isOpened3}
+          onScroll={this.onScroll}
+          onScrollToLower={this.onScrollToLower}
+          onScrollToUpper={this.onScrollToUpper}
+          onClose={this.handleClose.bind(this, '3')}
         >
           <View className='content-wrapper'>
             《诗人继续沉默》收录了耶霍舒亚的十二个中短篇小说。它们以梦境一般的笔法塑造了一个个既敏感又迟钝的角色。故事有时在城市，有时在战场，有时在遥远的山村，有时完全囿于家庭，并总是从司空见惯中生出离奇。每个故事的主线带来不断加剧的紧张感，即使从表面上看，根本没有重要的事情发生：