scroll-view 设置scrolltop页面下拉滚动安卓手机屏幕不断跳动！ - WXOPEN Club

微信6.5.6版本！！！

上滑加载快的时候有时候会出现列表信息上下不断跳动问题，我主要通过scroll实现一个滑动一键回到头部的效果！

谁有解决方案么！！！

3 回复

wei211 楼6 年前

请问上拉加载页面多时，停止下拉后会出现抖动（停止上拉后scroll-top=""的值在变化）？谢谢？

<scroll-view scroll-y="true" scroll-top="{{curScrollTop}}" class="nav_scroll" style="height: {{scrollHeight}}px" bindscrolltolower="loadMore" bindscroll="scroll">

<template is="articalList" data="{{articles}}"/>

</scroll-view>

Page({

// 页面初始数据

data: {

// nav 初始化

curNavId: 1,

articles: [],

raiTabs: [],

indexs: 0,

type: "",

alias: "",

anShow: true,

scrollTop: [],

scrollHeight:0,

loading: [],

noMore: false,

pageNum: 0,

page: 0,

params: {},

curScrollTop: 0

},

onLoad:function(){

// wx.removeStorage({

// key:'strategyData' + this.data.indexs,

// success: function(res) {

// // console.log('strategyData' + that.data.indexs)

// // console.log(res.data)

// }

// })

// wx.removeStorage({

// key:'strategyPage' + this.data.indexs,

// success: function(resp) {

// // console.log(resp.data)

// }

// })

let tabsUrl = 'store/strategy/tabs?cityId=310100&addr=1';

api.fetchGet(tabsUrl, {'r': 'article'}).then(res => {

var that = this

that.setData({

raiTabs : res.data.items,

alias : res.data.items.alias,

type : res.data.items.type

})

that.data.type = res.data.items[0].type

that.data.alias = res.data.items[0].alias

let scrollTop = []

let loading = []

for (let i = 0; i < this.data.raiTabs.length; i++) {

scrollTop.push(0)

loading.push(false)

wx.removeStorage({

key:'strategyData' + i,

success: function(res) {

}

})

wx.removeStorage({

key:'strategyPage' + i,

success: function(resp) {

}

})

}

this.setData({

scrollTop: scrollTop

})

this.getData()

})

},

onShow () {

wx.getSystemInfo( {

success: ( res ) => {

let top = 84 * res.windowWidth / 750

this.setData({

scrollHeight: res.windowHeight - top

})

}

})

},

// 请求数据加载

getData: function() {

var that = this

var num = this.data.indexs

//最新的接口数据

if(that.data.type == 'last'){

let lastUrl = 'store/strategy/last?limit=20&addr=1'

api.fetchGet(lastUrl,{

alias: that.data.alias,

type: that.data.type,

page: that.data.pageNum,

r: 'article'

}).then(res => {

wx.hideToast()

if (res.data.items.length === 0) {

this.setData({

noMore: true

})

wx.showToast({

title: '已加载全部',

icon: 'loading'

})

}

that.data.pageNum++

that.data.articles = that.data.articles.concat(res.data.items)

let lArr = this.data.loading

lArr[num] = false

this.setData({

loading: lArr,

page: that.data.pageNum,

articles : that.data.articles

})

//缓存数据

wx.setStorage({

key:'strategyData' + that.data.indexs,

data:that.data.articles

})

wx.setStorage({

key:'strategyPage' + that.data.indexs,

data:that.data.pageNum

})

}

//标签切换

switchTab (e) {

if(this.data.indexs == e.currentTarget.dataset.index){return}

for (let key in this.data.loading) {

this.data.loading[key] = false

}

let arr = this.data.scrollTop

let index = this.data.indexs

arr[index] = this.data.curScrollTop

this.setData({

scrollTop: arr

})

var n = e.currentTarget.dataset.index;

let id = e.currentTarget.dataset.id;

var rName = e.currentTarget.dataset.alias;

var rType = e.currentTarget.dataset.type;

this.setData({

pageNum: 0,

articles: [],

alias: rName,

type: rType,

indexs: n

})

let lArr = this.data.loading

lArr[n] = true

this.setData({

loading: lArr,

noMore: false

})

var pageValue = wx.getStorageSync('strategyPage' + this.data.indexs)

var dataValue = wx.getStorageSync('strategyData' + this.data.indexs)

if(pageValue.length !== 0 || dataValue.length !== 0){

let lArr = this.data.loading

lArr[n] = false

this.setData({

loading: lArr,

noMore: false

})

this.setData({

articles: dataValue,

pageNum: pageValue

})

var scrollTopNumber = this.data.scrollTop[n]

setTimeout(() => {

this.setData({

curScrollTop: scrollTopNumber

})

}else{

// this.setData({

// articles: this.data.articles,

// pageNum: this.data.pageNum

// })

this.getData()

}

},

// 滚动事件

scroll (event) {

//  该方法绑定了页面滚动时的事件，记录当前的position.y的值,为了请求数据之后把页面定位到这里来。

this.setData({

curScrollTop: event.detail.scrollTop

})

},

// 加载更多

loadMore: function (e) {

if (this.data.noMore||this.data.loading[this.data.indexs]) return

let lArr = this.data.loading

lArr[this.data.indexs] = true

this.setData({

loading: lArr

})

wx.showToast({

title: '加载中',

...

ping732 楼6 年前

谢谢你的耐心回复，我OK 了哈哈

kangyang3 楼5 年前

不要重复提问题呀~

1、不要在bindScroll中动态去改变scrollTop的值，scrollTop改变之后会反过来触发bindScroll，这样，在Android手机中会造成抖动的现象。

2、如果你要实现回到顶部的功能，有可能涉及到两个方面：

scrollTop达到某个阈值时，具备“回到顶部”功能的按钮悬浮按钮需要显示出来
需要把scrollTop改为0，以实现回到顶部的功能

避免抖动就是要去避免在滑动的时候动态改变scrollTop，对于a，你可以用另外一个变量把滚动中得到的scrollTop存起来（加入叫cacheScrollTop），然后根据cacheScrollTop的值来控制回到顶部悬浮按钮的显示和隐藏；对于b，你直接在回到顶部悬浮按钮的点击事件中绑定相应的方法，然后把scrollTop的值（不是cacheScrollTop）设置为0，当然如果你的scrollTop的值本来就是0，这样你再设置0是不能让scroll-view回到顶部的，你可以先把它设置为1，然后再设置成0。

这样既实现了“回到顶部”功能，又不会在Android手机上造成scroll-view抖动的问题。