Problema:
después de que el applet de WeChat cambia los criterios de filtro, la barra de desplazamiento de la lista no vuelve a la parte superior.
Escenario:
wepy+native
implementando <scroll-view>desplazamiento de lista
Solución:
1. Configure la visualización y ocultación de los elementos de la lista a través de wx:if para volver a cargar la lista
configurando la visualización y ocultación de . <scroll-view wx:if="{
{flag}}">La configuración directa no puede surtir efecto y la barra de desplazamiento permanece en el lugar donde se desplazó la última vez; agregue un retraso y póngalo en el temporizador para setTimeout(() => { this.flag = true }, 100)establecer el valor de la bandera. El propósito es esperar hasta que se complete la representación de la página antes de volver a cargar.
2. Control de desplazamiento a través de la parte superior de desplazamiento
Al recargar datos, scroll-topla configuración 0 no es efectiva, pero la configuración 0.1 puede tener efecto.
código:
list.wepy ------ Opción 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 ------ Esquema 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>