热门搜索换页功能实现

最新推荐文章于 2022-05-16 15:13:25 发布
最新推荐文章于 2022-05-16 15:13:25 发布
阅读量830 收藏
点赞数
分类专栏： 一个react简单项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/purple_lumpy/article/details/88942919
版权

我们热门搜索，有一个“换一批”的按钮，点击它，就会换一批热门关键字。

我们的实现是，ajax 获取很多热门搜索关键字，但只会显示十个，点击换一批会显示下一批十个关键字。

那我们再去src/common/header/store 下的reducer.js 中新增两个数据page（当前页）、totalPage（总页数），如下。

import { SEARCH_FOCUS, SEARCH_BLUR, CHANGE_LIST } from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: [],
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data);
        default:
            return state;
    }
}

那我们在返回数据的时候，要修改一下totalPage 的值。因此，我们打开src/common/header/store 下的 actionCreators.js 文件。修改其中的 changeList 方法，如下。

import * as actionTypes from './actionTypes';
import axios from 'axios';
import { fromJS } from 'immutable';
import '../../../mockdata.js';

const changeList = (data) => ({
  type: actionTypes.CHANGE_LIST,
  data: fromJS(data),
  totalPage: Math.ceil( data.length / 10 )
});

export const searchFocus = () => ({
    type: actionTypes.SEARCH_FOCUS
});

export const searchBlur = () => ({
    type: actionTypes.SEARCH_BLUR
});

export const getList = () => {
  return (dispatch) => {
    axios.get('/api/headerList.json').then( (res) => {
      const data = res.data;
      if( data.success ) {
        dispatch( changeList( data.data ) )
      }
    }).catch( () => {
      console.log("error");
    })
  }
}

然后，我们在同目录下的reducer.js 中case 为 “CHANGE_LIST” 做如下修改。

import { SEARCH_FOCUS, SEARCH_BLUR, CHANGE_LIST } from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: [],
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data).set("totalPage", action.totalPage);
        default:
            return state;
    }
}

接下来，我们改一下Header 组件，使他每次最多显示十项热门搜索关键字。如下。由于 this.props.list 是immutable 对象，不能通过方括号的方式取值，因此，我们先使用 toJS() 方法将它转换为js对象。

  getListArea = () => {
    const {focused, list, page} = this.props;
    const jsList = list.toJS();
    const pageList = [];

    for (let i = (page-1) * 10; i< page * 10; i++) {
      pageList.push(<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>)
    }
    if (focused) {
      return (
        <SearchInfo>
              <SearchInfoTitle>
                热门搜索
                <SearchInfoSwitch>换一批</SearchInfoSwitch>
              </SearchInfoTitle>
              <div>
                {pageList}
              </div>
            </SearchInfo>
      )
    } else {
      return null;
    }
  };

接着，我们需要修改一个点。热门搜索框框，并不仅在 搜索框获得焦点的时候出现。在鼠标在热门搜索框内时，也是出现的。鼠标移出这个框时会消失。

然后我们在 src/common/header/store 下的 reducer.js 中再定义一个变量 mouseIn，如下。

import { SEARCH_FOCUS, SEARCH_BLUR, CHANGE_LIST } from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: [],
    mouseIn: false,
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data).set("totalPage", action.totalPage);
        default:
            return state;
    }
}

然后，在src/comon/header 下的 index.js 中 SearchInfo 组件添加一个 onMouseEnter 方法，如下。

  getListArea = () => {
    const {focused, list, page, handleMouseEnter} = this.props;
    const jsList = list.toJS();
    const pageList = [];

    for (let i = (page-1) * 10; i< page * 10; i++) {
      pageList.push(<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>)
    }
    if (focused) {
      return (
        <SearchInfo onMouseEnter={handleMouseEnter}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch>换一批</SearchInfoSwitch>
          </SearchInfoTitle>
          <div>
            {pageList}
          </div>
        </SearchInfo>
      )
    } else {
      return null;
    }
  };

再在 mapDispatchToProps 中添加上 handleMouseEnter 方法，如下。

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      dispatch(actionCreators.getList());
      dispatch(actionCreators.searchFocus());
    },
    handleBlur () {
      dispatch(actionCreators.searchBlur());
    },
    handleMouseEnter () {
      dispatch(actionCreators.mouseEnter());
    }

  }
}

