React(3)

1.案例选项卡

javascript 复制代码
import React, { Component } from 'react'

export default class App extends Component {

    state={
        tabList:[
            {
                id:1,
                text:"电影"
            },
            {
                id:2,
                text:"影院"
            },
            {
                id:3,
                text:"我的"
            }
        ]
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.tabList.map(item=>
                            <li key={item.id}>{item.text}</li>)
                    }
                </ul>
            </div>
        )
    }
}

进行样式修改:js引入css

css 复制代码
import './css/02_tab.css'
css 复制代码
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 50px;
    line-height: 50px;
    width: 100%;
}


ul li{
    flex:1;
    text-align:center
}

鼠标点击高亮显示

javascript 复制代码
.active{
    color: red;
}
javascript 复制代码
import React, { Component } from 'react'
import './css/02_tab.css'

export default class App extends Component {

    state={
        tabList:[
            {
                id:1,
                text:"电影"
            },
            {
                id:2,
                text:"影院"
            },
            {
                id:3,
                text:"我的"
            }
        ],
        currentKey:0
    }

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.tabList.map((item,index)=>
                            <li key={item.id} className={this.state.currentKey==index?'active':''} onClick={()=>
                                this.handlerClick(index)
                            }>{item.text}</li>)
                    }
                </ul>
            </div>
        )
    }

    handlerClick(index){
        this.setState({
            currentKey:index
        })
    }
}

三个组件显示

新建三个组件

javascript 复制代码
import React, { Component } from 'react'

export default class Film extends Component {
    render() {
        return (
            <div>
                电影组件
            </div>
        )
    }
}
javascript 复制代码
import React, { Component } from 'react'
import './css/02_tab.css'

import Film from './tabComponent/film'
import My from './tabComponent/my'
import Cinema from './tabComponent/cinema'



export default class App extends Component {

    state={
        tabList:[
            {
                id:1,
                text:"电影"
            },
            {
                id:2,
                text:"影院"
            },
            {
                id:3,
                text:"我的"
            }
        ],
        currentKey:0
    }

    render() {
        return (
            <div>
                {this.showTable()}
                <ul>
                    {
                        this.state.tabList.map((item,index)=>
                            <li key={item.id} className={this.state.currentKey==index?'active':''} onClick={()=>
                                this.handlerClick(index)
                            }>{item.text}</li>)
                    }
                </ul>
            </div>
        )
    }

    handlerClick(index){
        this.setState({
            currentKey:index
        })
    }

    showTable(){
        switch(this.state.currentKey){
            case 0:
                return <Film></Film>
            case 1:
                return <Cinema></Cinema>
            case 2:
                return <My></My>
        }
    }
}

点击可以切换

2.请求数据

react中使用axios第三方的库 ,专门用来请求数据

先安装

javascript 复制代码
npm i axios
javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method:'get',
            headers:{
                'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host':'mall.film-ticket.cinema.list'
            }
        }).then(res=>{
            console.log(res)}
         ).catch(err=>console.log(err))


    }

    render() {
        return (
            <div>
                影院组件
            </div>
        )
    }
}

res.data

css 复制代码
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 50px;
    line-height: 50px;
    width: 100%;
    background-color: white;
}


ul li{
    flex:1;
    text-align:center
}

.active{
    color: red;
}

dl{
    height: 50px;
    border-bottom: 1px solid gray;
}
dl dt{
    font-size: 20px;
}
dl dd{
    font-size: 12px;
    color: gray;
}
javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas
            })
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                {this.state.cinemaList.map((item) => 
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>

                )}

            </div>
        )
    }
}

3.模糊搜索

利用input 属性onInput可以实时监测输入框变化

先尝试监控输入框改变并打印改变的内容

javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas
            })
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                <div>
                    <input onInput={this.handleInput}></input>实时搜索
                </div>
                {this.state.cinemaList.map((item) =>
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>

                )}

            </div>
        )
    }

    handleInput(event){
        console.log("input",event.target.value);
    }
}

实时模糊搜索

数组的filter方法不会影响原数组

javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: [],
            backcinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas,
                backcinemaList: res.data.data.cinemas
            })
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                <div>
                    <input onInput={this.handleInput}></input>实时搜索
                </div>
                {this.state.cinemaList.map((item) =>
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>

                )}

            </div>
        )
    }

    handleInput = (event) => {
        console.log("input", event.target.value);
        // 数组的filter方法不会影响原数组
        var newList = this.state.backcinemaList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) ||
            item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        this.setState({
            cinemaList:newList
        })
    }
}

4.setState说明

setState在同步代码使用时是异步的,在异步代码使用时同步的

也就说setState更新状态,可能react背后不是立即就更新state的 所以如果你再setState方法后紧随其后获取当前state中的值,可能会发现获取的值还是之前没更新的,更新并没有生效

方法:

如果是在同步执行代码中,可以使用setState的回调函数,回调函数中一定是已经更新完状态的

javascript 复制代码
    this.setState({
                cinemaList: res.data.data.cinemas,
                backcinemaList: res.data.data.cinemas
    },()=>{
         //回调函数中执行你的需求       
    })

如果是在异步中就无所谓了

5.平滑滚动better-scroll

引入better-scroll库

javascript 复制代码
npm i better-scroll

作用就是使一个显示很长的数据可以在一个固定很短的区域中显示滑动 要求必须一个很短的区域 包裹一个很长的区域

就拿上文中的cinemaList来做

修改:

javascript 复制代码
import React, { Component } from 'react'
import axios from 'axios'
import BetterScroll from 'better-scroll'

export default class Cinema extends Component {


    constructor() {
        super();
        this.state = {
            cinemaList: [],
            backcinemaList: []
        }
        //react中使用axios第三方的库  专门用来请求数据
        // axios.get("请求地址").then(res=>{}).catch(err=>{console.log(err);})
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=7406159",
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log(res.data)
            this.setState({
                cinemaList: res.data.data.cinemas,
                backcinemaList: res.data.data.cinemas
            })

            new BetterScroll(".wrapper")
        }).catch(err => console.log(err))


    }

    render() {
        return (
            <div>
                <div>
                    <input onInput={this.handleInput}></input>实时搜索
                </div>

                <div className='wrapper' style={{height:'600px',overflow:'hidden'}}>
                    <div className='content'>
                        {this.state.cinemaList.map((item) =>
                            <dl key={item.cinemaId}>
                                <dt>{item.name}</dt>
                                <dd>{item.address}</dd>
                            </dl>
                        )}
                    </div>
                </div>

            </div>
        )
    }

    handleInput = (event) => {
        console.log("input", event.target.value);
        // 数组的filter方法不会影响原数组
        var newList = this.state.backcinemaList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) ||
            item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        this.setState({
            cinemaList: newList
        })
    }
}

此时滚动很丝滑 还带点惯性哈哈哈哈哈

相关推荐
理想不理想v6 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我7 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记20 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜21 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=21 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck25 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript