草庐IT

微信小程序scroll-view重新加载数据,滚动条回到顶部

怪哈哈 2023-06-08 原文

问题:
微信小程序切换了筛选条件后,列表滚动条没有滚动回顶部。

场景:
wepy+原生
通过<scroll-view>实现列表滚动

方案:
1、通过wx:if设置列表元素的展示隐藏
通过给<scroll-view wx:if="{{flag}}"> 设置显示隐藏,去重新加载列表。直接设置无法生效,滚动条依旧保留在上次滚动的地方;加一个延迟,放在定时器里去setTimeout(() => { this.flag = true }, 100) 设置flag的值。目的是等到页面渲染完成后,再去重新加载。
2、通过scroll-top控制滚动
在重新加载数据的时候,给scroll-top设置0不好使,设置0.1可以生效。

代码:

list.wepy ------ 方案1

<template>
  <view class="log-list">
  	// 通过wx:if控制元素重新渲染
    <scroll-view wx:if="{{flag}}" scroll-y class="log-list__list" bindscrolltolower="loadMore">
      <view class="log-list__box" wx:if="{{dataList.length > 0}}">
         <view class="log-list__item" wx:for="{{dataList}}" >
         </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class LogList extends wepy.page {
  pageTrackName = 'pages/main';
  eventTrackType = 'main';
  mixins = [appErrorMixin]
  config = {
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '日志记录',
    navigationBarTextStyle: 'black'
  };
  data = {
	dataList: [],
	flag: true
  }
  methods = {
  	// 重新刷新列表,滚动条置顶
  	refreshSearch(info) {
  	  this.flag = false
      this.departmentId = info.departID
      this.clientName = info.clientName
      this.type = info.type
      this.pageIndex = 1
      this.dataList = []
      // 设置flag的时候加个延迟
      setTimeout(() => {
		this.flag = true
		this.$apply()
        this.search()
	  }, 100)
    },
    async search() {
	    const self = this
	    this.setSubmitTime()
	    try {
	      let res = await httpHelper.get({
	        url: 'work/List',
	        showLoading: true,
	        data: {
	          departID: this.departmentId ? this.departmentId : '',
	          saleName: this.clientName,
	          startTime: this.startTime,
	          endTime: this.endTime,
	          pageIndex: this.pageIndex,
	          pageSize: '10'
	        }
	      })
	      let list = res.value.items || []
	      if (list.length < 10) {
	        this.isfooter = true
	      } else {
	        this.isfooter = false
	      }
	      let datatList = list.map((item) => {
	        return {
	          ...item,
	          date: self.formatDate(item.workDate, 'MM月dd日')
	        }
	      })
	      this.dataList = [
	        ...this.dataList,
	        ...datatList
	      ]
	      this.listObj = res.value || {}
	      this.loaded = true
	      this.$apply()
	    } catch (err) {
	      this.showApiError(err, '加载失败,请稍后重试。')
	    }
	  }
	loadMore() {
	    if (this.isfooter) {
	      return false
	    }
	    this.pageIndex = this.pageIndex + 1
	    this.search()
	 }
  }

}
</script>

<style lang="scss" scope>
.log-list {
    padding-top: 84rpx;
    color: #444;
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
   &__list {
	    box-sizing: border-box;
	    width: 100%;
	    height: 100%;
	}
	__box {
	    padding: 40rpx 24rpx 0 28rpx;
	    position: relative;
	    z-index: 8;
	    overflow: hidden;
	}
	__item {
	    padding: 20rpx 0 60rpx 30rpx;
	    box-sizing: border-box;
	    position: relative;
	    margin-top: -40rpx;
	    width: 100%;
	    height: auto;
	}
}
</style>

list.wpy ------ 方案2

