feat(wx-react-native): ScrollView 添加onContentSizeChange, scrollToEnd 方法

fix #22

Author: ykforerlang

packages/wx-react-native/miniprogram_dist/component/WXScrollView/index.comp.js

@@ -20,6 +20,15 @@ export default class WXScrollView extends RNBaseComponent{
         wxInst.scrollTo(position)
     }
 
+    scrollToEnd() {
+        const wxInst = instanceManager.getWxInstByUUID(this.__diuu__)
+        wxInst.scrollTo({
+            x: 9999999,
+            y: 9999999
+        })
+    }
+
+
     getStyle(props) {
         return {
             style: tackleWithStyleObj(props.style, SCROLL),

packages/wx-react-native/miniprogram_dist/component/WXScrollView/index.js

@@ -51,9 +51,53 @@ Component({
     ready: function() {
         instanceManager.setWxCompInst(this.data.diuu, this)
         this.onScrollFunc = getPropsMethod(this, 'onScroll')
+
+        //onContentSizeChange
+        if (getPropsMethod(this, 'onContentSizeChange')) {
+            const query = wx.createSelectorQuery().in(this)
+            query.select('.scroll-area').boundingClientRect((res) => {
+                this.setData({
+                    contentHeight: res.height
+                })
+
+                this.watchContentSize()
+            }).exec()
+        }
     },
 
     methods: {
+        // 监听contentSize的变化
+        watchContentSize() {
+            const observer = wx.createIntersectionObserver(this, {observeAll: true})
+            observer.relativeTo('.scroll-area')
+                .observe('.ball', (res) => {
+                    const {id, intersectionRatio, relativeRect} = res
+                    if (id === 'above' && intersectionRatio === 0) {
+                        const onContentSizeChangeFunc = getPropsMethod(this, 'onContentSizeChange')
+                        onContentSizeChangeFunc(relativeRect.right - relativeRect.left, relativeRect.bottom - relativeRect.top)
+
+                        const query = wx.createSelectorQuery().in(this)
+                        query.select('.scroll-area').boundingClientRect((res) => {
+                            this.setData({
+                                contentHeight: res.height
+                            })
+                        }).exec()
+                    }
+
+                    if (id === 'below' && intersectionRatio === 1) {
+                        const onContentSizeChangeFunc = getPropsMethod(this, 'onContentSizeChange')
+                        onContentSizeChangeFunc(relativeRect.right - relativeRect.left, relativeRect.bottom - relativeRect.top)
+
+                        const query = wx.createSelectorQuery().in(this)
+                        query.select('.scroll-area').boundingClientRect((res) => {
+                            this.setData({
+                                contentHeight: res.height
+                            })
+                        }).exec()
+                    }
+                })
+        },
+
         scrollTo(pos) {
             const { x, y } = pos;
             this.setData({ outTop: y, outLeft: x })
@@ -88,5 +132,6 @@ Component({
         withAni: true,
         outLeft: 0,
         outTop: 0,
+        contentHeight: 0,
     }
 });

packages/wx-react-native/miniprogram_dist/component/WXScrollView/index.wxml

@@ -9,9 +9,12 @@
             bindtouchstart='startTouch'
             bindtouchend='leaveTouch'
     >
-        <view style="{{contentContainerStyle}}min-height: 100%;">
+        <view class="scroll-area" style="{{contentContainerStyle}}min-height: 100%;">
             <slot/>
         </view>
+        <!--ball 用来检查 contentSizeChange事件-->
+        <view id="above" class="ball" style="width: 1px; height: 1px; visibility: hidden; position: absolute; top: {{contentHeight - 1}}px;"/>
+        <view id="below" class="ball" style="width: 1px; height: 1px; visibility: hidden; position: absolute; top: {{contentHeight + 1}}px;"/>
     </scroll-view>
 </block>
 <block wx:else>

packages/wx-react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@areslabs/wx-react-native",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "微信版本的React Native",
   "main": "index.js",
   "scripts": {