不用scroll-view,我用的view组件
时间: 2023-08-26 12:22:26 浏览: 47
如果你使用的是 `View` 组件而不是 `scroll-view` 组件,那么你可以考虑使用 `uniapp` 提供的 `scroll-view` 组件的替代方案,即 `better-scroll` 插件。
`better-scroll` 是一款基于原生 `JavaScript` 的滚动库,可以支持在 `Web` 和 `移动端` 的滚动操作,并且提供了许多实用的功能和扩展性。在 `uniapp` 中使用 `better-scroll` 插件,你可以通过以下步骤来实现滚动效果:
1. 安装 `better-scroll` 插件
```
npm install better-scroll --save
```
2. 在 `main.js` 文件中引入插件,并注册为全局组件
```javascript
import BScroll from 'better-scroll'
Vue.prototype.$BScroll = BScroll
```
3. 在需要滚动的页面中,使用 `v-el` 指令来获取 `View` 组件的 `dom` 对象,并在 `mounted` 钩子函数中创建 `better-scroll` 实例,并进行相关配置和事件监听
```html
<template>
<view class="wrapper" ref="wrapper">
<view class="content">
<!-- your content here -->
</view>
</view>
</template>
<script>
export default {
mounted() {
const wrapper = this.$refs.wrapper
const content = this.$refs.content
const scroll = new this.$BScroll(wrapper, {
scrollY: true,
click: true,
probeType: 3
})
scroll.on('scroll', (pos) => {
// do something
})
}
}
</script>
```
通过以上方式,你可以在 `View` 组件中实现类似 `scroll-view` 组件的滚动效果,并且可以方便地进行自定义配置和事件监听。同时,`better-scroll` 插件也提供了丰富的功能和扩展性,可以满足不同场景下的需求。