.ring { width: 100px; height: 100px; border-radius: 50%; /* 1. border-top 会导致 border-radius 失效 */ /* border-top-color: red; */ /* 2. 可改为 box-shadow 实现； 效果仍有细微差别*/ box-shadow: 0 -1px 0 0 red; } 可以试一下上述方法。

解决了吗？

input这种组件，是不支持增加伪元素的。 参考：https://stackoverflow.com/a/4660434

监听 visibilitychange；我这边是同时监听pageshow 和 visibilitychange，对最终执行的事件做了一个throttle处理。 看下来，是因为小程序的webview 不会触发pageshow事件。 const pageCacheBackHandler = useCallback(() => { throttle(doSomething()); }, [doSomething]); const pageShowEventHandler = useCallback( (event) => { if (event && event.persisted) { pageCacheBackHandler(); } }, [pageCacheBackHanlder] );  const visibilityStateChangeEventHandler = useCallback(() => { if (document.visibilityState == "visible") { pageCacheBackHandler(); } }, [pageCacheBackHandler]); useEffect(() => { window.addEventListener("pageshow", pageShowEventHandler); document.addEventListener( "visibilitychange", visibilityStateChangeEventHandler ); return () => { window.removeEventListener("pageshow", pageShowEventHandler); document.removeEventListener( "visibilitychange", visibilityStateChangeEventHandler ); }; }, [ pageShowEventHandler, visibilityStateChangeEventHandler, ]);