uniapp微信小程序遇到scroll-into-view不生效的问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序遇到scroll-into-view不生效的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简单做个记录

正常按照uni官方文档配置就好，之前项目也做过类似需求，但是前两天遇到了设置不生效的问题。

一、想到的几个可能情况：

1、scroll-view 没有高度。

方式1：初始高度设置为0 通过flex: 1 1auto;填充满剩余高度

<scroll-view :scroll-y="true" style="height: 0" :scroll-into-view="defaultId" class="match-list border-box u-flex-fill u-flex-column">
    <view>something</view>
</scroll-view>

方式2：本地项目使用的方式，页面创建完成获取父元素高度减去固定的比如输入框等元素高度来设置scroll-view的高度(第一版)

// template
<scroll-view class="im-message-list" id="refMsgList" scroll-y="true" :style="{ height: contentHeight - 90 + 'px' }" :scroll-into-view="scrollIntoIndex">
    <view>something</view>
</scroll-view>


// script
initHeight() {
            let screenHeight = uni.getSystemInfoSync().screenHeight;

            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .select('.tab-content')
                    .boundingClientRect((data) => {
                        const contentHeight = screenHeight - data.top;
                        this.contentHeight = contentHeight - uni.getSystemInfoSync().statusBarHeight - 80;
                    })
                    .exec();
            });
        },

2、scroll-into-view和子元素的id设置有问题(经测试设置没问题)

二、最终处理方式：

调整scroll-view高度设置，在js中计算完成了再放到标签style属性内

// template
<scroll-view class="im-message-list" id="refMsgList" scroll-y="true" :style="{ height: messageHeight }" :scroll-into-view="scrollIntoIndex">
    <view>something</view>
</scroll-view>


// script
initHeight() {
            let screenHeight = uni.getSystemInfoSync().screenHeight;

            this.$nextTick(() => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .select('.tab-content')
                    .boundingClientRect((data) => {
                        const contentHeight = screenHeight - data.top;
                        this.contentHeight = contentHeight - uni.getSystemInfoSync().statusBarHeight - 80;
                        this.messageHeight = `${this.contentHeight - 90}px`
                        if (this.messageList.length) {
                            const index = this.messageList[this.messageList.length - 1]?.id
                            this.scrollIntoIndex = `chat-${index}`
                        }
                    })
                    .exec();
            });
        },

具体为什么初版不生效还不清楚，有可能模板内语法有问题，但是我看着没毛病哈哈哈。。。。文章来源地址https://www.toymoban.com/news/detail-844835.html

到了这里，关于uniapp微信小程序遇到scroll-into-view不生效的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！