封装scroll-view，把scroll-into-view作为props赋值
chentc
- 发布：2023-04-10 10:33
- 更新：2024-08-16 17:47
- 阅读：441
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10教育版
HBuilderX类型： 正式
HBuilderX版本号： 3.7.9
第三方开发者工具版本号： 1.06.2301171
基础库版本号： 2.30.4
项目创建方式： HBuilderX
操作步骤：
预期结果：
正常滚动到该元素
正常滚动到该元素
实际结果：
没有滚动到该元素
没有滚动到该元素
bug描述：
直接用scroll-view设置scroll-into-view是可以滚动到指定元素，但是封装成组件后在微信小程序中scroll-into-view会失效。
h5中都是正常的！
<scroll-view scroll-y="true" :scroll-into-view="scrollInto" @scroll="onScroll">
<block v-for="(item, index) in content" :key="index">
<view :id="''+index">{{item}}</view>
</block>
</scroll-view>data() { return { /*竖向滚动条的位置*/ scrollInto: 'scr-0',content: [] } },
methods: { itemAdd() { var len = this.$data.content.length; this.$data.content.push('测试.' + len) ;this.$data.scrollInto = '' + len; } }
//原生组件，h5页面 不正常，微信小程序 正常；
//自定义组件，都不正常//改成这个的代码，原生组件，都正常；
//自定义组件，h5 正常，微信小程序 不正常；
setTimeout(() => {;this.$data.scrollInto = '' + len;}, 200)hbuilder x 4.24
WeChatLib: 3.5.4
1234554321
scroll-view :scroll-top="scrollTop" class="scroll-content"
data: {scrollHg: 0,scrollTop: 0}
uni.createSelectorQuery().select('.scroll-content').scrollOffset(rs=>{
if( page.scrollHg === 0 ){ page.$data.scrollHg = rs.scrollHeight; return; }
var hg = page.scrollHg;
if( hg != rs.scrollHeight ){
page.$data.scrollHg = rs.scrollHeight;
page.$data.scrollTop = rs.scrollHeight;
}
}).exec()
使用这种方式解决了
2024-08-19 11:35