React列表栏及购物车组件使用详解


Posted in Javascript onJune 28, 2021

本文实例为大家分享了React列表栏及购物车组件的具体代码,供大家参考,具体内容如下

React列表栏及购物车组件使用详解

一、组件介绍

商家详细界面(StoreDetail组件):

import React from 'react';
import axios from 'axios';
import GoBack from '../smallPage/GoBack';
import '../../Assets/css/storeDetail.css';
import MenuList from '../../Mock/MenuList';
import Order from '../menuPage/Order';
import Evaluate from '../menuPage/Evaluate';
import Business from '../menuPage/Business';

class StoreDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            food:null,
            menulist:MenuList
        };
    }
    componentDidMount(){
        axios.get("/food").then((res)=>{
            this.setState({
                food:res.data.result.data
            });
            console.log(this.state.food);
        });
    }
    userSelect=(index)=>{
        MenuList.forEach((val,key)=>{
            val.isshow=false;
            if(key===index){
                val.isshow=true;
            }
        });
        this.setState({
            menulist:MenuList
        });
    }
    render() {
        return (
            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="menulist">
                            {
                                this.state.menulist.map((value,index)=>{
                                    return (
                                        <li key={index} onClick={this.userSelect.bind(this,index)}>
                                            {value.title}
                                            <span className={value.isshow?'foodline':''}></span>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    {
                        this.state.menulist.map((value,index)=>{
                            if(value.isshow&&index===0){
                                return <Order toprice={this.state.food.poi_info.shipping_fee_tip} orderlist={this.state.food.food_spu_tags} key={index}/>
                            }else if(value.isshow&&index===1){
                                return <Evaluate key={index}/>
                            }else if(value.isshow&&index===2){
                                return <Business key={index}/>
                            }else{
                                return '';
                            }
                        })
                    }
                </div>
            :''
        );
    }
}

export default StoreDetail;

点单界面(Order组件):

import React from 'react';
import '../../Assets/css/order.css';
import AddCut from '../smallPage/AddCut';
import Cart from '../smallPage/Cart';

class Order extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[],
            leftindex:0
        };
    }
    scrollRight=(e)=>{
        let scrolltop=e.target.scrollTop;
        let listheight=this.state.list;
        for(let i=0;i<listheight.length-1;i++){
            if(scrolltop<listheight[i]){
                // 在滑动的时候取其数组中的第某个集合并且修改索引值
                this.setState({
                    leftindex:i
                });
                break;
            }else if(scrolltop>=listheight[i]&&scrolltop<listheight[i+1]){
                // 当右边滑动值大于整个高的一半时,左边的索引需要往下走
                if(i+1>=listheight.length/2){
                    // 获取左边的ul,让其scrollTop往下顶
                    this.refs.leftul.scrollTop=listheight[i+1];
                }else{
                    // 让其scrollTop往上顶
                    this.refs.leftul.scrollTop=0;
                }
                this.setState({
                    leftindex:i+1
                });
                break;
            }
        }
    }
    // 用户点击时,让当前索引变色
    userClick=(index)=>{
        this.setState({
            leftindex:index
        });
        this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0;
    }
    componentDidMount(){
        let order_block=document.getElementsByClassName("order_block");
        let listinfo=this.state.list;
        // 循环遍历div,拿到每个div的偏移量,再将其push进this.state中进行修改显示,修改后得到listinfo
        // 若为第一个div,则只拿其自身的偏移量;否则,则拿其自身+listinfo[i-1]的偏移量
        for(let i=0;i<order_block.length;i++){
            if(i===0){
                listinfo.push(order_block[i].offsetHeight);
            }else{
                listinfo.push(order_block[i].offsetHeight+listinfo[i-1]);
            }
        }
        this.setState({
            list:listinfo
        });
        // console.log(listinfo);  (11) [550, 612, 1284, 1712, 2628, 5496, 7083, 8609, 9099, 9465, 10747]
    }
    // 调用子组件Cart里的强制刷新方法,在AddCut组件里执行方法
    refComponent=()=>{
        let ele=this.refs.cart;
        ele.update();
    }
    render() {
        return (
            <div className="order">
                <div className="order_left">
                    <ul ref="leftul">
                        {
                            this.props.orderlist.map((value,index)=>{
                                return (
                                    // 按照索引来判断左边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>{value.name}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div onScroll={this.scrollRight} className="order_right">
                    <div ref="order_scroll" className="order_scroll">
                        {
                            this.props.orderlist.map((value,index)=>{
                                return (
                                    <div className="order_block" key={index}>
                                        <ul>
                                            {
                                                value.spus.map((v,k)=>{
                                                    return (
                                                        <li key={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>
                <Cart ref="cart" toprice={this.props.toprice}/>
            </div>
        );
    }
}

export default Order;

加减页面(AddCut组件):

import React from 'react';
import '../../Assets/css/addCut.css';
import CartData from '../../Mock/CartData';

class AddCut extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            num:0
        };
    }
    userAdd=()=>{
        let addnum=this.state.num;
        addnum++;
        this.setState({
            num:addnum
        });
        this.addCart(addnum);
        this.props.parent.refComponent();
    }
    userCut=()=>{
        let cutnum=this.state.num;
        cutnum--;
        if(cutnum<0){
            cutnum=0;
        }
        this.setState({
            num:cutnum
        });
        this.addCart(cutnum);
        this.props.parent.refComponent();
    }
    addCart=(num)=>{
        // 产生一个对象集合
        let list={
            name:this.props.name,
            price:this.props.price,
            num:num
        };
        let same=false;
        if(CartData.length===0){
            CartData.push(list);
        }
        for(let i=0;i<CartData.length;i++){
            if(CartData[i].name===this.props.name){
                CartData[i].num=num;
                same=true;
            }
        }
        if(!same){
            CartData.push(list);
        }
    }
    render() {
        return (
            <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>
        );
    }
}

export default AddCut;

购物车页面(Cart组件):

import React from 'react';
import '../../Assets/css/cart.css';
import CartData from '../../Mock/CartData';

class Cart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            cart:[],
            totalprice:0
        };
    }
    update=()=>{
        // 读取数据
        this.setState({
            cart:CartData
        });
        // 计算总价
        let prices=0;
        for(let i=0;i<CartData.length;i++){
            prices+=CartData[i].price*CartData[i].num;
        }
        this.setState({
            totalprice:prices
        });
    }
    render() {
        return (
            <div className="cart">
                <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>
        );
    }
}

export default Cart;

二、效果展示

React列表栏及购物车组件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
React如何创建组件
Jun 27 #Javascript
Vue3.0写自定义指令的简单步骤记录
关于JavaScript回调函数的深入理解
Jun 27 #Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
You might like
php miniBB中文乱码问题解决方法
2008/11/25 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
phpinfo的知识点总结
2019/10/10 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
Array对象方法参考
2006/10/03 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python Tkinter版学生管理系统
2019/02/20 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
keras.layer.input()用法说明
2020/06/16 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
前台文员的岗位职责
2013/11/14 职场文书
群众路线领导对照材料
2014/08/23 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL