uniapp 学习笔记九使用自定义异步方法请求并渲染banner

柔光的暖阳◎ 2024-04-08 13:15 46阅读 0赞

![c10b3df86f0a4b93bda0261d39ddeb5f.png][]

homee.vue

<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="(item,index) in banner" :key="item.objectId">
                        <image :src="item.img" 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>
        // 局部引入封装的 promise $http
        import {$http} from '@/utils/request.js'
        export default {
            data() {
                return {
                    isShowGoTop:false,
                    topItem:'', //返回顶部的标记点
                    banner:[]
                }
            },
            methods: {
                handleScroll(ev){
                    // console.log(ev.detail);
                    let {scrollTop} = ev.detail
                    this.isShowGoTop = scrollTop >600
                    this.topItem = '' //重置定位返回点
                },
                handleBackTop(){
                    this.topItem = 'top'
                }
            },
            onLoad() {
                // 方法三 使用全局封装的 $get方法
                this.$get('/1.1/classes/banner').then(res=>{
                    console.log(res);
                    this.banner = res.results //取回数据并指定到swiper
                })
                
            }
        }
    </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>

自定义的方法 见上一篇文章

[c10b3df86f0a4b93bda0261d39ddeb5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ba726e4064a6407ba602c787f8482e2c.png