事情的经过,是这样的:在react中引入better-scroll并封装成组件:
return ( <ScrollContainer ref={scrollContainerRef}>{props.children}</ScrollContainer> );
其中,通过props控制其滚动方向:
scrollX: direction === "horizontal", scrollY: direction === "vertical"
这并没有什么问题,于是我在一个组件中尝试使用它:
return ( <Content> <Scroll direction="vertical" className="list" onScroll={forceCheck}> <div> <Slider bannerList={bannerListJS}></Slider> <RecommendList recommendList={recommendListJS}></RecommendList> </div> </Scroll> {enterLoading ? <Loading></Loading> : null} </Content> );
其中Conten是一个样式组件:
import styled from "styled-components"; import style from "../../assets/global-style"; export const Content = styled.div` position: fixed; top: 90px; bottom: 0; width: 100%; .before { position: absolute; top: -300px; width: 100%; height: 400px; background: ${style["theme-color"]}; } `;
成功了,它表现得很棒!
于是我兴奋的打算再次使用它,向direction传入“horizontal”,并亲切地称之为“Horizon”:
return ( <Scroll direction={"horizontal"}> <div ref={Category}> <List> <span>{title}</span> { list.map(item => { return ( <ListItem key={item.key} className={`${oldVal === item.key ? "selected" : ""}`} onClick={() => handleClick(item)} > {item.name} </ListItem> ); }) } </List> </div> </Scroll> );
诶?好像最外层少了点什么,于是:
return ( <NavContainer> <Horizon list={categoryTypes} title={"分类(默认热门):"} handleClick={val => handleUpdateCategory(val)} oldVal={category} /> <Horizon list={alphaTypes} title={"首字母:"} handleClick={val => handleUpdateAlpha(val)} oldVal={alpha} /> </NavContainer> );
我在调用它的地方,给他加上一个框框,同样这个框框是个样式组件:
export const NavContainer = styled.div` position: fixed; top: 95px; padding: 5px; `;
我满心欢喜的打运行我的项目,哦豁,它不管用了!
求大佬抬一手。。o(╥﹏╥)o
已解决
悬赏分:40
- 解决时间 2021-11-27 05:34
点赞 0反对 0举报 0
收藏 0
分享 0
回答1
最佳
-
好了,通过直觉,这不是逻辑的问题,然后开始找css的问题。
嗯。很气,具体的找错过程就不说了,说一下蠢如我犯的问题吧,引以为戒:
嗯,去掉就可以惹,o(╥﹏╥)o
支持 0 反对 0 举报2021-11-26 10:18