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

最新推荐文章于 2024-04-14 15:51:14 发布

ggome

最新推荐文章于 2024-04-14 15:51:14 发布

阅读量575

点赞数

分类专栏： uni-app 文章标签： uni-app javascript vue.js

本文链接：https://blog.csdn.net/gixome/article/details/127052258

版权

uni-app 专栏收录该内容

109 篇文章 41 订阅

订阅专栏

页面滚动跟随

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>
                
                
                
                <!-- 推荐模板 -->
                <!-- <IndexSwiper></IndexSwiper>
                <Recommend></Recommend>
                <Card cardTitle='猜你喜欢'></Card>
                <CommodityList></CommodityList> -->
                
                <!-- 其他模板: 运动户外 美妆... -->
                <!-- <Card cardTitle='运动户外'></Card>
                <Banner></Banner>
                <Icons></Icons>
                <Card cardTitle='热销爆品'></Card>
                <Hot></Hot>
                <Card cardTitle='店铺推荐'></Card>
                <Shop></Shop>
                <Card cardTitle="为您推荐"></Card>
                <CommodityList></CommodityList>
                -->
            </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>