小程序监听页面滑动切换状态栏

小程序监听页面滑动切换状态栏

首先用scroll-view包住全部内容

<scroll-view  bindscroll="onScroll">
	内容
<scroll-view>

吸顶条 控制current切换吸顶条选中状态 我这边只放了一个 全部的在添加链接描述

<view class="customer_tab flex_row main_axis_space_around" id="navbar">
	<view>
		<view class="text_customer_tab {{currentTab==0?'text_customer_tab_after':'text_customer_tab_before'}}"
			data-current="0" bindtap="clickCustomerTab">客户资料</view>
		<view class="customer_tab_line" style="{{currentTab==0?'display:block':'display:none'}}" data-current="0"
			bindtap="clickCustomerTab"></view>
	</view>
</view>

id对应位置

<view class="bg_customer_top" id="locationCustomerData">
	内容
</view>

获取id="locationCustomerData"距离顶部的距离

lifetimes: {
    attached: function () {
        // 在组件实例进入页面节点树时执行
        const query = this.createSelectorQuery().in(this);
        query.select('#navbar').boundingClientRect(res => {
            // console.log(res.top)
            this.setData({
                navbarMarginTopHieght: res.top
            })
        }).exec()
        // 客户资料
        query.select('#locationCustomerData').boundingClientRect(res => {
            // console.log(res.top)
            this.setData({
                locationCustomerData : res.top
            })
        }).exec()
        // 客户标签
        query.select('#locationCustomerTags').boundingClientRect(res => {
            // console.log(res.top)
            this.setData({
                locationCustomerTags : res.top
            })
        }).exec()
        // 客户动态
        query.select('#locationCustomerTags').boundingClientRect(res => {
            // console.log(res.top)
            this.setData({
                locationCustomerDynamic : res.top
            })
        }).exec()
    }
}

判断id位置与页面滑动距离

onScroll(e) {
    // console.log(e)
    if (e.detail.scrollTop >= this.data.navbarMarginTopHieght && !this.data.showNavbar) {
        this.setData({
            showNavbar: true
        })
    } else if (e.detail.scrollTop < this.data.navbarMarginTopHieght && this.data.showNavbar) {
        this.setData({
            showNavbar: false
        })
    }
    if(e.detail.scrollTop <= this.data.locationCustomerData){
        this.setData({
            currentTab:0
        })
    }else if(e.detail.scrollTop <= this.data.locationCustomerTags){
        this.setData({
            currentTab:1
        })
    }else{
        this.setData({
            currentTab:2
        })
    }
    // console.log(this.data.locationCustomerDynamic)
}