uniapp 菜单悬浮及动态切换标题

 

 悬浮前：

 

 悬浮后：

 

<template>
    <view class="container">
        <view class="top-wrap">
            <view class="txt">为您推荐~</view>
        </view>
        <!-- 商品列表 -->
        <view class="goods-wrap" :class="{'active':isFix}">
            <scroll-view class="titles-wrap" scroll-x="true" enable-flex="true">
                <view class="title-info" v-for="(item,index) in titles" :key="index">{{item}}</view>
            </scroll-view>
            <scroll-view scroll-y="true" class="goods-info" @scroll="scrollHandle">
                <view class="goods-item" v-for="(item,index) in goods" :key="index">
                    <image class="img" :src="item.img"></image>
                    <view class="item-right">
                        <view class="title">{{item.name}}</view>
                        <view class="price">现价：￥{{item.price}}</view>
                        <view class="org">原价：￥{{item.orgPrice}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

 

<script>
    export default {
        data() {
            return {
                isFix:false,
                titles:["蔬菜","瓜果","零食","干果","厨具用品","电器用品","米面","散装食品","海鲜","肉类"],
                goods:[
                    {id:1,name:"桃子1",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=2976099989,2579072426&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
                    {id:2,name:"香蕉",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=911484886,1487964247&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"},
                    {id:3,name:"红柚",price:6,orgPrice:8,img:"https://img1.baidu.com/it/u=3662127604,1742085615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=748"},
                    {id:1,name:"桃子2",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=2976099989,2579072426&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
                    {id:2,name:"香蕉",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=911484886,1487964247&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"},
                    {id:3,name:"红柚",price:6,orgPrice:8,img:"https://img1.baidu.com/it/u=3662127604,1742085615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=748"},
                    {id:1,name:"桃子3",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=2976099989,2579072426&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
                    {id:2,name:"香蕉",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=911484886,1487964247&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"},
                    {id:3,name:"红柚",price:6,orgPrice:8,img:"https://img1.baidu.com/it/u=3662127604,1742085615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=748"},
                    {id:1,name:"桃子4",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=2976099989,2579072426&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"},
                    {id:2,name:"香蕉",price:6,orgPrice:8,img:"https://img0.baidu.com/it/u=911484886,1487964247&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500"},
                    {id:3,name:"红柚",price:6,orgPrice:8,img:"https://img1.baidu.com/it/u=3662127604,1742085615&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=748"},
                ]
            }
        },
        methods: {
            scrollHandle(e){
                console.log("e",e.detail)
                if(e.detail.scrollTop>200){
                    this.isFix = true;
                    uni.setNavigationBarTitle({
                        title:"为您推荐"
                    })
                    uni.setNavigationBarColor({
                        frontColor: '#ffffff',
                        backgroundColor: '#ff0000',
                        animation: {
                            duration: 400,
                            timingFunc: 'easeIn'
                        }
                    })
                }else{
                    this.isFix = false;
                    uni.setNavigationBarTitle({
                        title:"首页"
                    })
                    uni.setNavigationBarColor({
                        frontColor: '#000000',  //注意这里仅支持 #ffffff 和 #000000
                        backgroundColor: '#ffffff',
                        animation: {
                            duration: 400,
                            timingFunc: 'easeIn'
                        }
                    })
                }
            },
        }
    }
</script>

 

<style lang="scss" scoped>
    .goods-item{
        display: flex;
        padding:20rpx 30rpx;
        width: 690rpx;
        border-bottom: 1px solid #e5e5e5;
        .item-right{
            font-size: 24rpx;
            .title{
                font-size: 32rpx;
            }
        }
        .img{
            width: 120rpx;
            height:120rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
    }
    .titles-wrap{
        width: 96%;
        height:40rpx;
        margin:30rpx 0rpx;
        padding:0 2%;
        display: flex;
        view{
            flex-shrink: 0;
            background: #e5e5e5;
            border-radius: 10rpx;
            margin-right: 10rpx;
            padding:0 10rpx;
            height:40rpx;
            font-size: 24rpx;
            color:#555;
        }
    }
    .goods-wrap{
        position: absolute;
        width: 100%;
        height:calc(100vh - 350rpx);
        border-radius: 30rpx 30rpx 0 0;
        background: #fff;
    }
    .active{
        position: fixed;
        top:0;
        left:0;
        width: 100%;
        height:100vh;
        background: #fff;
    }
    .goods-info{
        width: 100%;
        height:calc(100vh - 350rpx);
        
    }
    .top-wrap {
        width: 100%;
        height: 300rpx;
        background: rgba(8, 162, 170, 0.4);

        .txt {
            text-align: center;
            line-height: 300rpx;
            color: #05676a;
            font-size: 36rpx;
        }

    }
</style>