收藏
回答

上拉加载过多时,停止后出现抖动(scroll-top的值在变化)?

问题模块
API和组件
//获取应用实例
var app = getApp()
var api = require('../../utils/api.js')
var action = require('./../../utils/action.js')
Page({
  // 页面初始数据
    data: {
        articles: [],
        raiTabs: [],
        indexs: 0,
        type: "",
        alias: "",
        anShow: true,
        scrollTop: [],
        scrollHeight:0,
        loading: [],
        noMore: false,
        pageNum: 0,
        page: 0,
        params: {},
        curScrollTop: 0
    },
    onLoad:function(){
        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
                })
            },10)
        }else{
          
            this.getData()
        }
    },
    // 滚动事件
    scroll (event) {
        this.setData({
            curScrollTop: event.detail.scrollTop
        })
     },
    // 跳转至详情页
    navigateDetail: function(e){
        let uri = e.currentTarget.dataset.uri
        action.uriAction(uri)
    },
    // 跳转至合集
    clickURI (e) {
        let uri = e.currentTarget.dataset.uri
        action.uriAction(uri)
    },
    // 加载更多
    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()           
    }
})

请问大家有没有遇到上拉加载页面多时,停止下拉后会出现抖动(停止上拉后scroll-top=""的值在变化)?谢谢?

最后一次编辑于  2017-03-30  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 陈
    2017-05-24

    您好,请问您后来是如何解决这个问题的呢?我现在也遇到这个问题

    2017-05-24
    赞同
    回复