uniapp 学习笔记七产品页返回顶部功能实现

爱被打了一巴掌 2024-04-08 12:57 70阅读 0赞

![801ef88770ac47798893ae5236813add.png][]

滚动到指定位置 显示返回图标

滚动到指定位置返回,点击图标返回指定位置

<template>
        <scroll-view class="scroll-cont" :scroll-into-view="topItem" @scroll="handleScroll" scroll-y="true" scroll-with-animation="true">
            <view>
                <view id="top"></view>
                
                <nav-custom></nav-custom>
                
                <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item v-for="(index,item) in 3">
                        <image src="../../static/logo.png" mode=""></image>
                    </swiper-item>
                </swiper>
                <home-title
                    title="本季推荐" 
                    en-title="Seasonal Recommend" 
                    en-tit="Seasonal" 
                ></home-title>
                <scroll-view scroll-x="true" >
                    <view class="scroll-inner">
                        <image src="../../static/logo.png" mode="heightFix"></image>
                        <image src="../../static/logo1.png" mode="heightFix"></image>
                        <image src="../../static/logo.png" mode="heightFix"></image>
                        <image src="../../static/logo1.png" mode="heightFix"></image>
                    </view>
                </scroll-view>
                
                <home-title
                    title="法式经典" 
                    en-title="French Classic" 
                    en-tit="French" 
                ></home-title>
                <image class="classify" src="../../static/logo.png" mode=""></image>
                
                <view class="flex flex-wrap padding-sm justify-between">
                    <good-item v-for="(item,index) in 4"></good-item>
                </view>
                
                <view class="back-top" v-if="isShowGoTop" @tap="handleBackTop">
                    <text class="iconfont icon-huidingbu"></text>
                </view>
            </view>
        
        </scroll-view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    isShowGoTop:false,
                    topItem:'' //返回顶部的标记点
                }
            },
            methods: {
                handleScroll(ev){
                    // console.log(ev.detail);
                    let {scrollTop} = ev.detail
                    this.isShowGoTop = scrollTop >600
                    this.topItem = '' //重置定位返回点
                },
                handleBackTop(){
                    this.topItem = 'top'
                }
            }
        }
    </script>
    
    <style lang="scss">
    .back-top{
        height: 100upx;
        width: 100upx;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.4);
        position: fixed;
        bottom: 40upx;
        right: 20upx;
        text-align: center;
        line-height: 100upx;
    }
    .classify{
        height: 380upx;
        width: 100%;
    }
    .scroll-inner{
        white-space: nowrap;
        image{
            height: 290upx;
            width: auto;
        }
    }
    
    .banner{
        height: 1000upx;
        swiper-item{
            height: 1000upx;
        }
        image{
            width: 100%;
            height:1000upx
        }
    }
    .scroll-cont{
        height: 100vh;
    }
    </style>

goods-item.vue

<template>
        <view class="cake-item">
            <view class="poster">
                
            </view>
            <view class="info-cont">
                <view class="info flex align-center justify-between">
                    <view class="">
                        <view class="fs-28">
                            黄油咖啡                            
                        </view>
                        <view class="fs-16">
                            Huangyou Coffee
                        </view>
                    </view>
                    <view class="cart-btn margin-right-sm">
                        <text class="iconfont icon-caigou"></text>
                    </view>
                    
                </view>
                <view class="fs-18">
                    <text class="fs-14">Y</text>
                    218.00
                </view>
                
            </view>
        </view>
        
    </template>
    
    <script>
        export default {
            name:"goods-item",
            data() {
                return {
                    
                };
            }
        }
    </script>
    
    <style lang="scss">
    .cake-item{
        width: 350upx;
        .poster{
            height: 350upx;
            background-color: #f5f5f5;
        }
        .fs-28{
            font-size: 28upx;
            margin-top: 24upx;
        }
        .fs-16{
            font-size: 16upx;
            margin: 14upx 0;
        }
        .fs-18{
            font-size: 18upx;
            margin-bottom: 22upx;
        }
        .cart-btn{
            width: 60upx;
            height: 60upx;
            border-radius: 50%;
            background-color: #ffe32a;
            text-align: center;
            line-height: 60upx;
        }
    }
    
    </style>

main.js

// 全局引入自定义组件
    import NavCustom from '@/components/nav-custom.vue'
    Vue.component('nav-custom',NavCustom)
    
    import HomeTitle from '@/components/home-title.vue'
    Vue.component('home-title',HomeTitle)
    
    import GoodItem from '@/components/goods-item.vue'
    Vue.component('good-item',GoodItem)

[801ef88770ac47798893ae5236813add.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2524a26799904111bdec1d37fe443e59.png