當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

Slog92_使用React框架进行前端开发4

發(fā)布時(shí)間：2025/6/15 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Slog92_使用React框架进行前端开发4 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

ArthurSlog
SLog-92
Year·1
Guangzhou·China
October 6th 2018

微信掃描二維碼，關(guān)注我的公眾號(hào)

個(gè)人網(wǎng)站：http://www.arthurslog.com
CSDN：https://blog.csdn.net/u010997452/article/list/1
GitHub：https://github.com/BlessedChild/ArthurSlog
NPM：https://www.npmjs.com/~arthurslog
掘金：https://juejin.im/user/59f2a424f265da432f305c66/posts
簡(jiǎn)書：https://www.jianshu.com/u/b9ebe10f0534
segmentfault：https://segmentfault.com/u/arthurslog/articles

為無(wú)為事無(wú)事味無(wú)味

開發(fā)環(huán)境MacOS(Mojave 10.14 (18A391))

信息源

開始編碼

目前屬于使用react的初階，先把基礎(chǔ)頁(yè)面弄好
再一步一步升級(jí)
今天完成了商城主頁(yè)的布局設(shè)計(jì)
剩下的分為八個(gè)頁(yè)面進(jìn)行原型設(shè)計(jì)之后繼續(xù)開發(fā)
圖片暫時(shí)先由普通div代替
下面上今天更新的代碼：

Client/Header.jsx

import React, { Component } from 'react'// Header區(qū)域的樣式 const HeaderBarStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', position: 'fixed', marginTop: '10px', width: '100%', height: 88, backgroundColor: 'rgba(0,0,0,0)' } const searchBarStyle = { position: 'relative', marginTop: 0, width: '100%', height: 88, backgroundColor: 'rgba(0,0,0,0)', width: '90%' } const searchBarIconStyle = { position: 'absolute', left: '0px', width: '88px', height: '88px', backgroundColor: 'rgba(0,0,0,0.1)', textAlign: 'center', lineHeight: '88px', borderStyle: 'none', borderRadius: '50px' } const searchStyle = { position: 'relative', marginTop: 0, backgroundColor: 'rgba(0,0,0,0.1)', width: '100%', height: '84px', fontSize: 40, textAlign: 'center', borderStyle: 'none', borderRadius: '50px', border: '1px solid #F2F2F2' }// Header區(qū)域渲染的內(nèi)容 class Header extends Component {render() {return <div style={HeaderBarStyle}><div className='searchBar' style={searchBarStyle}><div style={searchBarIconStyle}>圖片</div><input placeholder='請(qǐng)輸入商品名稱' style={searchStyle}></input></div></div>} }export default Header 復(fù)制代碼

Client/BodyContainer.jsx