再在 actionCreators.js 中创建这个action,如下。

export const mouseEnter = () => ({
  type: actionTypes.MOUSE_ENTER
});

然后再去reducer.js 中设置一下，如下。

import { SEARCH_FOCUS, SEARCH_BLUR, CHANGE_LIST, MOUSE_ENTER } from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: [],
    mouseIn: false,
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data).set("totalPage", action.totalPage);
        case MOUSE_ENTER:
            return state.set("mouseIn", true);
        default:
            return state;
    }
}

然后，再更改一下显示热门搜索的条件，如下。

  getListArea = () => {
    const {focused, list, page, handleMouseEnter, mouseEnter} = this.props;
    const jsList = list.toJS();
    const pageList = [];

    for (let i = (page-1) * 10; i< page * 10; i++) {
      pageList.push(<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>)
    }
    if (focused || mouseEnter) {
      return (
        <SearchInfo onMouseEnter={handleMouseEnter}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch>换一批</SearchInfoSwitch>
          </SearchInfoTitle>
          <div>
            {pageList}
          </div>
        </SearchInfo>
      )
    } else {
      return null;
    }
  };

同理，我们再设置一个moustOut 的属性放在redux 中，然后通过它控制热门搜索消失的条件之一。

如下是 src/common/header 下 的 index.js

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  Addition,
  Button,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem
} from './style';
import '../../statics/iconfont/iconfont.css';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';

class Header extends Component {
  render() {
    let { focused, handleFocus, handleBlur} = this.props;
    return (
      <HeaderWrapper>
        <Logo href='/'/>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>
            <span className="iconfont">&#xe636;</span>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch
                placeholder="搜索"
                className={focused ? "focused" : ""}
                onFocus={handleFocus}
                onBlur={handleBlur}
              ></NavSearch>
            </CSSTransition>
            <span
              className={focused ? "focused iconfont" : "iconfont"}
            >&#xe623;</span>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
        <Button className='writting'>
          <span className="iconfont">&#xe63a;</span>
          写文章
        </Button>
        <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }

  getListArea = () => {
    const {focused, list, page, handleMouseEnter, mouseEnter, handleMouseLeave} = this.props;
    const jsList = list.toJS();
    const pageList = [];

    for (let i = (page-1) * 10; i< page * 10; i++) {
      pageList.push(<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>)
    }
    if (focused || mouseEnter) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch>换一批</SearchInfoSwitch>
          </SearchInfoTitle>
          <div>
            {pageList}
          </div>
        </SearchInfo>
      )
    } else {
      return null;
    }
  };

}

const mapStateToProps = (state) => {
  return {
    focused: state.get("header").get("focused"),
    list: state.get("header").get("list"),
    page: state.get("header").get("page"),
    totalPage: state.get("header").get("totalPage"),
    mouseEnter: state.get("header").get("mouseIn")
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      dispatch(actionCreators.getList());
      dispatch(actionCreators.searchFocus());
    },
    handleBlur () {
      dispatch(actionCreators.searchBlur());
    },
    handleMouseEnter () {
      dispatch(actionCreators.mouseEnter());
    },
    handleMouseLeave () {
      dispatch(actionCreators.mouseLeave());
    }

  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

下面是src/common/header/store 下的 actionCreators.js 

import * as actionTypes from './actionTypes';
import axios from 'axios';
import { fromJS } from 'immutable';
import '../../../mockdata.js';

const changeList = (data) => ({
  type: actionTypes.CHANGE_LIST,
  data: fromJS(data),
  totalPage: Math.ceil( data.length / 10 )
});

export const searchFocus = () => ({
    type: actionTypes.SEARCH_FOCUS
});

export const searchBlur = () => ({
    type: actionTypes.SEARCH_BLUR
});

export const getList = () => {
  return (dispatch) => {
    axios.get('/api/headerList.json').then( (res) => {
      const data = res.data;
      if( data.success ) {
        dispatch( changeList( data.data ) )
      }
    }).catch( () => {
      console.log("error");
    })
  }
}

export const mouseEnter = () => ({
  type: actionTypes.MOUSE_ENTER
});

export const mouseLeave = () => ({
  type: actionTypes.MOUSE_LEAVE
});

下面是src/common/header/store 下的reducer.js 

import { SEARCH_FOCUS, SEARCH_BLUR,
    CHANGE_LIST, MOUSE_ENTER,MOUSE_LEAVE
} from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: [],
    mouseIn: false,
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data).set("totalPage", action.totalPage);
        case MOUSE_ENTER:
            return state.set("mouseIn", true);
        case MOUSE_LEAVE:
            return state.set("mouseIn", false);
        default:
            return state;
    }
}

