better-scroll的使用方法

移动端经常会用页面高度超过了手机屏幕的高度,但是有没有滚动条的出现这时候就用 better-scroll 这个插件, iscroll 是常用的但是这个组件没有人在维护了,导致很多的问题没有办法解决。

better scroll 的页面结构为

<div class="shop_box" ref="shopBox">
        <div class="shop_container">

            <div class="shop_header">

            </div>

        </div>
</div>        

第一层 div:
    高度固定比如是手机屏幕的高度,overflow-y:hidden;
第二层 div:
    高度不固定,只设置宽度 100%。
第三层 div:
    数据部分,肯能有很多很多

1、vue2 中如何使用 better-scroll

首先安装better-scroll,然后在配置文件中查看

"dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^2.3.1",
    "vue-resource": "^1.3.3",
    "better-scroll": "^0.1.7"
  },

然后在要用的地方引用这个组件

import BScroll from ‘better-scroll‘;

接下来初始化这个组件,在methods 里面将这个写为一个方法

_initScroll () {
                this.shopBoxScroll = new BScroll(this.$refs.shopBox, {
                    // better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制
                    click: true
                });
            }

然后在函数钩子里面调用这个方法,因为mvvm 框架的数据是一步的所以要在函数周期里面使用

created () {
            this.$nextTick(() => {
                this._initScroll();
            });
        },

在页面中要调用的地方

<div class="shop_box" ref="shopBox">

整体为:

<script>
    import starT from ‘../star/star.vue‘;
    import BScroll from ‘better-scroll‘;

    export default {
        props: {
            seller: {
                type: Object
            }
        },
        created () {
            this.$nextTick(() => {
                this._initScroll();
            });
            this.classMap = [‘min‘, ‘discount‘, ‘guarantee‘, ‘invoice‘, ‘special‘];
        },
        methods: {
            _initScroll () {
                this.shopBoxScroll = new BScroll(this.$refs.shopBox, {
                    // better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制
                    click: true
                });
            }
        },
        components: {
            ‘v-star‘: starT
        }
    };
</script>

(总结):在 vue2中如何获取dom 结构

在要获取的dom元素上添加

ref="shopBox"这样在 js 中
$refs.shopBox便可以获取dom 元素。有时候经常汇报better-scroll 找不到孩子元素原因是:html 中 ref="" 中间不要用空格尽量用驼峰命名
时间: 2024-11-05 16:30:34

better-scroll的使用方法的相关文章

ngui3.5.7 版本Scroll View实现方法

现在网上的教材都是老版本的,现在的版本并没有Drag Panel Contents脚本,所以我对着现在的DEMO琢磨出了实现方法 第一,创建NGUI ui,其他组件不必创建,我只要NGUI这个摄影机,将这个NGUI设置为2D层,下面子组件都属于2D层 创建Scroll View,之后在下面创建Grid把他里面的脚本去掉,添加UICenterOnChild这个脚本,之后在Grid下面创建你要用的组件,在这些组件上添加UIDrag Scroll View和UICenter On Click 还有Bo

scroll()和scrollTop()方法——实现电商网站中的电梯导航

要想实现电商网站的电梯导航效果,首先需要了解以下知识点: jquery 事件 - scroll() 方法 对元素滚动的次数进行计数,当用户滚动指定的元素时,会发生 scroll 事件.scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口).scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. jquery CSS 操作 - scrollTop() 方法 设置元素中滚动条的垂直偏移,scrollTop() 方法返回或设置匹配元素的滚动

Intellij IDEA插件 - Scroll From Source

以前用Eclipse的时候,有一个"Link with Editor",即下面红色框住的图标.作用是展开当前打开的文件所在的目录树 后来转到idea以后,也有这么一个类似的图标可以点击,效果一模一样,功能名改为了"Scroll From Source",即下面红色框住的图标. 不过自从换了Mac以后,鼠标已经被我丢弃了,所以快捷键对我来说是越多越好.但是不幸的是,这个功能居然不能添加快捷键,这搞得我有时候得用触摸板点击,甚为不爽.而且也有几个用idea的朋友对这点吐

Android之实现滑动的七种方法总结

在android开发中,滑动对一个app来说,是非常重要的,流畅的滑动操作,能够给用户带来用好的体验,那么本次就来讲讲android中实现滑动有哪些方式.其实滑动一个View,本质上是移动一个View,改变其当前所属的位置,要实现View的滑动,就必须监听用户触摸的事件,且获取事件传入的坐标值,从而动画的改变位置而实现滑动. *layout方法 *offsetLetfAndRight()与offsetTopAndBottom() *LayoutParams *scrollTo与scrollBy

11window对象的属性和方法

Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY.FRAMESET或FRAME元素时,都会自动建立window对象的实例.另外,该对象的实例也可由window.open()方法创建.由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用.例如:window.document.write()可以简写成: document.write(). 在窗口中觖发本窗口对象

window对象的方法和属性汇总【总结--window对象】

window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture

window对象的方法和属性汇总

open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture handleEvent rel

获取页面scroll高度

记录一下获取 scroll 高度的方法 经实际测试: document.body.scrollTop 在 chrome 下会返回0. 所以 document.documentElement.scrollTop 或者 window.pageYOffset 需要一起判断, 做一下兼容 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 获取视口区域的高

Scroll事件不能取消冒泡问题

mdn上写了,scroll事件冒泡并不能被取消:https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event 我当前遇到一个业务就是,在h5页面内,整个页面需要支持上下滑(touchstart/touchmove/touchend,changePage())切换页面,又要支持页面内某个区域内(scrollRegion)可以滚动(scroll)查看list. 一旦scroll,一定会被冒泡到touchstart/tou

python使用mysql数据库

一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可. Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的linux 仓库中都会有mysql ,我们只需要通过一个命令就可以下载安装: Ubuntu\deepin >>sudo apt-get install mysql-server >>Sudo apt-get install  mysql-client centOS/redhat >