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

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

场景:
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只有第一次生效的解决方法

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值