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 相关文章推荐
jQuery使用技巧简单汇总
Apr 18 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
微信小程序 form组件详解
Oct 25 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
javascript实现移动端上传图片功能
Aug 18 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 magic quotes的详解
2013/06/17 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
prototype class详解
2006/09/07 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
Python实现按中文排序的方法示例
2018/04/25 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
元旦晚会感言
2014/03/12 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
员工工作自我评价
2014/09/26 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
MySQL空间数据存储及函数
2021/09/25 MySQL
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android