摘要:第一篇在上一篇文章中教給大家了怎么搭建項目的架子那么今天我們就來說一下項目里的導航和列表的實現導航廢話不說啦下面直接給大家講一下代碼項目用的的框架應該沒什么難度,我相信大家認真看文檔的都能布局出來這個地方是封裝的請求請求過來的數據全部存
第一篇 https://segmentfault.com/a/11...
在上一篇文章中教給大家了怎么搭建項目的架子;那么今天我們就來說一下項目里的導航和列表的實現
導航廢話不說啦 下面直接給大家講一下代碼
項目用的antd-mobile的框架 應該沒什么難度,我相信大家認真看文檔的都能布局出來;
TabButton.js
import React, { Component } from "react"; import { Tabs, WhiteSpace,ListView,Toast} from "antd-mobile"; import { routerRedux } from "dva/router"; import { connect } from "dva"; import Request from "../common/fetch" import {width,height} from "../common/style"; const TabPane = Tabs.TabPane; class TabButton extends Component { constructor(props) { super(props); this.state = { channels: [] } } componentDidMount() { // 這個地方是封裝的fetch請求; Request("/api/article/channel",{ secret:1111, },((res) => { this.setState({ channels: res.result.channels }) // 請求過來的數據全部存下來,以便后期調用,同時可以減少請求 this.props.dispatch({ type: "indexList/TabData", payload: res.result.channels, }); })) } //這個點需要注意:此處是將click事件傳遞給子組件,另一界面就可以取到此組件傳遞過去的click事件; _handleTabClick(key){ this.props.ButtonClick(key); } _renderList() { let result = []; const channels = this.state.channels; for(let i in channels) { if(channels[i].attval == 1 || channels[i].attval == 2){ result.push( ) } } return result } _getMore() { this.props.dispatch( routerRedux.push("/moreChannel") ) } render() { return( ) } } const styles = { moreChannel:{ position:"absolute", top:0, right:-width/7, zIndex:9999, width:width/7, height:42, backgroundColor:"#fff", alignItems:"center", justifyContent:"center" } } function indexList({indexList}) { return { indexList }; } export default connect(indexList)(TabButton);{this._handleTabClick(key)}} swipeable = {false} > {this._renderList()} this._getMore()}>
fetch.js
export default function Request(url,body,callback){ fetch(url,{ method: "POST", mode: "cors", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(body) }).then((res) => res.json()).then((res) => { callback(res) }).catch((err) => { console.log(err) }) }列表
indexTab.js
import React, { Component,PureComponent,PropTypes } from "react"; import { Tabs, WhiteSpace,ListView,Toast} from "antd-mobile"; import { routerRedux } from "dva/router"; import { connect } from "dva"; import ReactPullLoad,{ STATS } from "react-pullload"; import TabButton from "./TabButton"; import {width,height} from "../common/style"; let devicenum = localStorage.getItem("devicenum") const loadMoreLimitNum = 10; const defaultStyle ={ width: "100%", textAlign: "center", fontSize: "14px", lineHeight: "1.5", paddingTop:"12px", color:"#ccc" } class HeadNode extends PureComponent{ static propTypes = { loaderState: PropTypes.string.isRequired, }; static defaultProps = { loaderState: STATS.init, }; render(){ const { loaderState } = this.props let content = "" if(loaderState == STATS.pulling){ content = "下拉刷新" } else if(loaderState == STATS.enough){ content = "松開刷新" } else if(loaderState == STATS.refreshing){ content = "正在刷新..." } else if(loaderState == STATS.refreshed){ content = "刷新成功" } return({content}) } } class FooterNode extends PureComponent{ static propTypes = { loaderState: PropTypes.string.isRequired, hasMore: PropTypes.bool.isRequired }; static defaultProps = { loaderState: STATS.init, hasMore: true }; render(){ const { loaderState, hasMore } = this.props let content = "" if(loaderState == STATS.loading){ return(正在加載喔~) } else if(hasMore === false){ content = "沒有更多" } return({content}) } } class indexTab extends Component { constructor(props) { super(props) this.state = { channels : [], channelid : 1, showT:false, loading : false, hasMore: true, data: [], action: STATS.init, index: loadMoreLimitNum, newsLength:"" } } componentDidMount() { this.getListData(this.state.channelid); } getListData(channelid) { // List fetch("/api/article",{ method: "POST", mode: "cors", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify({ channelID: channelid, type: 0, pageSize: 10, dt : 2, action: 1, devicenum:devicenum }) }).then((res) => res.json()).then((res) => { this.setState({ data: res.result.news, newsLength:res.result.news.length }) this.props.dispatch({ type: "indexList/detailData", payload: res.result.news, }); }).then(() => { setTimeout(() => { this.setState({ showT : true }) },1900) }).then(() => { setTimeout(() => { this.setState({ showT : false }) },2900) }).catch((err) => { console.log(err) }) } handleAction = (action) => { console.info(action, this.state.action,action === this.state.action); if(action === this.state.action){ return false } if(action === STATS.refreshing){//刷新 this.handRefreshing(); } else if(action === STATS.loading){ this.handLoadMore(); } else{ this.setState({ action: action }) } } handRefreshing = () =>{ if(STATS.refreshing === this.state.action){ return false } this.getListData(this.state.channelid) setTimeout(()=>{ this.setState({ action: STATS.refreshed, index: loadMoreLimitNum }); }, 3000) } handLoadMore = () => { if(STATS.loading === this.state.action){ return false } setTimeout(()=>{ if(this.state.index === 0){ this.setState({ action: STATS.reset, hasMore: false }); } else{ fetch("/api/article",{ method: "POST", headers: { "Content-Type": "application/json;charset=UTF-8", "Accept": "application/json" }, body: JSON.stringify({ channelID: this.state.channelid, type: 0, pageSize: 10, dt : 2, action: 1, devicenum:devicenum }) }).then((res) => res.json()).then((res) => { this.setState({ data: [...this.state.data,...res.result.news], action: STATS.reset, index: this.state.index - 1 }) this.props.dispatch({ type: "indexList/detailData", payload: [...this.state.data,...res.result.news], }); }).then(() => { console.log(this.state.showT) setTimeout(() => { this.setState({ showT : true }) },1900) }).then(() => { setTimeout(() => { this.setState({ showT : false }) },2900) }).catch((err) => { console.log(err) }) } }, 3000) this.setState({ action: STATS.loading }) } //跳轉到詳情頁 _routerDetail(index) { localStorage.setItem("detailid",index) this.props.dispatch( routerRedux.push(`/detail/${index}`) ) } //Tab 切換重新調取 ButtonClick(key) { this.getListData(key); this.setState({ channelid:key }) } _renderShow() { if(this.state.showT == true){ if(this.state.newsLength != 0){ return(更新了{this.state.newsLength}條內容
) }else{ return(暫無更新推送
) } }else{ return( ) } } render(){ const {data,hasMore} = this.state return () } } const styles = { more: { width:width, backgroundColor:"#FFDB01", position:"absolute", zIndex:9999, top:86, textAlign:"center", padding:5, fontSize:14, display:"block", }, news: { padding:15, justifyContent:"center", alignItems:"center" }, imgStyle: { width:width-30, //height:100 }, newsTitle: { fontSize:18, marginTop:10, marginBottom:10 }, moreTab: { width:width-(width/7)*6, height:43, backgroundColor:"#fff", position: "absolute", justifyContent:"center", alignItems:"center", top:44, right:0, zIndex:9999 } } function indexList({ indexList }) { return { indexList }; } export default connect(indexList)(indexTab);{ data.map( (str, index )=>{ if(str.images[0] != ""){ return
- }else{ return
this._routerDetail(index)}>{str.title}
{str.source} | {str.publishTime}
- } }) }
this._routerDetail(index)}>{str.title}
{str.source} | {str.publishTime}
{this._renderShow()}
好啦 上述就是整個首頁的主要代碼,知道如何創建項目的你們可以嘗試啦~~~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83900.html
摘要:再看本篇文章之前,本人還是建議想入坑的童鞋可以選有來創建的項目,因為現在和還不成熟,坑相對要多一些,當然如果你已經做好跳坑的準備,那么請繼續往下走本文適合對有一定了解的人。 再看本篇文章之前,本人還是建議想入坑react的童鞋可以選有create-react-app來創建react的項目,因為現在dva和roadhog還不成熟,坑相對要多一些,當然如果你已經做好跳坑的準備,那么請繼續往...
摘要:整個應用的,由多個小的的以為合成該當前的狀態。執行異步函數發出一個,類似于取的值通過函數將需要用到的數據合并到中,再在組件中取修改的值通過被的會自動在中擁有方法請求統一講用到所有的接口放到中方便管理函數柯里化 項目地址:dva-demo 隨手一個小star給予動力,謝謝! Build Setup # install dependencies npm install # serve ...
閱讀 1438·2021-09-28 09:44
閱讀 2501·2021-09-28 09:36
閱讀 1144·2021-09-08 09:35
閱讀 1982·2019-08-29 13:50
閱讀 810·2019-08-29 13:29
閱讀 1130·2019-08-29 13:15
閱讀 1724·2019-08-29 13:00
閱讀 2988·2019-08-26 16:16