相关平台
支付宝小程序
复现仓库
git@github.com:shixiaohu2206/taro-test.git
**小程序基础库: 支付宝小程序基础库2.0**
使用框架: React
复现步骤
- yarn build:alipay 打包支付宝小程序
- HUAWEI MateX2 折叠屏机型,进行真机测试
- 开合折叠屏,观察页面是否有onResize相关的toast
期望结果
在开合折叠屏时,触发onResize事件
实际结果
在开合折叠屏时,没有触发onResize事件
环境信息
Taro v3.6.19
Taro CLI 3.6.19 environment info:
System:
OS: macOS 14.1.1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.8.0/bin/yarn
npm: 7.21.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
npmPackages:
@tarojs/cli: 3.6.19 => 3.6.19
@tarojs/components: 3.6.19 => 3.6.19
@tarojs/helper: 3.6.19 => 3.6.19
@tarojs/plugin-framework-react: 3.6.19 => 3.6.19
@tarojs/plugin-platform-alipay: 3.6.19 => 3.6.19
@tarojs/plugin-platform-h5: 3.6.19 => 3.6.19
@tarojs/plugin-platform-jd: 3.6.19 => 3.6.19
@tarojs/plugin-platform-qq: 3.6.19 => 3.6.19
@tarojs/plugin-platform-swan: 3.6.19 => 3.6.19
@tarojs/plugin-platform-tt: 3.6.19 => 3.6.19
@tarojs/plugin-platform-weapp: 3.6.19 => 3.6.19
@tarojs/react: 3.6.19 => 3.6.19
@tarojs/runtime: 3.6.19 => 3.6.19
@tarojs/shared: 3.6.19 => 3.6.19
@tarojs/taro: 3.6.19 => 3.6.19
@tarojs/taro-loader: 3.6.19 => 3.6.19
@tarojs/webpack5-runner: 3.6.19 => 3.6.19
babel-preset-taro: 3.6.19 => 3.6.19
eslint-config-taro: 3.6.19 => 3.6.19
react: ^18.0.0 => 18.2.0
taro-ui: ^3.1.1 => 3.2.0
补充信息
支付宝小程序中,在开合折叠屏时,未触发onResize事件
机型:HUAWEI MateX2 折叠屏,型号代码TET-AN000,HarmonyOS 4.0.0
使用了3种方式
- Class Component,使用onResize
- Functional Component,使用useResize
- 使用 Taro.Current.page.onResize
以上都不触发
伪代码
import { View } from "@tarojs/components";
import Taro, { useLoad, useResize, showToast } from "@tarojs/taro";
import "./index.scss";
export default function Index() {
useResize(() => {
showToast({ title: "useResize" });
});
useLoad(() => {
showToast({ title: "useLoad" });
if (Taro.Current.page) {
Taro.Current.page.onResize = () => {
showToast({ title: "Taro.Current.page.onResize" });
};
}
});
return <View className="my">index</View>;
}
import React, { Component } from "react";
import { View } from "@tarojs/components";
import Taro, { useLoad, useResize, showToast } from "@tarojs/taro";
import "./index.scss";
class Index extends Component {
onResize() {
showToast({ title: "Component-onResize" });
}
render(): React.ReactNode {
return <View>index2</View>;
}
}
export default Index;
1条答案
按热度按时间ua4mk5z41#
这里提供下曲线解法:
支付宝的原生组件提供onResize钩子:
https://opendocs.alipay.com/mini/framework/page-detail?pathHash=15155d5c#events
在原生组件上绑定个onResize,再通过自定义事件通知到Taro组件内