uniapp 学习笔记十使用web-view嵌入网页

布满荆棘的人生 2024-04-08 13:15 80阅读 0赞

![cd19826a8223495bb287d289f13da072.png][]![cf7e22fddd234dc5ad8f955a9704ba90.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" @tap="handleBanner(item.link)"></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'
                },
                handleBanner(link){
                    uni.navigateTo({
                        url:`banner-ad?link=${link}`
                    })
                }
            },
            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>

banner-ad.vue

<template>
        <view>
            <web-view :src="webSrc"></web-view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    webSrc:''
                };
            },
            onLoad({link,key2,type}) {
                console.log(link);
                this.webSrc = `${link}` //${link}&key2=${key2}&type=${type}
            }
        }
    </script>
    
    <style lang="scss">
    
    </style>

[cd19826a8223495bb287d289f13da072.png]: https://img-blog.csdnimg.cn/cd19826a8223495bb287d289f13da072.png
[cf7e22fddd234dc5ad8f955a9704ba90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/05bac898017c4617b91abaaa0fbe471e.png