React(3)

1.案例选项卡

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

import './css/02_tab.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
}

 

 

 

鼠标点击高亮显示

 

.active{color: red;
}
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})}
}

 

三个组件显示

新建三个组件

import React, { Component } from 'react'export default class Film extends Component {render() {return (<div>电影组件</div>)}
}

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第三方的库 ，专门用来请求数据

 先安装

npm i axios

 

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

*{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;
}

 

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可以实时监测输入框变化

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

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方法不会影响原数组

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的回调函数，回调函数中一定是已经更新完状态的

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

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

5.平滑滚动better-scroll

引入better-scroll库

npm i better-scroll

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

就拿上文中的cinemaList来做 

修改：

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})}
}

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1829.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【LocalSend】开源跨平台的局域网文件传输工具，支持IOS、Android、Mac、Windows、Linux

【LocalSend】开源跨平台的局域网文件传输工具，支持IOS、Android、Mac、Windows、Linux

工作前提条件&#xff1a;设备使用相同的局域网。 LocalSend is a cross-platform app that enables secure communication between devices using a REST API and HTTPS encryption. Unlike other messaging apps that rely on external servers, LocalSend doesn’t require …
阅读更多...
【经济调度】基于多目标宇宙优化算法优化人工神经网络环境经济调度研究（Matlab代码实现）

【经济调度】基于多目标宇宙优化算法优化人工神经网络环境经济调度研究（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f308;4 Matlab代码及数据 &#x1f4a5;1 概述 基于多目标宇宙优化算法&#xff08;Multi-Objective Universe Optimization Algorithm, MOUA&#xff09;优化人工神经网络环境经济调度是一…
阅读更多...
预付费电表收费系统

预付费电表收费系统

预付费电表收费系统是一种先进的电表管理系统&#xff0c;它能够帮助电力公司更加高效地管理电表收费&#xff0c;提高用电效率&#xff0c;降低能源浪费。本文将从以下几个方面介绍预付费电表收费系统的特点和优势。 一、预付费电表收费系统的原理 预付费电表收费系统是指用户…
阅读更多...
Hadoop集群启动常见错误

Hadoop集群启动常见错误

错误一 &#xff1a; 配置文件错误 解决方案&#xff1a;检查配置文件&#xff0c;修改错误。重新分发&#xff08;同步&#xff09; 常见错误二 &#xff1a; 重复格式化 DataNode NameNode 在格式化时如果发现下面的提示说明重复格式化了 datanode和namenode的集群id…
阅读更多...
Spring Cloud 远程接口调用OpenFeign负载均衡实现原理详解

Spring Cloud 远程接口调用OpenFeign负载均衡实现原理详解

环境&#xff1a;Spring Cloud 2021.0.7 Spring Boot 2.7.12 配置依赖 maven依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId> </dependency> <dependency&…
阅读更多...
FPGA原理和结构

FPGA原理和结构

设计流程和工具 设计流程 RTL级描述电路&#xff0c;逻辑综合&#xff0c;技术映射&#xff0c;布局布线&#xff0c;生成配置数据。 基于HDL的设计流程 1.工程的创建 包括源程序&#xff0c;设置文件&#xff0c;约束文件等 2.源文件的创建 就是将电路描述代码添加到源文件…
阅读更多...
【类型通配符】

【类型通配符】

类型通配符 为了表示各种泛型List的父类&#xff0c;可以使用类型通配符 类型通配符&#xff1a;<?>List<?>&#xff1a;表示元素类型未知的List&#xff0c;它的元素可以匹配任何的类型这种带通配符的List仅表示它是各种泛型List的父类&#xff0c;并不能把元…
阅读更多...
【Qt一坑】const QString 转换 char * 可能的坑

【Qt一坑】const QString 转换 char * 可能的坑

一、遇到的问题 现在有一个这样的需求&#xff0c;需要将const QString 转换成 char * 例如: const QString q_ip "192.168.1.1";const char* kc_ip q_ip.toStdString().c_str(); //单步调试显示的结果可能会是\0char* k_ip const_cast<char*>(kc_ip); …
阅读更多...
一百三十、海豚调度器——用DolphinScheduler定时调度HiveSQL任务

一百三十、海豚调度器——用DolphinScheduler定时调度HiveSQL任务

一、目标 用海豚调度器对Hive数仓各层数据库的SQL任务进行定时调度。比如&#xff0c;DWD层脱敏清洗表的动态插入数据、DWS层指标表的动态插入数据 二、工具版本 1、海豚调度器&#xff1a;apache-dolphinscheduler-2.0.5-bin.tar.gz 2、Hive&#xff1a;apache-hive-3.1.2…
阅读更多...
长短期记忆网络（LSTM）原理解析

