700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序scroll-view重新加载数据 滚动条回到顶部

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

时间:2023-08-07 17:02:14

相关推荐

微信小程序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 = falsethis.departmentId = info.departIDthis.clientName = info.clientNamethis.type = info.typethis.pageIndex = 1this.dataList = []// 设置flag的时候加个延迟setTimeout(() => {this.flag = truethis.$apply()this.search()}, 100)},async search() {const self = thisthis.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 = truethis.$apply()} catch (err) {this.showApiError(err, '加载失败,请稍后重试。')}}loadMore() {if (this.isfooter) {return false}this.pageIndex = this.pageIndex + 1this.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.departIDthis.clientName = info.clientNamethis.type = info.typethis.pageIndex = 1this.dataList = []// 只有首次设置0可以生效,后面需要设置0.1if (this.scrollTop === 0) {this.scrollTop = 0.1} else {this.scrollTop = 0}this.$apply()this.search()},async search() {const self = thisthis.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 = truethis.$apply()} catch (err) {this.showApiError(err, '加载失败,请稍后重试。')}}loadMore() {if (this.isfooter) {return false}this.pageIndex = this.pageIndex + 1this.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只有第一次生效的解决方法

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。