<template>
  <view class="log-list">
  	// 通过scrollTop控制滚动
    <scroll-view scroll-y class="log-list__list" bindscrolltolower="loadMore" scroll-top="{{scrollTop}}">
      <view class="log-list__box" wx:if="{{dataList.length > 0}}">
         <view class="log-list__item" wx:for="{{dataList}}" >
         </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class LogList extends wepy.page {
  pageTrackName = 'pages/main';
  eventTrackType = 'main';
  mixins = [appErrorMixin]
  config = {
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: '日志记录',
    navigationBarTextStyle: 'black'
  };
  data = {
	dataList: [],
	scrollTop: 0,
  }
  methods = {
  	// 重新刷新列表,滚动条置顶
  	refreshSearch(info) {
      this.departmentId = info.departID
      this.clientName = info.clientName
      this.type = info.type
      this.pageIndex = 1
      this.dataList = []
      // 只有首次设置0可以生效,后面需要设置0.1
      if (this.scrollTop === 0) {
        this.scrollTop = 0.1
      } else {
        this.scrollTop = 0
      }
      this.$apply()
      this.search()
    },
    async search() {
	    const self = this
	    this.setSubmitTime()
	    try {
	      let res = await httpHelper.get({
	        url: 'work/List',
	        showLoading: true,
	        data: {
	          departID: this.departmentId ? this.departmentId : '',
	          saleName: this.clientName,
	          startTime: this.startTime,
	          endTime: this.endTime,
	          pageIndex: this.pageIndex,
	          pageSize: '10'
	        }
	      })
	      let list = res.value.items || []
	      if (list.length < 10) {
	        this.isfooter = true
	      } else {
	        this.isfooter = false
	      }
	      let datatList = list.map((item) => {
	        return {
	          ...item,
	          date: self.formatDate(item.workDate, 'MM月dd日')
	        }
	      })
	      this.dataList = [
	        ...this.dataList,
	        ...datatList
	      ]
	      this.listObj = res.value || {}
	      this.loaded = true
	      this.$apply()
	    } catch (err) {
	      this.showApiError(err, '加载失败,请稍后重试。')
	    }
	  }
	loadMore() {
	    if (this.isfooter) {
	      return false
	    }
	    this.pageIndex = this.pageIndex + 1
	    this.search()
	 }
  }

}
</script>

<style lang="scss" scope>
.log-list {
    padding-top: 84rpx;
    color: #444;
    position: relative;
    z-index: 5;
    width: 100%;
    height: 100%;
   &__list {
	    box-sizing: border-box;
	    width: 100%;
	    height: 100%;
	}
	__box {
	    padding: 40rpx 24rpx 0 28rpx;
	    position: relative;
	    z-index: 8;
	    overflow: hidden;
	}
	__item {
	    padding: 20rpx 0 60rpx 30rpx;
	    box-sizing: border-box;
	    position: relative;
	    margin-top: -40rpx;
	    width: 100%;
	    height: auto;
	}
}
</style>

参考:
快应用 | scroll-view组件中设置scroll-top:0只有第一次生效的解决方法

有关微信小程序scroll-view重新加载数据,滚动条回到顶部的更多相关文章

  1. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby - 如何在续集中重新加载表模式? - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  4. ruby-on-rails - active_admin 目录中的常量警告重新声明 - 2

    我正在使用active_admin,我在Rails3应用程序的应用程序中有一个目录管理,其中包含模型和页面的声明。时不时地我也有一个类,当那个类有一个常量时,就像这样:classFooBAR="bar"end然后,我在每个必须在我的Rails应用程序中重新加载一些代码的请求中收到此警告:/Users/pupeno/helloworld/app/admin/billing.rb:12:warning:alreadyinitializedconstantBAR知道发生了什么以及如何避免这些警告吗? 最佳答案 在纯Ruby中:classA

  5. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  6. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  7. ruby-on-rails - 如何在 Rails View 上显示错误消息? - 2

    我是rails的新手,想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围,如果不在范围内则返回错误信息。我可以检查上面代码的范围,但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单,一种显示ActiveRecord模型实例属性的表单。c

  8. ruby - 在 Ruby 中重新分配常量时抛出异常? - 2

    我早就知道Ruby中的“常量”(即大写的变量名)不是真正常量。与其他编程语言一样,对对象的引用是唯一存储在变量/常量中的东西。(侧边栏:Ruby确实具有“卡住”引用对象不被修改的功能,据我所知,许多其他语言都没有提供这种功能。)所以这是我的问题:当您将一个值重新分配给常量时,您会收到如下警告:>>FOO='bar'=>"bar">>FOO='baz'(irb):2:warning:alreadyinitializedconstantFOO=>"baz"有没有办法强制Ruby抛出异常而不是打印警告?很难弄清楚为什么有时会发生重新分配。 最佳答案

  9. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  10. ruby-on-rails - 复数 for fields_for has_many 关联未显示在 View 中 - 2

    目前,Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段,但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联,它们似乎是正确的,这可能与嵌套在公司下的项目有关,还是我遗漏了其他东西?提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关,但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi

随机推荐