scrollTop这个DOM API不生效

分类：uni-app x

DOM vuex

<view style="height: 100px; background-color: #ececec;">  
            <list-view ref="listView" style="height: 100px;" :scroll-into-view="lastItemId">  
                <list-item v-for="(item,index) in getBleDataList" :key="index" type=0 :style="{flexDirection: 'row'}" :id="'listItem' + index">  
                    <view style="flex-direction: row; width: 80px;">  
                        <text v-if="getSendTimeIsSelected" style="color: grey; font-size: 14px;">{{(item as bleDataObj).timeStr}}</text>  
                        <text v-if="isReciveData(item as bleDataObj)" style="color: orange; font-size: 14px;">-></text>  
                        <text v-else style="color: #00ff7f; font-size: 14px;"><-</text>  
                    </view>  
                    <text  
                        v-if="getSendDataIsSelected" :style="{color: '#000000', fontSize: '14px', width: appwidth - 80 + 'px'}">{{(item as bleDataObj).dataStr}}</text>  
                </list-item>  
            </list-view>  
        </view>

我这里是一个list-view，我现在的场景是我收到数据就会重新渲染这个list-view，并且我想让他内容在最下面，我把这个list-view封装成了一个组件，在其他页面复用，之后我在收到数据源发生改变的时候调用DMO API

initProperty() {  
                this.appwidth = KLDSysUtil.getInstance().getAppWidth()  
                bleDataIsChange({  
                    success: () => {  
                        this.$nextTick(() => {  
                            this.$forceUpdate()  
                            this.scrollToBottom()  
                        })  
                    },  
                })  
            },  

            // list-view滚动到底部  
            scrollToBottom () {  
                const listView = this.$refs["listView"] as UniElement  
                const height = listView.scrollHeight  
                listView.scrollTop = height as number  
                // console.log("从" + this.lastItemId);  
                // if (!KLDSysUtil.getInstance().arrayIsEmpty(KLDBleStateObjc.bleDataList)) {  // 该方式官方可能存在问题，暂时使用上面的方式  
                //  // 更新最后一个列表项的 ID  
                //  this.lastItemId = "listItem" + (KLDBleStateObjc.bleDataList.length - 1);  
                // } else {  
                //  this.lastItemId = ""; // 无数据时清空  
                // }  
                // console.log("滚动到" + this.lastItemId);  
            },

发现无法实现效果，最开始想着是使用scroll-to-view的方式实现，但是也不生效，后来在论坛里发现了有人说在组件中使用这个属性不生效，所以现在想着用DOM API的方式，这个DOM API我在非组件页面，就是只有一个lies-view页面的里面使用是生效的，难道在组件中，这个API也不生效了么，有什么解决方案么

2025-05-21 09:13 负责人:无分享

2 个回复

2***@qq.com

看看listView 取回来是不是个array 滚动到底直接 +99999 不用计算

Somnus040 (作者)

好的，我再看一下，我发现我复用了4个页面，之后在最后一个加载的这个对象生效了，之前的三个都不会滚动到最下面

2025-05-21 10:30
Somnus040 (作者)

确实是这样，为什么呢，比如我有3个页面都是相同的方式直接复用的这个对象，只有第三个能自动滚动到最下面，第一个第二个都不行

2025-05-21 10:34
2***@qq.com

回复 Somnus040: 动态修改ref名 ref="listView"

2025-05-21 11:32
2***@qq.com

回复 Somnus040: 加载哪个滚动哪个为什么要同时滚动好几个

2025-05-21 11:35
Somnus040 (作者)

回复 2***@qq.com: 但是我这个页面用了swiper，这三个swiper都有这个控件，他一下子就加载了3个，只是当前能看到一个，我试着写了动态的ref，在每个页面复用这个view的地方传入了一个名称代表ref，还是不行，是因为我是在这个控件内部实现的方法么，我要改成3个swiper去调用方法么

2025-05-21 13:23
2***@qq.com

回复 Somnus040: 我用scroll-view没问题

2025-05-21 14:44

2***@qq.com

<swiper :indicator-dots="true" @change="(e)=>current=e.detail.current" :current="current" :autoplay="false" :interval="3000" :duration="1000">  
            <swiper-item>  
                <scroll-view scroll-y :scroll-top="aaa" class="works-list">  
                    <div class="works-item" v-for="n in worksList" :key="n.id"  
                        @click="navTo(`/pages/aiText/result`,JSON.parse(n.output_data))">  
                        <div class="time">{{n.created_at}}</div>  
                        <div class="title">{{JSON.parse(n.output_data).content}}</div>  
                    </div>  
                </scroll-view>  
            </swiper-item>  
            <swiper-item>  
                <scroll-view scroll-y :scroll-top="bbb" class="works-list">  
                    <div class="works-item" v-for="n in worksList" :key="n.id"  
                        @click="navTo(`/pages/aiText/result`,JSON.parse(n.output_data))">  
                        <div class="time">{{n.created_at}}</div>  
                        <div class="title">{{JSON.parse(n.output_data).content}}</div>  
                    </div>  
                </scroll-view>  
            </swiper-item>  
        </swiper>  

if(current.value==0){  
            aaa.value =9999  
        }else{  
            bbb.value =999  
        }

Somnus040 (作者)

解决了，感谢，是我这边回调给覆盖了，您的思路没问题

2025-05-21 15:21

要回复问题请先登录或注册

scrollTop这个DOM API不生效

2 个回复

公告

相关问题

scrollTop这个DOM API不生效

与内容相关的链接

2 个回复

公告

相关问题