import React, { Component } from 'react'import IssueList from './IssueList'// BodyContainet區(qū)域的樣式 const bodyContainerBarStyle = { zIndex: -1, position: "relative", marginTop: 0, marginBottom: 128, height: '100%', width: '100%', fontSize: 40, textAlign: 'center' } const carouselAreaStyle = { width: '100%', height: 375, fontSize: 40, textAlign: 'center', lineHeight: '375px' } const bulletinBoardStyle = { alignItems: 'center', display: 'flex', flexDirection: 'raw', width: '100%', height: 64, fontSize: 40, textAlign: 'center', borderStyle: 'none' } const productListStyle = { width: '100%', fontSize: 40, textAlign: 'center' } const dividingLineStyle = { backgroundColor: '#000000', height: 1, width: '100%' } const recommendStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#FFFFFF', width: '100%' } const navigationBarStyle = { display: 'flex', alignItems: 'stretch', backgroundColor: '#FFFFFF' } const navigationBarItemStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '25%', marginLeft: '10px', marginRight: '10px', textAlign: 'center', fontSize: '30' } const navigationBarItemStyleLeft = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '25%', marginLeft: '20px', marginRight: '10px', textAlign: 'center', fontSize: '30' } const navigationBarItemStyleLRight = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '25%', marginLeft: '10px', marginRight: '20px', textAlign: 'center', fontSize: '30' } const categoryStyle = { display: 'flex', alignItems: 'stretch', backgroundColor: '#FFFFFF' } const categoryItemStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '10px', marginRight: '10px', textAlign: 'center', fontSize: '30' } const categoryItemStyleLeft = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '20px', marginRight: '10px', textAlign: 'center', fontSize: '30' } const categoryItemStyleLRight = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '10px', marginRight: '20px', textAlign: 'center', fontSize: '30' } const categoryImgItemStyleLeft = { width: '220px', height: '220px', textAlign: 'center', lineHeight: '220px', backgroundColor: '#FFFFFF' } const productStyle = { display: 'flex', alignItems: 'stretch', backgroundColor: '#FFFFFF' } // const productItemStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '10px', marginRight: '10px', textAlign: 'center', fontSize: '30' } const productItemStyleLeft = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '50%', marginLeft: '20px', marginRight: '10px', textAlign: 'center', fontSize: '30' } const productItemStyleRight = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '50%', marginLeft: '10px', marginRight: '20px', textAlign: 'center', fontSize: '30' } const productImgItemStyle = { width: '400px', height: '400px', textAlign: 'center', lineHeight: '400px', backgroundColor: '#FFFFFF' }const productItemInfoTextStyle = { width: '400px', marginLeft: '0px', textAlign: 'left' } const productItemInfoPriceStyle = { width: '400px', marginLeft: '0px', textAlign: 'left' } const productItemInfoStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', width: '400px' } const productItemInfoTextareaStyle = { width: '400px', textAlign: 'left', margin: '0px' }const bulletinBoardIconStyle = { width: '56px', height: '56px', fontSize: '12px', textAlign: 'center', lineHeight: '56px', marginLeft: '20px' } const recommendIconStyle = { width: '256px', height: '256px', textAlign: 'center', lineHeight: '256px', borderStyle: 'solid' }const navigationBarIconItemStyle = { width: '200px', height: '200px', textAlign: 'center', lineHeight: '200px', backgroundColor: '#FFFFFF', borderStyle: 'solid' } // BodyContainer區(qū)域渲染的內(nèi)容 class BodyContainer extends Component {/*render() {return <div><div>2. navigationBar（導(dǎo)航欄）</div><div>2.1 所有商品|2.2 拼團(tuán)|2.3 促銷</div><div>商品1|商品2|商品3</div><div>商品4|商品5|商品6</div><div>商品7|商品8|商品9</div><IssueList /></div>}*/render() {return <div className='bodyContainer' style={bodyContainerBarStyle}><div><div className='carouselArea' style={carouselAreaStyle}>carouselArea（輪播區(qū)域）</div><div style={dividingLineStyle}></div><div style={bulletinBoardStyle}><div style={bulletinBoardIconStyle} >圖片</div><div className='bulletinBoard'>bulletinBoard（公告欄）</div></div><div style={dividingLineStyle}></div></div><div className='navigationBar' style={navigationBarStyle}><div style={navigationBarItemStyleLeft}><div style={navigationBarIconItemStyle}>圖片</div><div>所有商品</div></div><div style={navigationBarItemStyle}><div style={navigationBarIconItemStyle}>圖片</div><div>拼團(tuán)</div></div><div style={navigationBarItemStyle}><div style={navigationBarIconItemStyle}>圖片</div><div>限時(shí)促銷</div></div><div style={navigationBarItemStyleLRight}><div style={navigationBarIconItemStyle}>圖片</div><div>秒殺</div></div></div><div style={dividingLineStyle}></div><div className='recommend' style={recommendStyle}><div style={recommendIconStyle}>圖片</div><div>熱銷推薦</div></div><div style={dividingLineStyle}></div><div className='category'><div style={categoryStyle}><div style={categoryItemStyleLeft}><div style={categoryImgItemStyleLeft}>圖片</div><div>類目1</div></div><div style={categoryItemStyle}><div style={categoryImgItemStyleLeft}>圖片</div><div>類目2</div></div><div style={categoryItemStyleLRight}><div style={categoryImgItemStyleLeft}>圖片</div><div>類目3</div></div></div><div style={categoryStyle}><div style={categoryItemStyleLeft}><div style={categoryImgItemStyleLeft}>圖片</div><div>類目4</div></div><div style={categoryItemStyle}><div style={categoryImgItemStyleLeft}>圖片</div><div>類目5</div></div><div style={categoryItemStyleLRight}><div style={categoryImgItemStyleLeft}>圖片</div><div>類目6</div></div></div></div><div style={dividingLineStyle}></div><div className='productList' style={productListStyle}><div style={productStyle}><div style={productItemStyleLeft}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div><div style={productItemStyleRight}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div></div><div style={productStyle}><div style={productItemStyleLeft}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div><div style={productItemStyleRight}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div></div><div style={productStyle}><div style={productItemStyleLeft}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div><div style={productItemStyleRight}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div></div><div style={productStyle}><div style={productItemStyleLeft}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div><div style={productItemStyleRight}><div style={productImgItemStyle}>圖片</div><div style={productItemInfoStyle}><div style={productItemInfoTextStyle}>商品介紹</div><div style={productItemInfoPriceStyle}><span style={productItemInfoTextareaStyle}>￥</span><span style={productItemInfoTextareaStyle}>8888</span></div></div></div></div></div></div>} }export default BodyContainer 復(fù)制代碼

