scroll-view移动距离如何改变他的scrollTop
时间: 2023-08-19 10:12:11 浏览: 50
要改变scroll-view的scrollTop属性,可以通过在data中定义一个变量来保存scrollTop的值,并在需要改变scrollTop时,将新的值赋给这个变量。然后在更新完成后,再将这个变量的值赋给scrollTop属性。具体的实现方法如下所示:
在data中定义一个变量,例如scrollDistance:
```javascript
data() {
return {
scrollDistance: 0,
// 其他数据...
}
}
```
在scroll-view标签中,将scrollTop属性绑定到scrollDistance变量:
```html
<scroll-view :scroll-top="scrollDistance" class="dataScroll">
<!-- 数据展示 -->
<view class="dataShow">
<!-- 内容 -->
</view>
</scroll-view>
```
在@scroll事件的方法中,将e.detail.scrollTop的值赋给scrollDistance变量:
```javascript
scroll: function (e) {
this.scrollDistance = e.detail.scrollTop;
// 其他操作...
}
```
这样,当scrollDistance的值改变时,scroll-view的scrollTop属性也会相应地改变。
#### 引用[.reference_title]
- *1* *3* [前端项目区域滚动组件之scroll-view](https://blog.csdn.net/weixin_42700654/article/details/125809664)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [scroll-view标签下滑抖动回弹](https://blog.csdn.net/qq_54097544/article/details/131322670)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)