UNIAPP实战项目笔记10 顶部滑块功能开发滑块跟随

超、凢脫俗 2024-04-06 13:13 78阅读 0赞

### 页面滚动跟随 ###

#### common.css 公共样式 ####

*  common/common.css

/* 全局css */
    
        /* 默认字体颜色 */
        .f-color{
        
            color: #636263;
        }
        /* 选中字体颜色 */
        .f-active-color{
        
            color: #40bdfb;
        }
        /* 背景色 */
        .bg-color{
        
            background-color: #42b7fb;
        }
    
        /* 隐藏滑块 */
        ::-webkit-scrollbar{
        
            display: none;
            width: 0 !important;
            height: 0 !important;
            -webkit-appearance: none;
            background:transparent;
        }

#### index.vue首页 ####

*  index.vue

<template>
            <view class="content">
                <view class="index">
                    
                    <scroll-view scroll-x="true" :scroll-into-view="scrollIntoIndex" class="scroll-content" >
                        <view
                        :id="'top'+index"
                            class="scroll-item"
                            v-for="(item,index) in topBar"
                            :key="index"
                            @tap="changeTab(index)"
                        >
                            <text :class="topBarIndex===index?'f-active-color':'f-color'">{
        {
        item.name}}</text>
                        </view>
                    </scroll-view>
                    
                    <swiper @change="onChangeTab" :current="topBarIndex">
                        <swiper-item
                            v-for="(item,index) in topBar"
                            :key="index"
                        >
                            <view>{
        {
        item.name}}</view>
                        </swiper-item>
                    </swiper>
                    
                    
                    
                    
                    
                    
                    
                    
                </view>
                
                <view class="f-active-color">
                    文字
                </view>
                <view class="iconfont icon-xiaoxi"></view>
                <view class="text-area">
                    <text class="title">{
        {
        title}}</text>
                </view>
            </view>
        </template>
    
        <script>
            import IndexSwiper from '@/components/index/indexSwiper.vue';//引入
            import Recommend from '@/components/index/Recommend.vue';//引入
            import Card from '@/components/common/Card.vue';//引入
            import CommodityList from '@/components/common/CommodityList.vue';//引入
            import Banner from '@/components/index/Banner.vue';//引入
            import Icons from '@/components/index/Icons.vue';//引入
            import Hot from '@/components/index/Hot.vue';//引入
            import Shop from '@/components/index/Shop.vue';//引入
            export default {
        
                data() {
        
                    return {
        
                        // 选中的索引
                        topBarIndex:0,
                        // 顶栏跟随的索引id值
                        scrollIntoIndex:'top0',
                        // 顶栏数据
                        topBar:[
                            {
        name:'推荐'},
                            {
        name:'运动户外'},
                            {
        name:'服饰内衣'},
                            {
        name:'鞋靴箱包'},
                            {
        name:'美妆个护'},
                            {
        name:'家居数码'},
                            {
        name:'食品母婴'}
                        ],
                        title: 'Hello'
                    }
                },
                components:{
        
                    IndexSwiper, //注册
                    Recommend,
                    Card,
                    CommodityList,
                    Banner,
                    Icons,
                    Hot,
                    Shop
                    
                },
                onLoad() {
        
    
                },
                methods: {
        
                    changeTab(index){
        
                        if (this.topBarIndex === index) {
        
                            return;
                        }
                        this.topBarIndex = index
                        this.scrollIntoIndex = 'top'+index
                    },
                    onChangeTab(e){
        
                        this.changeTab(e.detail.current)
                    }
                }
            }
        </script>
    
        <style>
        .scroll-content{
        
            width: 100%;
            height: 80rpx;
            white-space: nowrap;
        }
        .scroll-item{
        
            display: inline-block;
            padding: 10rpx 30rpx;
            font-size: 32rpx;
        }
        .f-active-color{
        
            padding: 10rpx 0;
            border-bottom: 6rpx solid #49BDFB;
        }
            .index{
        
                width: 100%;
            }
            .content {
        
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
    
            .logo {
        
                height: 200rpx;
                width: 200rpx;
                margin-top: 200rpx;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 50rpx;
            }
    
            .text-area {
        
                display: flex;
                justify-content: center;
            }
    
            .title {
        
                font-size: 36rpx;
                color: #8f8f94;
            }
        </style>

#### 实例图片 ####

![页面滚动跟随][003d88aa8a5d4c8e93ed296fd5b735f3.png]

[003d88aa8a5d4c8e93ed296fd5b735f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/2a4cb33cdcad49529ed2c7f6be6480cf.png