zoukankan      html  css  js  c++  java
  • vue中使用better-scroll的2种方式简述

      前言

       better-scroll官方demo展示:https://ustbhuangyi.github.io/better-scroll/#/examples/en

       better-scroll官方文档说明:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll

          

       方法一:官方文档推荐的方法

    <template>
         <div class="wrapper">
               <ul class="content">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
               </ul>
         </div>
    </template>
    <script>
    import BScroll from 'better-scroll'
    export default {
         name: 'CityList',
         mounted () {
               this.scroll = new BScroll('.wrapper')
         }
    }

       注: 上面代码中better-scroll是作用在外层 wrapper 容器上的,必须有这个父容器包裹,

          滚动部分是子元素content ,也就是滚动的内容

           better-scroll只处理父容器wrapper的第一个子元素content的滚动,其它的元素都会被忽略

           比如你在上面的<ul class="content"></ul>后面在添加一个同级<ul class="content2"></ul>

           被.content2包裹的内容是不会滚动的

       方法二:用vue的ref属性获取wrapper节点

    <template>
         <div class="main" ref="wrapper">
               <ul class="content">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
               </ul>
         </div>
    </template>
    <script>
    import BScroll from 'better-scroll'
    export default {
         name: 'CityList',
         mounted () {
               this.scroll = new BScroll(this.$refs.wrapper)
         }
    }

       注: ref的作用是给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上

           如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件

           上面的代码中,ref指的就是DOM元素.wrapper

          ② this.$refs.wrapper是获取到DOM元素.wrapper

     

  • 相关阅读:
    使用ViewPager实现三个fragment切换
    handler
    Android 源码解析之AsyncTask
    android的生命周期
    安卓在SQLiteOpenHelper类进行版本升级和降级
    安卓ListView操作的两种方法
    表格布局TableLayout
    线性布局和相对布局
    遇到tomcat端口被占用问题解决方案
    easyUI笔记09.03
  • 原文地址:https://www.cnblogs.com/tu-0718/p/11342506.html
Copyright © 2011-2022 走看看