I want to use ListView with TabBar. the code is as follows: you change ref= {el = > this.lv = el} to ref= {el = > {this.lv = el; return this.lv}}. If you put it in TabBar, ListView should use a custom container, not body.
formantd-mobileInputItemborder-bottom,onfocusbugcss
...
guys, let me ask you a question: SearchBar component of antd-mobile onSubmit how to pass in e ?
...
when using picker, the animation disappears without showing off. confirm, cancel, and click the mask are all animations that do not disappear
<Picker
visible={this.state.sexVisible}
data={[
{ value: 1, la... as shown in the picture, the latest version of creat-react-app+antd-mobile,antm says that there is no need to configure HD solutions: ...
dataList20
rowData has only 10 pieces of data
... I only need a first-level menu, not embedded, now this can only be selected by clicking to change the selected menu, is there any way to pass in the menu s key, to let it be selected? official address ...
the "basic " example and "error validation " example of the antd-mobile form, the code is as follows: https: mobile.ant.design com.
1, "basic " example
import { List, InputItem, WhiteSpace } from antd-mobile ;
import { createForm } from rc-f... ant-mobile long list component, how do I click item to jump to the details page, and when the details page returns to the long list page, the long list page is not refreshed and is still in the same position as the last slide? Can you show me a demo? Ask...
when using antd-mobile, I found that the Modal mask flashes when the mask component fades in and out. later, when I used chrome s animation to view the animation, I found that the animation of the mask layer was executed twice, that is, the first whit... Mobile page, want to call mobile phone location and photo albums and other mobile phone functions, is there any simple solution to do this? Is there any other app like Alipay that calls these functions through the native mobile phone api? ...
the demo, on the official website shows that ListView cannot be loaded.
after testing, it is found that it should be caused by the outermost
beginners at the bottom of the page.
const data = [
{
img: "https://img.codeshelper.com/upload/img/2021/03/02/llvwwrmdm4l2162.png",
title: "Meet hotel",
des: "",
},
{
img: "https://img.codeshelper.com/upload/img/2021/03/02/54qpuzgv2sw2163.png",
title: "McDonald\"s invites you",
des: "",
},
{
img: "https://img.codeshelper.com/upload/img/2021/03/02/gfyvbaqqy242164.png",
title: "Eat the week",
des: "",
},
];
const NUM_ROWS = 20;
let pageIndex = 0;
function genData(pIndex = 0) {
const dataBlob = {};
for (let i = 0; i < NUM_ROWS; iPP) {
const ii = (pIndex * NUM_ROWS) + i;
dataBlob[`${ii}`] = `row - ${ii}`;
}
return dataBlob;
}
class Demo extends React.Component {
constructor(props) {
super(props);
const dataSource = new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
});
this.state = {
dataSource,
isLoading: true,
};
}
componentDidMount() {
// you can scroll to the specified position
// setTimeout(() => this.lv.scrollTo(0, 120), 800);
// simulate initial Ajax
setTimeout(() => {
this.rData = genData();
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.rData),
isLoading: false,
});
}, 600);
}
// If you use redux, the data maybe at props, you need use `componentWillReceiveProps`
// componentWillReceiveProps(nextProps) {
// if (nextProps.dataSource !== this.props.dataSource) {
// this.setState({
// dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
// });
// }
// }
onEndReached = (event) => {
// load new data
// hasMore: from backend data, indicates whether it is the last page, here is false
if (this.state.isLoading && !this.state.hasMore) {
return;
}
console.log("reach end", event);
this.setState({ isLoading: true });
setTimeout(() => {
this.rData = { ...this.rData, ...genData(PPpageIndex) };
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.rData),
isLoading: false,
});
}, 1000);
}
render() {
const separator = (sectionID, rowID) => (
<div
key={`${sectionID}-${rowID}`}
style={{
backgroundColor: "-sharpF5F5F9",
height: 8,
borderTop: "1px solid -sharpECECED",
borderBottom: "1px solid -sharpECECED",
}}
/>
);
let index = data.length - 1;
const row = (rowData, sectionID, rowID) => {
if (index < 0) {
index = data.length - 1;
}
const obj = data[index--];
return (
<div key={rowID} style={{ padding: "0 15px" }}>
<div
style={{
lineHeight: "50px",
color: "-sharp888",
fontSize: 18,
borderBottom: "1px solid -sharpF6F6F6",
}}
>{obj.title}</div>
<div style={{ display: "-webkit-box", display: "flex", padding: "15px 0" }}>
<img style={{ height: "64px", marginRight: "15px" }} src={obj.img} alt="" />
<div style={{ lineHeight: 1 }}>
<div style={{ marginBottom: "8px", fontWeight: "bold" }}>{obj.des}</div>
<div><span style={{ fontSize: "30px", color: "-sharpFF6E27" }}>{rowID}</span></div>
</div>
</div>
</div>
);
};
return (
<div style={{ position: "fixed", height: "100%", width: "100%", top: 0 }}>
<TabBar
unselectedTintColor="-sharp929292"
tintColor="-sharpff0000"
barTintColor="-sharpf7f7f7"
>
<TabBar.Item
title=""
key="Home"
icon={
<i className="iconfont icon-5gouwudai2" />
}
selectedIcon={
<i className="iconfont icon-5gouwudai2" />
}
selected={this.state.selectedTab === "homeTab"}
onPress={() => {
this.setState({
selectedTab: "homeTab",
});
}}
>
<ListView
ref={el => this.lv = el}
dataSource={this.state.dataSource}
renderHeader={() => <span>header</span>}
renderFooter={() => (<div style={{ padding: 30, textAlign: "center" }}>
{this.state.isLoading ? "Loading..." : "Loaded"}
</div>)}
renderRow={row}
renderSeparator={separator}
className="am-list"
pageSize={4}
useBodyScroll
onScroll={() => { console.log("scroll"); }}
scrollRenderAheadDistance={500}
onEndReached={this.onEndReached}
onEndReachedThreshold={10}
/>
</TabBar.Item>
<TabBar.Item
title=""
key="Mine"
icon={
<i className="iconfont icon-gerenzhongxin" />
}
selectedIcon={
<i className="iconfont icon-gerenzhongxin" />
}
selected={this.state.selectedTab === "mineTab"}
onPress={() => {
this.setState({
selectedTab: "mineTab",
});
}}
>
{/* */}
</TabBar.Item>
</TabBar>
</div>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("root"));