uni-app 地图漂浮问题，app端地图组件在不会随着页面滚动而滚动，会漂浮起来。h5，小程序没这问题

1***@163.com - 前端

8***@qq.com

1***@qq.com - 爱吃栗子

sunow

w***@outlook.com

9***@qq.com

DCloud_uniAD_HDX

cxk敲代码啦 - cxk

东京蜀黍

不实用scrollview 直接使用view 可以解决滑动的时候出现的不跟着滚动问题

这是使用scrollview

这是使用view

男色经典

深圳奥飞网络

l***@163.com - test

前端JASON - 接单uniapp项目&插件/联系front_jason/主页daxiong.site

caozeng - zzzzzzzzz

caozeng - zzzzzzzzz

前端JASON - 接单uniapp项目&插件/联系front_jason/主页daxiong.site

直接使用页面原生滚动，不要用scrollView包裹

---

以下是demo代码

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  

        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  

        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  

        <map style="width: 700rpx; height: 300px;" :latitude="39.909" :longitude="116.39742"></map>  

        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  

        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  

        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        },  
        onPullDownRefresh() {  
            uni.showToast({  
                icon: 'none',  
                title: '开始下拉刷新'  
            })  
            setTimeout(() => {  
                uni.stopPullDownRefresh()  
            }, 2000)  
        }  
    }  
</script>

前端JASON - 接单uniapp项目&插件/联系front_jason/主页daxiong.site

**vue开发的页面使用subNVue去解决层级

---

预览

pages.json**

{  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app",  
                "enablePullDownRefresh": true,  
                "app-plus": {  
                    "subNVues": [{  
                        "id":"bottom-bar",  
                        "path":"./pages/index/subNVue/bottom-toolbar",  
                        "style": {  
                            "position":"absolute",  
                            "bottom":"0",  
                            "height":"50px"  
                        }  
                    }]  
                }  
            }  
        }

bottom-toolbar.nvue

<template>  
    <view class="bottom-bar">  
        <input class="input" type="text" v-model="msg" placeholder="请输入内容" />  
        <text class="send">发送</text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                msg: ''  
            }  
        }  
    }  
</script>  

<style>  
.bottom-bar {  
    background-color: #333333;  
    flex-direction: row;  
    color: #FFFFFF;  
}  
.input {  
    flex: 1;  
    color: #FFFFFF;  
}  
.send {  
    color: #007AFF;  
}  
</style>

原页面不用做改动