Vue中使用滚动组件iscroll

首先安装iscroll

npm install iscroll

创建scroll组件

<template>
  <div id="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import IScroll from 'iscroll/build/iscroll-probe' //专业版本可以监听滚动的细节
export default {
  name: 'ScrollView',
  mounted () {
    this.iscroll = new IScroll(this.$refs.wrapper, {
      mouseWheel: true,//禁用鼠标滚轮
      scrollbars: true, //禁用滚动条
      // 解决拖拽卡顿问题
      scrollX: false,
      scrollY: true, //y方向滚动
      disablePointer: true,
      disableTouch: false,
      disableMouse: true
    })
    // setTimeout(() => {
    //   // console.log(this.iscroll.maxScrollY)
    //   this.iscroll.refresh()
    //   // console.log(this.iscroll.maxScrollY)
    // }, 5000)
    // 1.创建一个观察者的对象
    /*
    MutationObserver构造函数只要监听到了指定内容发生了变化,就会执行传入的回调函数
    MutationList: 发生变化的数组
    observer:观察者对象
     */
    const observer = new MutationObserver((mutationList, observer) => {
      // console.log(MutationList)
      // console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY)
    })
    // 2.告诉观察者对象我们需要观察什么内容
    const config = {
      childList: true, // 观察目标子节点的变化,是否有添加或者删除
      subtree: true, // 观察后代节点,默认为 false
      attributeFilter: ['height', 'offsetHeight'] // 观察特定属性
    }
    // 3.告诉观察者对象,我们需要观察谁,需要观察什么内容
    /*
    第一个参数: 告诉观察者对象我们需要观察谁
    第二个参数: 告诉观察者对象我们需要观察什么内容
     */
    observer.observe(this.$refs.wrapper, config)
  }
}
</script>

<style scoped>
  #wrapper{
    width: 100%; //容器的宽高等于可视区域的宽高
    height: 100%;
  }
</style>

要注意把系统默认滚动关闭

html, body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 解决IScroll拖拽卡顿问题 
  touch-action: none; 
}

并且iscroll容器的高度必须小于内容的高度
容器的宽高等于可视区域的宽高
要给容器设置一个宽高,可以固定定位

.recommend{
  position: fixed;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
}

MutationObserver()
创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

// 1.创建一个观察者的对象
    /*
    MutationObserver构造函数只要监听到了指定内容发生了变化,就会执行传入的回调函数
    MutationList: 发生变化的数组
    observer:观察者对象
     */
    const observer = new MutationObserver((mutationList, observer) => {
      // console.log(MutationList)
      // console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY)
    })
    // 2.告诉观察者对象我们需要观察什么内容
    const config = {
      childList: true, // 观察目标子节点的变化,是否有添加或者删除
      subtree: true, // 观察后代节点,默认为 false
      attributeFilter: ['height', 'offsetHeight'] // 观察特定属性
    }
    // 3.告诉观察者对象,我们需要观察谁,需要观察什么内容
    /*
    第一个参数: 告诉观察者对象我们需要观察谁
    第二个参数: 告诉观察者对象我们需要观察什么内容
     */
    observer.observe(this.$refs.wrapper, config)

在使用iscroll的时候会遇到在PC端项目的点击事件是可以实现的,在chrome模拟器上也可以实现点击效果,但是到了真机上,点击事件就触发不了了,查阅资料得知是插件阻止了浏览器的click事件。

解决方法:
将iscroll里的option.click的默认值false改为true。这样移动端就可以支持点击事件了
在很多的插件中都会有阻止默认行为的设置,但是一般会有相应的参数可以设置来手动修改