长短期记忆网络（LSTM）原理解析

长短期记忆网络&#xff08;Long Short-Term Memory&#xff0c;简称LSTM&#xff09;是一种常用于处理序列数据的深度学习模型。它在循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;的基础上进行了改进&#xff0c;旨在解决传统RNN中的梯度消失…
阅读更多...
PyTorch训练RNN, GRU, LSTM：手写数字识别

PyTorch训练RNN, GRU, LSTM：手写数字识别

文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集&#xff1a;MNIST 该数据集的内容是手写数字识别&#xff0c;其分为两部分&#xff0c;分别含有60000张训练图片和10000张测试图片 图片来源&#xff1a;https://tensornews.cn/mnist_intr…
阅读更多...
MYSQL sql的技巧与避坑

MYSQL sql的技巧与避坑

文章目录 1.使用union还是or2.可以为NULL字段的逻辑判断3.in和exists的选择4.if和case的使用5.删除表中重复的记录&#xff0c;只保留id最小的6.字符串函数7.group_concat 批量连接8.rlike 正则模糊查询9.ifnull10.日期函数11.大表分页查询12.索引不生效的经典场景13.订单最多的…
阅读更多...
2023年11月软考中级信息系统监理师如何报名考试？

2023年11月软考中级信息系统监理师如何报名考试？

信息系统监理师就是要借鉴建筑工程监理的管理模式&#xff0c;经过研究开始启动建立我国信息工程监理制度。是信息管理&#xff08;信息管理培训&#xff09;中非常不错的一个职业&#xff0c;作为一个制度的建立&#xff0c;首先要产生监理机构&#xff0c;就是有符合要求的监…
阅读更多...
Kafka消息监控管理工具Offset Explorer的使用教程

Kafka消息监控管理工具Offset Explorer的使用教程

1、kafka监控管理工具 Offset Explorer是一款用于监控和管理Apache Kafka集群中消费者组偏移量的开源工具。它提供了一个简单直观的用户界面&#xff0c;用于查看和管理Kafka消费者组偏移量的详细信息。 Offset Explorer具有以下主要功能和特点&#xff1a; 实时监控&#x…
阅读更多...
架构训练营学习笔记3-5：消息队列备选架构设计实战

架构训练营学习笔记3-5：消息队列备选架构设计实战

本文属于架构训练营学习笔记系列&#xff1a;模块3的案例讲解 总的来说&#xff0c;这篇从更高的维度去讲&#xff0c;而不是关注消息队列的常见问题&#xff1a;比如消息如何发送&#xff0c;消息如何不丢失 &#xff0c;消息如何不重复。总体上分为2部分&#xff1a;利益干系…
阅读更多...
vue-使用ElementPlus搭建系统

vue-使用ElementPlus搭建系统

详尽的搭建过程可以参考 &#x1f4da;使用ElementPlus页面布局搭建 本章只提取重要且常用部分 Container 布局容器 Layout 布局 Dropdown 下拉菜单 Menu 菜单 -》 动态菜单显示 -》动态router 实现菜单折叠效果
阅读更多...
临时文档章

临时文档章

内部类的分类有哪些 内部类可以分为四种&#xff1a;成员内部类、局部内部类、匿名内部类和静态内部类。 静态内部类 定义在类内部的静态类&#xff0c;就是静态内部类。 public class Outer {private static int radius 1;static class StaticInner {public void visit()…
阅读更多...
【Docker】什么是Docker，它用来干什么

【Docker】什么是Docker，它用来干什么

作者简介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…
阅读更多...
ADB初识

ADB初识

ADB是Android Debug Bridge&#xff0c;是一个命令行程序。abd可以从计算机上通过USB控制Android手机设备。可以使用ADB复制文件、安装和卸载应用程序&#xff0c;运行shell命令等。 ADB的下载配置 Windows版本&#xff1a;https://dl.google.com/android/repository/platform…
阅读更多...
2.SpringBoot运维实用篇

2.SpringBoot运维实用篇

SpringBoot运维实用篇 ​ ​ 下面就从运维实用篇开始讲&#xff0c;在运维实用篇中&#xff0c;我给学习者的定位是玩转配置&#xff0c;为开发实用篇中做各种技术的整合做好准备工作。 主要分为以下内容&#xff1a; SpringBoot程序的打包与运行配置高级多环境开发日志 ​…
阅读更多...
最新文章

Copyright @ 2022~2023