この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. コンポーネントの紹介販売者詳細インターフェース (StoreDetail コンポーネント): 'react' から React をインポートします。 'axios' から axios をインポートします。 '../smallPage/GoBack' から GoBack をインポートします。 '../../Assets/css/storeDetail.css' をインポートします。 '../../Mock/MenuList' から MenuList をインポートします。 '../menuPage/Order' から Order をインポートします。 '../menuPage/Evaluate' から Evaluate をインポートします。 '../menuPage/Business' から Business をインポートします。 クラスStoreDetailはReact.Componentを拡張します。 コンストラクタ(props) { スーパー(小道具); この状態 = { 食べ物:null、 メニューリスト:メニューリスト }; } コンポーネントマウント(){ axios.get("/food").then((res)=>{ this.setState({ 食品:res.data.結果データ }); console.log(this.state.food); }); } ユーザー選択=(インデックス)=>{ メニューリスト.forEach((val,key)=>{ val.isshow=false; if(キー===インデックス){ val.isshow=true; } }); this.setState({ メニューリスト:メニューリスト }); } 与える() { 戻る ( this.state.food? <div> <GoBack title={this.state.food.poi_info.name}/> <div className="foodimage"> <img src={this.state.food.poi_info.pic_url} alt=""/> <img src={this.state.food.poi_info.head_pic_url} alt=""/> <span>{this.state.food.poi_info.name}</span> </div> <div> <ul className="メニューリスト"> { this.state.menulist.map((値,インデックス)=>{ 戻る ( <li キー = {index} onClick = {this.userSelect.bind(this,index)}> {値.タイトル} <span className={value.isshow?'foodline':''}></span> </li> ) }) } </ul> </div> { this.state.menulist.map((値,インデックス)=>{ if(value.isshow&&index===0){ 戻り値 <Order toprice={this.state.food.poi_info.shipping_fee_tip} orderlist={this.state.food.food_spu_tags} key={index}/> }そうでない場合、value.isshow&&index===1 の場合{ 戻り値 <キー={index} を評価/> }そうでない場合、value.isshow&&index===2{ <ビジネスキー={index}/> を返します }それ以外{ 戻る ''; } }) } </div> :'' ); } } デフォルトの StoreDetail をエクスポートします。 注文インターフェース(注文コンポーネント): 'react' から React をインポートします。 '../../Assets/css/order.css' をインポートします。 '../smallPage/AddCut' から AddCut をインポートします。 '../smallPage/Cart' から Cart をインポートします。 クラスOrderはReact.Componentを拡張します。 コンストラクタ(props) { スーパー(小道具); この状態 = { リスト:[]、 左インデックス:0 }; } 右スクロール=(e)=>{ scrolltop=e.target.scrollTop とします。 listheight=this.state.list とします。 for(let i=0;i<listheight.length-1;i++){ if(スクロールトップ<リスト高さ[i]){ // スライドするときに、配列の最初のセットを取得し、インデックス値を変更します this.setState({ 左インデックス:i }); 壊す; }それ以外の場合(スクロールトップ>=リストハイト[i]&&スクロールトップ<リストハイト[i+1]){ // 右のスライド値が全体の高さの半分より大きい場合、左のインデックスを下げる必要があります if (i+1>=listheight.length/2) { // 左側の ul を取得し、その scrollTop を下に移動します。this.refs.leftul.scrollTop=listheight[i+1]; }それ以外{ // scrollTop を上に移動します this.refs.leftul.scrollTop=0; } this.setState({ 左インデックス:i+1 }); 壊す; } } } // ユーザーがクリックすると、現在のインデックスの色を変更します userClick=(index)=>{ this.setState({ 左インデックス:インデックス }); this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0; } コンポーネントマウント(){ order_block を document.getElementsByClassName("order_block"); とします。 listinfo=this.state.list; とします。 // div をループし、各 div のオフセットを取得し、それを this.state にプッシュして変更して表示します。変更後、listinfo を取得します。 // 最初のdivの場合は、そのdivのオフセットのみを取得します。それ以外の場合は、そのdivのオフセット+ listinfo[i-1]を取得します。 for(let i=0;i<order_block.length;i++){ もし(i===0){ listinfo.push(order_block[i].offsetHeight); }それ以外{ listinfo.push(order_block[i].offsetHeight+listinfo[i-1]); } } this.setState({ リスト:リスト情報 }); // console.log(listinfo); (11) [550, 612, 1284, 1712, 2628, 5496, 7083, 8609, 9099, 9465, 10747] } // 子コンポーネント Cart で強制更新メソッドを呼び出し、AddCut コンポーネントでメソッドを実行します refComponent=()=>{ ele = this.refs.cart; とします。 ele.update(); } 与える() { 戻る ( <div className="order"> <div className="order_left"> <ul ref="leftul"> { this.props.orderlist.map((値,インデックス)=>{ 戻る ( // インデックスに応じて左の li の色を決定します<li onClick={this.userClick.bind(this,index)} className={this.state.leftindex===index?'leftli leftli_color':'leftli'} key={index}> <img src={value.icon} alt=""/> <span>{値の名前}</span> </li> ) }) } </ul> </div> <div onScroll={this.scrollRight} クラス名="order_right"> <div ref="order_scroll" className="order_scroll"> { this.props.orderlist.map((値,インデックス)=>{ 戻る ( <div className="order_block" キー={index}> <ul> { 値.spus.map((v,k)=>{ 戻る ( <li キー = {k}> <div className="order_block_img"> <img src={v.picture} alt=""/> </div> <div className="order_block_word"> <div className="order_block_word_name">{v.name}</div> <div className="order_block_word_zan">{v.praise_content}</div> <div className="order_block_word_price"> <span>¥{v.min_price}</span>/個<AddCut parent={this} name={v.name} price={v.min_price}/> </div> </div> </li> ) }) } </ul> </div> ) }) } </div> </div> <カート ref="cart" toprice={this.props.toprice}/> </div> ); } } デフォルトの順序をエクスポートします。 ページの追加と削除 (AddCut コンポーネント): 'react' から React をインポートします。 '../../Assets/css/addCut.css' をインポートします。 '../../Mock/CartData' から CartData をインポートします。 クラスAddCutはReact.Componentを拡張します{ コンストラクタ(props) { スーパー(小道具); この状態 = { 番号:0 }; } ユーザー追加=()=>{ addnum=this.state.num; とします。 数値++を追加します。 this.setState({ 数値:数値を追加 }); this.addCart(追加番号); this.props.parent.refComponent(); } ユーザーカット=()=>{ cutnum=this.state.num; とします。 カットナム--; if(カット数<0){ カット番号=0; } this.setState({ 数値:カット数 }); this.addCart(カット番号); this.props.parent.refComponent(); } addCart=(数値)=>{ // オブジェクトコレクションを生成する let list={ 名前:this.props.name、 価格:this.props.price, 番号:番号 }; 同じ=falseとします。 カートデータの長さが0の場合 CartData.push(リスト); } for(let i=0;i<CartData.length;i++){ CartData[i].name===this.props.nameの場合{ CartData[i].num=数値; 同じ=真; } } if(!同じ){ CartData.push(リスト); } } 与える() { 戻る ( <div className="addcut"> <img onClick={this.userCut} className={this.state.num>0?'show':'showhidden'} src={require("../../Assets/image/minus.edae56b865f90527f2657782f67d9c3e.png")} alt=""/> <span className={this.state.num>0?'show':'showhidden'}>{this.state.num}</span> <img onClick={this.userAdd} src={require("../../Assets/image/plus.af10af5a9cee233c612b3cff5c2d70cd.png")} alt=""/> </div> ); } } デフォルトのAddCutをエクスポートします。 ショッピングカートページ(カートコンポーネント): 'react' から React をインポートします。 '../../Assets/css/cart.css' をインポートします。 '../../Mock/CartData' から CartData をインポートします。 クラスCartはReact.Componentを拡張します。 コンストラクタ(props) { スーパー(小道具); この状態 = { カート:[]、 合計価格:0 }; } 更新=()=>{ // データを読み込む this.setState({ カート:CartData }); // 合計価格を計算します let prices=0; for(let i=0;i<CartData.length;i++){ 価格+=CartData[i].price*CartData[i].num; } this.setState({ 合計価格:価格 }); } 与える() { 戻る ( <div className="カート"> <div className="cart_left"> <img src={require("../../Assets/image/shop-icon.3a615332a0e634909dc3aa3a50335c8f.png")} alt=""/> <span>¥{this.state.totalprice}</span><br/> <span>{this.props.toprice} も必須です</span> </div> <div className="cart_right">チェックアウトへ進む</div> </div> ); } } デフォルトのカートをエクスポートします。 2. エフェクト表示以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順
>>: マルチポートおよびマルチドメイン名アクセスのNginx構成の実装
現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...
概要: HBase には、ユーザーに管理、分析、修復、デバッグ機能を提供するための多くの操作および保...
1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...
この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...
最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...
証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...
目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...
springmvc による Spring の統合Spring 統合 springmvc の web....
目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...
序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...
問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...
1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...
オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...