this.iscroll = new IScroll(this.$refs.wrapper, {
      moiseWheel: true,
      scrollbars: false,
      // 解决卡顿
      scrollX: false,
      scrollY: true,
      disablePointer: true,
      disableTouch: false,
      disableMouse: true,
      click:true,//添加点击事件
      taps:true
    })
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Vue使用ElementUI组件非常简单,只需要按照以下步骤即可: 1. 安装ElementUI:可以使用npm或yarn进行安装,命令如下: ``` npm install element-ui --save ``` 或者 ``` yarn add element-ui ``` 2. 在Vue项目引入ElementUI:在main.js引入ElementUI并注册组件,代码如下: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在Vue组件使用ElementUI组件:在需要使用ElementUI组件Vue组件,直接使用即可,例如: ```html <template> <div> <el-button type="primary">主要按钮</el-button> </div> </template> ``` 以上就是在Vue使用ElementUI组件的基本步骤,希望能对你有所帮助。 ### 回答2: Vue.js 是一个流行的前端 JavaScript 框架之一,而 Element UI 是面向 Web 开发者的开源 UI 框架。当这两个框架交汇在一起时,就可以创建易于维护和可扩展的 Vue.js 应用程序。 使用 Element UI 组件库可以大大加速 Vue.js 应用程序的开发过程。如果您使用 Element UI,您将能够在几分钟内构建出功能齐全的 UI 功能。它包含许多常用的组件,如表格,菜单,选项卡,表单和按钮。 使用 Element UI 组件库的第一步是在您的 Vue.js 应用程序安装它。要使用 Element UI,您首先需要将它安装到您的项目。您可以通过 npm(Node.js 包管理器)或 Yarn(快速可靠的依赖管理器)来完成此操作。 使用 npm 安装 ElementUI,需要在命令提示符下输入以下命令: ``` npm install element-ui -S ``` 如果您使用的是 Yarn,您可以使用以下命令: ``` yarn add element-ui ``` 一旦您安装了 ElementUI,您就可以在您的 Vue.js 应用程序使用各种 ElementUI 组件了。您需要做的第一件事是将 ElementUI CSS 添加到您的页面。您可以将以下代码添加到您的 index.html 文件: ``` <link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css"> ``` 接下来,在您的 Vue.js 组件引入 ElementUI 组件,例如: ``` <template> <el-button type="primary">Click me!</el-button> </template> <script> import { Button } from 'element-ui' export default { name: 'MyComponent', components: { 'el-button': Button } } </script> ``` 这就是使用 Element UI 组件的基础知识。您可以添加其他组件来构建您的 Vue.js 应用程序,例如对话框,弹出式菜单,警告框等等。这些组件使您的应用程序看起来更专业,使用户体验更加友好。 ### 回答3: Vue.js是一款流行的前端框架,其主要特点是数据的响应式更新和简化了DOM操作。而Element UI是一个开源的基于Vue.js的UI组件库,它提供了一系列的常用组件,能够方便地构建出美观且高效的Web应用程序界面。这里我们来介绍一下如何在Vue.js使用Element UI组件。 第一步:安装Element UI 我们可以通过npm或yarn来安装Element UI。 npm安装: npm i element-ui -S yarn安装: yarn add element-ui 第二步:引入Element UI 在我们的Vue项目使用Element UI,需要先在Vue入口文件main.js引入它,并且使用Vue.use()注册它: import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 这里我们还需要注意,在引入Element UI时,也要同时引入Element UI的CSS样式文件。 第三步:使用Element UI组件 在以上步骤完成之后,我们就可以在vue使用Element UI组件了。例如,我们可以在template使用组件el-button来创建一个按钮: <template> <div> <el-button type="primary">主要按钮</el-button> </div> </template> 这里我们需要注意的是,我们必须在script引入el-button组件: <script> import { Button } from 'element-ui'; export default { components: { 'el-button': Button } } </script> 总结 以上就是在Vue使用Element UI组件的步骤,只需要三个简单的步骤就可以方便地使用Element UI组件,大大加快了我们构建Vue项目的开发效率。Element UI提供了丰富的组件库,可以满足我们在开发过程的大部分需求,所以在项目使用它也是非常不错的选择。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值