公告列表
公告列表
收藏
回答

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


微信6.5.6版本！！！

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

谁有解决方案么！！！



回答关注问题邀请回答
收藏

3 个回答

  • 雾矢
    雾矢
    2017-03-30

    请问上拉加载页面多时，停止下拉后会出现抖动（停止上拉后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()     
        }
    })


    2017-03-30
    有用
    回复
  • 海博
    海博
    2017-03-28

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

    2017-03-28
    有用
    回复
  • Sincere 🎈
    Sincere 🎈
    2017-03-27

    不要重复提问题呀~

    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抖动的问题。

    2017-03-27
    有用
    回复
请 登录 后发表内容
相关问题
相关文档