流畅顶部悬浮页面

工作中,项目有个页面效果,是需要悬浮的,这个首先想到的是根据顶部距离,将需要固定的组件改为fixed,
网上有相似实现的,但是流畅性不太好,会有点卡顿,我这里优化了一下.

1.基本实现

wxml:

    
        
            
                
            
        
    
    
        
            
                
                    {{item}}
                
            
        
        
            
                
                
                    
                        {{item.name}}
                        {{item.time}} / {{item.position}}
                    
                
            
        
    

css:

.container {
    position: relative;
}

.pg-hd {
    position: relative;
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
    background: linear-gradient(#febe2b, #fff);
}

swiper {
    margin-top: 20rpx;
    height: 350rpx;
}

.swiper-item image {
    width: 100%;
    height: 300rpx;
    border-radius: 40rpx;
}

.pg-bd {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.bd-filter {
    width: 100%;
    background-color: #fff;
    height: 110rpx;
}

.normal {
    position: relative;
}

.fixed {
    top: 0;
    position: fixed;
}

.filter-segment {
    display: flex;
    justify-content: center;
    padding-top: 20rpx;
}

.segment-item {
    font-size: 32rpx;
    padding-bottom: 8rpx;
    margin: 0 40rpx;
}

.seg-selected {
    color: #f1a321;
    border-bottom: 4rpx solid #f1a321;
}

.list-container {
    padding: 0 40rpx;
    height: 100%;
}

.holder-top-padding{
    padding-top: 110rpx;
}

.bd-list {
    padding-bottom: 40rpx;
    height: 220rpx;
    display: flex;
    justify-content: space-between;
}

.list-img {
    width: 160rpx;
    height: 100%;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.5);
}

.list-info {
    flex: 1;
    margin-left: 30rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.name {
    font-size: 28rpx;
    color: #000;
}

.time {
    margin: 10rpx 0;
    font-size: 24rpx;
    color: #9b9b9b;
}

js:

Page({
    data: {
        fixedTop: 0,
        isTop: false,
        segmentTitles: ["公益演出", "公益讲座"],
        images: ["../../images/test.png", "../../images/test.png", "../../images/test.png"],
        list_show: [{
            image: "../../images/test.png",
            name: "演 韩雪",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "白夜行乐剧",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "额二个人个人个人",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "额二个人个人个人",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "额二个人个人个人",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "额二个人个人个人",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "额二个人个人个人",
            time: "2019.07.03-07.07",
            position: "上海",
        }, {
            image: "../../images/test.png",
            name: "额二个人个人个人",
            time: "2019.07.03-07.07",
            position: "上海",
        }]
    },

    onLoad: function() {
        var that = this
        wx.getSystemInfo({
            success: function(res) {
                let width = res.windowWidth
                let height = res.windowHeight
                let top = width / 750 * 370
                that.setData({
                    fixedTop: top
                })
            },
        })
    },

    onPageScroll: function(e) {
        let isTop = e.scrollTop > this.data.fixedTop
        this.setData({
            isTop: isTop
        })
    },
})

2.优化

这里有两点可以进行优化

1.setData调用频率

onPageScroll: function(e) {
        let isTop = e.scrollTop > this.data.fixedTop
        this.setData({
            isTop: isTop
        })
    },

我们知道,pageScroll调用频率很高,频繁的进行setData会影响滑动性能,其实在isTop为true如果下次滑动时得到的isTop也为true,这时我们没有必要再进行setData,同理isTop为false时也一样,所以进行一下操作,可以减少setData的操作

onPageScroll: function(e) {
        let isTop = e.scrollTop > this.data.fixedTop
        if (isTop) {
            if (!this.data.isTop) {
                this.setData({
                    isTop: true
                })
            }
        } else {
            if (this.data.isTop) {
                this.setData({
                    isTop: false
                })
            }
        }
    },

2.闪跳问题
当悬浮时,由于Fixed的问题,会导致视图高度会减少这个悬浮框的高度,所以会使下面的视图有个向上跳动的问题,视觉效果非常差,所以要根据是否悬浮的状态,给与底部视图一个padding-top,从而使视图没有闪跳的问题,其实这不能说是性能优化吧,但是视觉效果给人感觉非常差,因此在上面的wxml中,进行一个改动就好了

这里是全部完整代码