Client/Bottom.jsx

import React, { Component } from 'react'const bottomStyle = { backgroundColor: '#FFFFFF', position: "fixed", bottom: 0, height: 128, width: '100%', fontSize: 28, textAlign: 'center' } const bottomTabBarStyle = { display: 'flex', alignItems: 'stretch', backgroundColor: '#FFFFFF', height: 128 } const bottomTabBarItemStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '1px', marginRight: '1px' } const bottomTabBarItemStyleLeft = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '0.5px', marginRight: '1px' } const bottomTabBarItemStyleRight = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '#d8f0f3', color: '#000000', width: '33.3%', marginLeft: '1px', marginRight: '0.5px' } const bottomTabBarItemImg = { height: '88px', width: '88px', textAlign: 'center', lineHeight: '88px', backgroundColor: '#FFFFFF' } const bottomTabBarItemText = { height: '40px' }class Bottom extends Component {render() {return <div className='bottom' style={bottomStyle}><div className='bottomTabBar' style={bottomTabBarStyle}><div style={bottomTabBarItemStyleLeft}><div style={bottomTabBarItemImg}>圖片</div><div style={bottomTabBarItemText}>商城首頁(yè)</div></div><div style={bottomTabBarItemStyle}><div style={bottomTabBarItemImg}>圖片</div><div style={bottomTabBarItemText}>購(gòu)物車</div></div><div style={bottomTabBarItemStyle}><div style={bottomTabBarItemImg}>圖片</div><div style={bottomTabBarItemText}>推廣中心</div></div><div style={bottomTabBarItemStyleRight}><div style={bottomTabBarItemImg}>圖片</div><div style={bottomTabBarItemText}>個(gè)人中心</div></div></div></div>} }export default Bottom 復(fù)制代碼

上一張目前商城界面的圖：
至此，暫時(shí)完成了‘商城主頁(yè)’的頁(yè)面布局。

歡迎關(guān)注我的微信公眾號(hào) ArthurSlog

微信掃描二維碼，關(guān)注我的公眾號(hào)

如果你喜歡我的文章歡迎點(diǎn)贊留言
謝謝

總結(jié)

以上是生活随笔為你收集整理的Slog92_使用React框架进行前端开发4的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

框架
React