uni-app scroll-view中属性scroll-into-view失效

uni-app scroll-view中属性scroll-into-view失效

示例代码：

<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 300rpx;" :scroll-into-view="chatViewId">
<view v-for="(item,index) in datalist" :key="index" class="contentbox" :id="'' + item.id">
<text class="t1" >{{item.name}}:</text>
<text class="t2">{{item.conten}}</text>
</view>
</scroll-view>  

data() {
return {
chatViewId: '',
},
watch:{
datalist:{
handler(val,nervel){
console.log(nervel);
let len = this.datalist.length - 1;
const id = this.datalist[len].id;
this.chatViewId = '' + id;
},
deep:true
},
},
}

操作步骤：

<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 300rpx;" :scroll-into-view="chatViewId">
<view v-for="(item,index) in datalist" :key="index" class="contentbox" :id="'' + item.id">
<text class="t1" >{{item.name}}:</text>
<text class="t2">{{item.conten}}</text>
</view>
</scroll-view>  

data() {
return {
chatViewId: '',
},
watch:{
datalist:{
handler(val,nervel){
console.log(nervel);
let len = this.datalist.length - 1;
const id = this.datalist[len].id;
this.chatViewId = '' + id;
},
deep:true
},
},
}

预期结果：

实现自动滚动定位到最后相应的元素上；

实际结果：

没有滚动效果


| 信息类别       | 信息内容          |
|----------------|-------------------|
| 产品分类       | uniapp/App        |
| PC开发环境     | Windows           |
| PC版本号       | windows10         |
| HBuilderX类型  | 正式              |
| HBuilderX版本号| 3.2.3             |
| 手机系统       | Android           |
| 手机系统版本号  | Android 9.0       |
| 手机厂商       | 小米              |
| 手机机型       | 6/7/X             |
| 页面类型       | nvue              |
| 打包方式       | 云端              |
| 项目创建方式   | HBuilderX         |

更多关于uni-app scroll-view中属性scroll-into-view失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

用新闻模板试试 https://github.com/dcloudio/uni-template-news/blob/master/pages/news/index.nvue

更多关于uni-app scroll-view中属性scroll-into-view失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


scroll-into-view 在 nvue 页面中确实存在一些限制。根据你的代码和配置，问题可能出在以下几个方面：

  1. nvue 页面的特殊性：在 nvue 中，scroll-into-view 需要确保目标元素已经渲染完成。你的代码在 datalist 变化后立即设置 chatViewId，但此时新的视图可能还未完成渲染。

  2. 异步渲染问题：建议在设置 scroll-into-view 时使用 $nextTick 确保 DOM 更新完成：

watch: {
  datalist: {
    handler(val, oldVal) {
      this.$nextTick(() => {
        let len = this.datalist.length - 1
        if (len >= 0) {
          const id = this.datalist[len].id
          this.chatViewId = '' + id
        }
      })
    },
    deep: true,
    immediate: true
  }
}

  1. ID 格式验证：确保 item.id 的值符合 scroll-into-view 的要求（不能以数字开头，建议使用字母开头）。

  2. 样式检查：确认 scroll-view 的高度设置正确，且内部元素没有超出容器。

如果上述方法仍无效，可以考虑使用 scroll-view 的 scrollTo 方法作为替代方案：

// 在模板中添加 ref
<scroll-view ref="scrollView" ...>

// 在方法中调用
this.$nextTick(() => {
  this.$refs.scrollView.scrollTo({
    animated: true
  })
})
回到顶部