vue-查询时滚动到页面最顶端

最新推荐文章于 2024-08-20 23:56:58 发布

佛佛ง

最新推荐文章于 2024-08-20 23:56:58 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/91344952

VUE 专栏收录该内容

83 篇文章

订阅专栏

本文介绍在前端开发中，如何在不同场景下实现页面滚动位置的精准控制，包括切换tab时保持滚动位置、输入框搜索后滚动到顶部以及下拉列表搜索后的滚动控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能简介：

1、切换不同tab 时，页面保持上次滚动的位置

2、输入框输入数据，点击手机“搜索”按键时，页面滚动到最顶端

       /**1,动物园-搜索 */
      doSearchAnimal(query){
        this.dataParaAnimal.page=1 //从第一页开始
        this.dataParaAnimal.querycontact = query.trim(); //输入框内容
        this.getListAnimal(); //后端获取数据
        this.$refs.AnimalBook.$refs.AnimalScroll.scrollTo(0,0) //新数据滚动到顶端
      },

3、选择“单位名称”下拉列表搜索时，页面滚动到最顶端

        /**1,动物园-下拉列表搜索 */
      doTabSelectAnimal(index1,item2){
        this.dataParaAnimal.page=1 //置为第一页
        if(item2.label==="全部"){
          this.dataParaAnimal.querycompanyName=""
        }else{
          this.dataParaAnimal.querycompanyName=item2.label
        }
        // 记录输入框的值
        this.dataParaAnimal.querycontact=this.$refs.tabSecondAnimal.$refs.searchBox.query
        this.getListAnimal(); //后端重新获取数据
        this.$refs.AnimalBook.$refs.AnimalScroll.scrollTo(0,0)  //滚动到最顶端
      },