uniapp -- 实现顶部悬浮并动态设置页面标题

悬浮前：                                                                                悬浮后：

             

 

 

 

<view class="content">
        <!-- 轮播 -->
        <swiper class="swiper" :indicator-dots="true" autoplay interval>
            <swiper-item>
                <image mode="aspectFill" src="https://t10.baidu.com/it/app=106&f=JPEG&fm=30&fmt=auto&u=3167795488%2C195618409?w=312&h=208&s=F8BA6EDBC452D5DEC8B566330300D056"></image>
            </swiper-item>
        </swiper>
        <!-- 商品列表 -->
        <view class="goods-wrap" :class="{'topFix':isTopFix}">
            <!-- 商品分类标题 -->
            <scroll-view class="good-cates" scroll-x="true" enable-flex="true">
                <view class="cate-item" v-for="(item,index) in cates" :key="index">{{item}}</view>
            </scroll-view>
            <!-- 商品列表 -->
            <scroll-view class="good-list" scroll-y="true" @scroll="scrollHandle">
                <view class="good-item"
                    v-for="(item,index) in goodList" :key="index"
                >
                    <image class="img" :src="item.img" mode="aspectFill"></image>
                    <view class="item-right">
                        <view class="name">{{item.name}}</view>
                        <view class="now_price">现价：<text>￥{{item.nowPrice}}</text></view>
                        <view class="org_price">原价：<text>￥{{item.orgPrice}}</text></view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>

<script>
    export default {
        data() {
            return {
                isTopFix:false,
                cates:["食品饮料","零食干果","蔬菜","厨具用品","电器产品","散装食品","冷冻海鲜","火锅丸子","食品调料","肉类"],
                goodList:[
                    {id:1,name:"凤梨",nowPrice:3,orgPrice:4,img:"https://img1.baidu.com/it/u=2045332089,505253059&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=00f251e9605df1cc29a3b5920817c4c5"},
                    {id:2,name:"精品红柚",nowPrice:4,orgPrice:5,img:"https://img1.baidu.com/it/u=4049048130,2737473718&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=4500a5ed590e784b8407220c25a22232"},
                    {id:3,name:"水蜜桃",nowPrice:4,orgPrice:6,img:"https://img1.baidu.com/it/u=1337521766,447631606&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1675443600&t=0b67ed86983a67b6bb8307b831dad3e8"},
                    {id:4,name:"凤梨",nowPrice:3,orgPrice:4,img:"https://img1.baidu.com/it/u=2045332089,505253059&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=00f251e9605df1cc29a3b5920817c4c5"},
                    {id:5,name:"精品红柚",nowPrice:4,orgPrice:5,img:"https://img1.baidu.com/it/u=4049048130,2737473718&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=4500a5ed590e784b8407220c25a22232"},
                    {id:6,name:"水蜜桃",nowPrice:4,orgPrice:6,img:"https://img1.baidu.com/it/u=1337521766,447631606&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1675443600&t=0b67ed86983a67b6bb8307b831dad3e8"},
                    {id:7,name:"凤梨",nowPrice:3,orgPrice:4,img:"https://img1.baidu.com/it/u=2045332089,505253059&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=00f251e9605df1cc29a3b5920817c4c5"},
                    {id:8,name:"精品红柚",nowPrice:4,orgPrice:5,img:"https://img1.baidu.com/it/u=4049048130,2737473718&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=4500a5ed590e784b8407220c25a22232"},
                    {id:9,name:"水蜜桃",nowPrice:4,orgPrice:6,img:"https://img1.baidu.com/it/u=1337521766,447631606&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1675443600&t=0b67ed86983a67b6bb8307b831dad3e8"},
                    {id:10,name:"凤梨",nowPrice:3,orgPrice:4,img:"https://img1.baidu.com/it/u=2045332089,505253059&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=00f251e9605df1cc29a3b5920817c4c5"},
                    {id:11,name:"精品红柚",nowPrice:4,orgPrice:5,img:"https://img1.baidu.com/it/u=4049048130,2737473718&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1675443600&t=4500a5ed590e784b8407220c25a22232"},
                    {id:12,name:"水蜜桃",nowPrice:4,orgPrice:6,img:"https://img1.baidu.com/it/u=1337521766,447631606&fm=253&app=138&size=w931&n=0&f=JPG&fmt=auto?sec=1675443600&t=0b67ed86983a67b6bb8307b831dad3e8"},
                ],
            }
        },
        onLoad() {

        },
        methods: {
            scrollHandle(e){
                if(e.detail.scrollTop>200){
                    this.isTopFix = true;
                    uni.setNavigationBarTitle({
                        title:"为您推荐"
                    })
                    uni.setNavigationBarColor({
                        frontColor: '#ffffff',  //注意这里仅支持#ffffff 和 #000000,且不能简写为#fff和#000，否则不生效
                        backgroundColor: '#ff3333',
                        animation: {
                            duration: 400,
                            timingFunc: 'easeIn'
                        }
                    })
                }else{
                    this.isTopFix = false;
                    uni.setNavigationBarTitle({
                        title:"首页"
                    })
                    uni.setNavigationBarColor({
                        frontColor: '#000000',
                        backgroundColor: '#ffffff',
                        animation: {
                            duration: 400,
                            timingFunc: 'easeIn'
                        }
                    })
                }
            }
        }
    }
</script>

.topFix{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height:100vh;
}
.goods-wrap{
    position: absolute;
    width: 100%;
    height:calc(100vh - 350rpx);
    background: #fff;
    .good-list{
        width: 100%;
        height:calc(100vh - 350rpx);
        .good-item{
            padding:20rpx 30rpx;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            .item-right{
                font-size: 24rpx;
                .name{
                    font-size: 28rpx;
                    font-weight: bold;
                }
                .now_price{
                    text{
                        color:#f33;
                        font-size: 28rpx;
                        font-weight: bold;
                    }
                }
                .org_price{
                    text{
                        color:#666;
                        text-decoration: line-through;
                    }
                }
            }
            .img{
                width: 120rpx;
                height:120rpx;
                border-radius: 20rpx;
                margin-right: 10rpx;
            }
        }
    }
    .good-cates{
        display: flex;
        width: 96%;
        height:40rpx;
        padding:0 2%;
        line-height: 40rpx;
        margin:30rpx 0;
        color:#079fa1;
        .cate-item{
            flex-shrink: 0;
            background: #e5e5e5;
            border-radius: 10rpx;
            margin-right: 10rpx;
            padding:0 10rpx;
            font-size: 24rpx;
            color:#666;
        }
    }
}
.swiper{
    width: 100%;
    height: 300rpx;
    image{
        width: 100%;
        height:100%;
    }
}