better-scroll插件 api

Vue中的better-scroll插件

在需要的文件中添加
import BScorll from ‘better-scroll‘;
引用的示例代码:
let scroll = new BScroll(Dom对象, {//options
  startX: 0,
  startY: 0
})

Vue获得Dom对象方法,
<div v-el:food-wrapper></div>//定义对象
this.$els.foodWrapper//获取对象

(Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象)

为了解决上面的问题,运用Vue的nextTick();
(简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面,比如setTimeout(fn, 0),这样DOM更新后,就会立即执行这块代码。)

// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

问题: 
PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

selectMenu(index,event){
    if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
        return;
    }
}

参数说明:

  • startX: 0 开始的X轴位置
  • startY: 0 开始的Y轴位置
  • scrollY: true 滚动方向
  • click: true 是否启用click事件
  • directionLockThreshold: 5
  • momentum: true 是否开启动量动画,关闭可以提升效率
  • bounce: true 是否启用弹力动画效果,关掉可以加速
  • selectedIndex: 0
  • rotate: 25
  • wheel: false 是否监听鼠标滚轮事件
  • snap: false 自动分割容器,用于制作走马灯效果等
  • snapLoop: false
  • snapThreshold: 0.1
  • swipeTime: 2500
  • bounceTime: 700 弹力动画持续的毫秒数
  • adjustTime: 400
  • swipeBounceTime: 1200
  • deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01
  • momentumLimitTime: 300
  • momentumLimitDistance: 15
  • resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔
  • preventDefault: true 是否阻止默认事件
  • preventDefaultException: { tagName: - /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
  • HWCompositing: true 是否启用硬件加速
  • useTransition: true 是否使用CSS3的Transition属性,否则使用requestAnimationFram代替
  • useTransform: true 是否使用CSS3的Transform属性
  • probeType: 1 滚动的时候会派发scroll事件,会截流。2滚动的时候实时派发 - scroll事件,不会截流。 3除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件

Events 事件

let scroll = new BScroll(document.getElementById(‘wrapper‘),{
   probeType: 3
})

scroll.on(‘scroll‘, (pos) => {
  console.log(pos.x + ‘~‘ + posx.y)
  ...
})

Events 列表

  • beforeScrollStart 滚动开始之前触发
  • scrollStart 滚动开始时触发
  • scroll 滚动时触发
  • scrollCancel 取消滚动时触发
  • scrollEnd 滚动结束时触发
  • flick
  • refresh
  • destroy 销毁better-scroll实例时触发

派发滚动

let scroll = new BScroll(document.getElementById(‘wrapper‘))
scroll.scrollTo(0, 500)
...

-----------------------------------

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>

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

在要获取的dom元素上添加

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

2、移动端经常会有这种场景
数据是横行滚动的,这个时候也是better-scroll 只不过这回改成横向滚动的就行
this.picScroll = new BScroll(this.$refs.pic_scroll, {
                            // better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制
                            click: true,
                            scrollX: true,
                            eventPassthrough: ‘vertical‘
                        });
3、动态DOM使用 better-scroll  在vue 中如果使用 v-show 控制一个dom的显示隐藏并且这个 dom 中要有 better-scroll 的效果,在v-show 控制显示的地方调用初始化better-scroll的函数便可以,但是一定要放到this.$nextTick 里面,因为 vue 中 dom都是异步加载。

 // 筛选
            chooseScreenShop () {
                // tab 高两
                this.screenTabtHight = !this.screenTabtHight;
                // 去除其它高亮显示
                this.classification = false;
                this.sortHightLight = false;
                // 筛选
                if (this.screenTabtHight === true) {
                    this.screenShopList = true;
                    this.$nextTick(() => {
                        this._init();
                    });
                    // 其他的隐藏
                    this.sortShopList = false;
                    this.classificationBox = false;
                } else {
                    this.screenShopList = false;
                }
                this.dailog();
            },

 
时间: 2024-10-21 10:30:54

better-scroll插件 api的相关文章

开发自己的One Page Scroll插件(二)

开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关注它在手机上的效 果,其实到目前我也没有关注这个问题.但其实我使用了一个简单的解决方案.通过检测和转换数据,从而在手机上同样能执行init_scroll方法.但是 这样做不总能达到效果,比如Android系统的浏览器中.所以我最终我最终实现了一个fallback来让插件回退到本地的scrolling

TreeView插件 API

一. 安装 1. 在html中引入 fuelux.treeview.min.js 2. 插入html代码: <div id="tree1" class="tree"></div>     3.插入script代码: dataSource = function(parentData, callback){ ../ }); $('#tree1').ace_tree({ dataSource: dataSource });   4.插件的Optio

fullPage.js全屏滚动插件API

API sectionsColor:['green','orange','red','lime']; //设置背景颜色 可以为每一个section设置background-color属性 controlArrows: 定义是否通过箭头来控制slide幻灯片,默认为true,当我们设置为false,则幻灯片左右的箭头消失,在移动端上我们可以通过滑动来控制幻灯片 verticalCentered: 每一页的内容是否垂直居中,默认为true resize: 字体是否随着窗口缩放而缩放,默认为false

插件api

public class TextBoxes extends AnAction { // If you register the action from Java code, this constructor is used to set the menu item name // (optionally, you can specify the menu description and an icon to display next to the menu item). // You can

MUI - Scroll插件的使用

http://dev.dcloud.net.cn/mui/ui/#scroll scroll(区域滚动) 在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题: Android平台4.0以下不支持div滚动 Android平台4.0以上支持div滚动,但不显示滚动条 弹出层的div滚动在iOS平台存在事件透传的问题 因此,mui额外提供了区域滚动组件,使用时需要遵循如下DOM结构 <div class="mui-scroll-wrapper"> &l

gchart 插件API

data: 一个二维数组,参数类型如下:[[153, 60, 52], [113, 70, 60], [120, 80, 40]] size: 图片显示的大小 ( width x height ) 300x200 type: 前面已经说过了 这里不再累述 xis_labels : 横轴文字 legend :图例 bar_width : 20 默认 20 条形宽度 bar_spacing : 1 默认1 条形间距 colors : ['4b9b41','81419b','41599b'] 图例显示

jQueryValidation插件API 学习

一般格式: $('').viladata({ rules:{ username:{ required:true, maxlength:2, minlength:10, remote:{ url:"remote.json", type:"post", data:{ loginTime:function(){ return +new Date; } } } }, userage:{ required:true, maxlength:2, minlength:10 },

angular-ui-bootstrap插件API - Pagination

Pagination: 案例 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href='../node_modules/bootstrap/dist/cs

Swiper说明&amp;&amp;API手册

最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.php http://www.idangero.us/sliders/swiper/index.php 一了解SwiperSwiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设备支持的话).主要使用与移动端的网站.网页应用程序(web apps),以及原生的应用程序(na