然后呢，我们可以去实现一下，点击“换一批”，热门搜索关键字就换成下十个。

先更改一下 Header 组件的代码，如下

  getListArea = () => {
    const {focused, list, page, handleMouseEnter,
      mouseEnter, handleMouseLeave, handleChangeKeyWord, totalPage
    } = this.props;
    const jsList = list.toJS();
    const pageList = [];
    if (jsList.length) {
      for (let i = (page-1) * 10; i< page * 10; i++) {
        if (i >= jsList.length) {
          break;
        }
        pageList.push(<SearchInfoItem key={jsList[i]}>{jsList[i]}</SearchInfoItem>)
      }
    }
    if (focused || mouseEnter) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => handleChangeKeyWord(page, totalPage)}>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <div>
            {pageList}
          </div>
        </SearchInfo>
      )
    } else {
      return null;
    }
  };

const mapDispatchToProps = (dispatch) => {
  return {
    handleFocus () {
      dispatch(actionCreators.getList());
      dispatch(actionCreators.searchFocus());
    },
    handleBlur () {
      dispatch(actionCreators.searchBlur());
    },
    handleMouseEnter () {
      dispatch(actionCreators.mouseEnter());
    },
    handleMouseLeave () {
      dispatch(actionCreators.mouseLeave());
    },
    handleChangeKeyWord (page, totalPage) {
      let newPage = (page) % totalPage + 1;
      dispatch(actionCreators.changekeyword(newPage));
    }

  }
}

然后改一下 actionCreators.js 

export const changekeyword = (page) => ({
  type: actionTypes.CHANGE_KEY_WORD,
  data: page
});

再改改reducer.js

import { SEARCH_FOCUS, SEARCH_BLUR,
    CHANGE_LIST, MOUSE_ENTER,
    MOUSE_LEAVE, CHANGE_KEY_WORD
} from './actionTypes';
import { fromJS } from 'immutable';

const defaultState = fromJS({
    focused: false,
    list: [],
    mouseIn: false,
    page: 1,
    totalPage: 1
});

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.set("list", action.data).set("totalPage", action.totalPage);
        case MOUSE_ENTER:
            return state.set("mouseIn", true);
        case MOUSE_LEAVE:
            return state.set("mouseIn", false);
        case CHANGE_KEY_WORD:
            return state.set("page", action.data);
        default:
            return state;
    }
}

最后，我们把src/common/header/store 下的reducer 中 set 很多值时，用merge 方法代码，如下。

export default (state = defaultState, action) => {
    switch (action.type) {
        case SEARCH_FOCUS :
            return state.set("focused", true);
        case SEARCH_BLUR:
            return state.set("focused", false);
        case CHANGE_LIST:
            return state.merge({
                "list": action.data,
                "totalPage": action.totalPage
            });
        case MOUSE_ENTER:
            return state.set("mouseIn", true);
        case MOUSE_LEAVE:
            return state.set("mouseIn", false);
        case CHANGE_KEY_WORD:
            return state.set("page", action.data);
        default:
            return state;
    }
}

Done.

