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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
js控制div弹出层实现方法
May 11 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php两种无限分类方法实例
2015/04/21 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
javascript date格式化示例
2013/09/25 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
理解javascript异步编程
2016/01/27 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
自我评价中英文语句
2013/11/30 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
民政局个人整改措施
2014/09/24 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
全民创业工作总结
2015/08/13 职场文书