zoukankan      html  css  js  c++  java
  • vue下拉滚动控件 better-scroll

    better-scroll

    安装
    npm install better-scroll --save

    组件中引入
    import BScroll from 'better-scroll'

    使用:

    必须放在$nextTick()

    this.$nextTick(() => {
      // 实例化 参数1 要滚动的Dom的父级元素
      this.foodsscroll = new BScroll(this.$refs.foodsscroll, {
        // 设置3可以监测到滚动的实时位置
        probeType: 3
        // 设置ture 滚动的列表才可以触发点击事件
        click: true
      })
      // 通过scroll事件 获取xy位置
      this.foodsscroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y))
        console.log(this.scrollY)
      })
    })


    指定滚动到具体的元素:

    // el是Dom
    this.scroll_1.scrollToElement(el, 300);

    避免重复实例化

          this.$nextTick(() => {
            if (!this.foodscroll) {
              this.foodscroll = new BScroll(this.$refs.foodscroll, {
                click: true
              });
            } else {
              this.foodscroll.refresh();
            }
          })

    如果刚开始就需要用到的数据是父组件传过来的,那么需要监听better-scroll变化
    watch: {
    // 当数据seller变化时重新渲染dom完成下拉滚动
    seller: ['scroll_1', 'scroll_2']
    },

    横向滚动:

          // 如果有图片数据
          if (this.seller.pics) {
            // 先把需要滚动dom设置宽度
            this.$refs.piclist.style.width = width - margin + 'px'
            // 添加滚动
            this.$nextTick(() => {
              // 如果没有picScroll才去实例化
              if (!this.picScroll) {
                // 实例化BScroll 需要接受两个参数 ( 需要下拉的dom、对象 )
                this.picScroll = new BScroll(this.$refs.picwrapper, {
                  // 设置为横向滚动
                  scrollX: true,
                  // 这个属性 设置它的外层是竖向滚动 而它自己可以横向滚动
                  eventPassthrough: 'vertical'
                })
              }else {
                // 否则调用refresh()方法从新计算
                this.picScroll.refresh()
              }         
            })
          }
  • 相关阅读:
    MySQL 触发器
    MySQL视图
    MySQL中的存储过程和函数
    Mysql数据库连接查询
    数据库(MySQL)表基本操作
    Spring MVC---数据绑定和表单标签
    Spring MVC---基于注解的控制器
    Spring基于AOP的事务管理
    Ubuntu下通过wine安装HeidiSQL
    chmod命令详解
  • 原文地址:https://www.cnblogs.com/gr07/p/8951125.html
Copyright © 2011-2022 走看看