purple_lumpy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
点击搜索框弹出热门搜索以及点击缓一缓 实现换一批热门关键词的实现思路以及代码 .zip
12-20
点击搜索框弹出热门搜索 以及点击缓一缓 实现换一批热门关键词的实现思路以及代码 。如有不明可留言咨询。
VUE:在VUE中实现效果“换一换“功能
coldriversnow的专栏
04-01 842
实现效果：假如有10条数据，分组展示，默认在当前页面展示4个，点击换一批，从第5个开始继续展示，到最后一组，再重新返回到第一组 data() { return { qList: [], //处理后的list newList: [], //截取第几组的开始参数 timeStart: 0, //截取第几组的结束参数 timeEnd: 1, //默认为0组 group: 0,
js换一批功能的实现
weixin_30449239的博客
05-16 1622
　　在写这篇文章之前，我曾经也在网上找了很多换一批功能实现的方法文章，基本上都是一样的 但是这个代码有个bug，也就是你点击第一轮结束进入第二轮的时候，需要点击2次才进入正常的状态。后来我才发现，是有个地方没判断好 需要在这个地方加上这个判断才可以，以下附上完善的代码 var changeindex=1;var clickindex=2;$("#guess-c...
关于热门换一批功能实现时的key值问题
qq_44888284的博客
09-09 650
关于热门换一批功能实现时的key值问题 index.js:1375 Warning: Each child in a list should have a unique “key” prop. 在实现换一批功能时，我们首先在reducer中定义了一个空的数组list，如下 const defaultState=fromJS({ focused:false, mouseIn:fal...
vue-实现换一换功能
weixin_44451266的博客
05-16 614
<template> <div> <div style="background: #f6f7f9; height: 12px; width: 100%"></div> <div class="resource-box"> <div class="circleResources-header"> <p>发现圈子</p> <p @click="ch
手机换页功能实现源代码
05-06
轻松实现手机换页显示，是实现大量页面信息标准浏览的必需品
ECSHOP全部品牌页实现分页换页功能方法
09-28
主要介绍了ECSHOP全部品牌页实现分页换页功能方法,需要的朋友可以参考下
vue+element实现打印页面功能
10-16
主要介绍了vue+element实现打印页面功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
jQuery+css实现的换页标签栏效果
10-22
主要介绍了jQuery+css实现的换页标签栏效果,涉及jQuery动态操作页面元素构造换页标签的相关技巧,需要的朋友可以参考下
应用PageHelper实现大屏中table形式自动换页展示.pdf
01-13
应用pegehelper分页实现大屏中table形式自动换页展示数据
换一批功能的实现jquery
05-19
获取数据源以后，利用jquery实现每次点击切换不同的展示内容，知道数据全部展示之后，再重新开始刷新抓取
换一批: 点击换数据
01-16
可以根据数据的长度来改变需要的数据需求,js实现换一批,可以根据数据的长度来改变需要的数据需求,js实现换一批,可以根据数据的长度来改变需要的数据需求,js实现换一批,
换一批功能
yaozhichao1的专栏
06-10 3381
点击按钮换一批：（假设有3个div块，打开页面默认显示第一个div，点“换一批”按钮，用js读取第二个div替换掉第一个div并显示在网页上，再点一次则用第三个替换掉第二个，再点一次用第一个替换掉第三个……如此循环） 1 2 3 4 5 6 7 8 9 function divrefresh(){    var m1=document.getE
13.热门搜索点击换一换，换页功能的实现
zhuhui2000的博客
06-05 2611
1.我们可以看到，我们现在页面上将从json中获取到的数据全部显示出来，那我们如何做，才能使每次只显示10个？ 2.首先在reducer的默认数据中，我们定义一个当前页和一个总页数,都默认为1： 3.在actionCreators中，我们将从json中获取到的数据分成每10个一页。 5.在reducer中，我们接收数据，并将原来的默认的totalPage替换为刚刚action请求的新的数据的页数 ...
jquery换一批的写法
newmiracle学习天地
07-22 2121
jquery换一批的写法 $('.huanyipi').on('click',function () { var currentindex=parseInt($(this).attr('currentindex')); var count=parseInt($(this).attr('count'));
推荐换一批
beauty_魅影
08-17 1335
1、可以通过集合的方法 List&lt;GroovyRowResult&gt; hotGroup = commonService.getGDao().query("SELECT * FROM sys_dict where pid in( select id from sys_dict where name = 'HOT_SEARCH_TAG')");// if (hotGroup.size()...
搜索框动画效果实现
purple_lumpy的博客
03-28 1762
呃，我们的搜索框，为了不让输入的字符串把放大镜遮住，我们给input 设置padding-right 为30px，如下。 export const NavSearch = styled.input` width: 160px; height: 38px; margin-top: 9px; margin-left: 20px; padding: 0 30px 0 20px; ...
换页C语言代码实现
最新发布
05-30
你好！以下是C语言代码实现换页的方法： ```c #include int main() { int page = 1; // 当前页码 int totalPage = 10; // 总页数 int showCount = 5;... if ((i - 1) % ...这样就可以实现简单的换页功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值