scroll-view 设置scrolltop页面下拉滚动安卓手机屏幕不断跳动！
发布于 6 年前 作者 fang82 19508 次浏览 来自 问答

微信6.5.6版本！！！

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

谁有解决方案么！！！

3 回复

请问上拉加载页面多时，停止下拉后会出现抖动（停止上拉后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: '加载中',
            icon: 'loading'
        })
        this.getData()     
    }
})

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

不要重复提问题呀~

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

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

  1. scrollTop达到某个阈值时，具备“回到顶部”功能的按钮悬浮按钮需要显示出来

  2. 需要把scrollTop改为0，以实现回到顶部的功能

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

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

回到顶部