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&…
阅读更多...
一百三十、海豚调度器——用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…
阅读更多...
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;利益干系…
阅读更多...
【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程序的打包与运行配置高级多环境开发日志 ​…
阅读更多...
C国演义 [第十二章]

C国演义 [第十二章]

第十二章 打家劫舍题目理解步骤dp数组递推公式初始化遍历顺序 代码 打家劫舍II题目理解步骤递推公式初始化遍历顺序 代码 打家劫舍 力扣链接 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋…
阅读更多...
《深度学习推荐系统》笔记

《深度学习推荐系统》笔记

目录 一、推荐系统是什么1.作用和意义2.推荐系统的架构2.1 逻辑架构2.2 技术架构 二、传统的推荐系统方法1. 协同过滤算法1.1 userCF&&ItemCF1.3 矩阵分解算法 2. 逻辑回归算法3. 因子分解机3.1 POLY2模型3.2 FM模型3.3 FFM模型3.4 小结 4. 组合模型4.1 GBDTLR组合模型…
阅读更多...
通过监控平台提高运维效率、降低运营成本、实现绿色低碳、节能降耗、提升PUE值-安科瑞黄安南

通过监控平台提高运维效率、降低运营成本、实现绿色低碳、节能降耗、提升PUE值-安科瑞黄安南

01引言 近年来&#xff0c;随着母线槽在建筑及工厂的配电中越来越广泛&#xff0c;母线槽场景运用得越多&#xff0c;随着数据中心建设的快速发展和更高需求&#xff0c;智能母线系统逐渐被应用于机房的末端配电中&#xff0c;具有电流小、插接方便、智能化程度高等特点&#…
阅读更多...
中间件上云部署 zookeeper

中间件上云部署 zookeeper

中间件上云部署 zookeeper 企业级中间件上云部署 zookeeper一、环境说明二、zookeeper部署YAML资源清单准备三、zookeeper部署及部署验证四、zookeeper应用验证 企业级中间件上云部署 zookeeper 一、环境说明 storageclassingress 二、zookeeper部署YAML资源清单准备 # vim…
阅读更多...
【OC总结- Block】

【OC总结- Block】

文章目录 前言2. Block2.1 Block的使用规范2.2 __block修饰符2.3 Block的类型2.4 Block的循环引用及解决循环引用的场景引入解决循环引用Block循环引用场景 2.5 Block的实现及其本质2.5.1 初始化部分2.5.2 调用部分2.5.3 捕获变量 Block本质2.6 Block捕获变量 和 对象2.7 Block…
阅读更多...
数据结构-双向带头循环链表

数据结构-双向带头循环链表

链表的分类实现带有哨兵位的双向的循环链表**定义节点的结构**初始化单个节点初始化带有哨兵位的双向循环链表打印链表销毁链表尾插尾删头插头删find函数在任意位置之前插入任意位置的删除全部代码list.hlist.ctest.c 链表和顺序表的区别 链表的分类 如下 根据上述的三种组合…
阅读更多...
部署langchain+chatglm

部署langchain+chatglm

先参考&#xff1a;window零基础部署langchain-ChatGLM_飞奔的屎壳郎的博客-CSDN博客 安装一部分&#xff0c; 1.GCC安装 gcc64位下载 一定要装64位的gcc&#xff0c;因为我的电脑是w10 64位的&#xff0c;装32位运行langchain报错并配置环境变量 可直接用压缩包中的文件&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023