この記事では、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構成の実装
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
JS はホバー ドロップダウン メニューを実装します。これは、フロントエンドの面接で遭遇するシナリ...
目次1. ユニットテストはなぜ必要なのでしょうか? 2. ユニットテストの書き方3. テストツール4...
会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...
導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...
3つの機能: 1. コンテンツの垂直方向の自動中央揃え2. デフォルトのプロンプトテキストは灰色で表...
問題の説明Ele.me UI のフレームワークでは、入力データは el-form であり、出力データ...
この記事では、MySQL 5.7.21のインストールとインストール中に発生した問題を参考までに紹介し...
この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考ま...
DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...
1. redis で使用すると Netty の起動競合が発生するため、***Application ...
1. Centosイメージを使用してローカルのyumソースをビルドするCentOS をインストール...
<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...
1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...
許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...