vue项目better-scroll使用注意点

时间: 2019-08-10阅读: 222标签: 项目

1.应该在何时创建BScroll对象

1)created : 中请求数据,ajax是异步的,这个时候可能mounted已经执行完了,也就是dom挂载完了,但数据还没请求回来,无法获取到内部元素(数据渲染出来的dom)高度. 无法渲染内部元素,无法滚动
2)updated:数据发生改变时执行;数据改变,dom也要重新渲染,并执行updated,但无法保证是先dom渲染还是先updated,

//解决:
this.$nextTick(()={
    //操作
    this.scroll = new BScroll(this.$refs.className,{})
})

3)最佳方式:

mounted() {
    this.scroll = new BScroll(this.$refs.scrollWrapper,{})
}
watch: {
    shuju() {
        this.$nextTick(() => {
            this.scroll.refresh();
        })
    }
}


2.拆分better-scroll组件

scroller.vue

<template>
    <div ref="wrapper">
        <div>
        //vue 感知不到slot变化,但能感知数据变化
            <slot></slot>
        </div>
    </div>
</template>
<script>
    import BScroll from 'better-scroll'
    export default {
        props: ['shuju'],
        mounted() {
            this.scroll = new BScroll(this.$refs.wrapper,{})
        },
        watch: {  //保障数据加载dom渲染,刷新
            shuju() {
                this.$nextTick(() => {
                    this.scroll.refresh();
                })
            }
        }
    }
</script>
<style>

</style>
吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/5256

flv.js在vue项目的应用

先取到接口数据,后播放。使用async await关键字实现顺序加载视频 伪代码,在mounted生命周期内渲染视频,lv.js在播放前需要检查是否已创建实例,如果已有实例,则销毁,在重新创建播放器实例。

Vue如何刷新当前页面

项目需求是:在课程详情页 点击 相关课程 还在当前页面看此课程详情;功能实现:这时候点击相关课程需要重新加载刷新当前路由;this.$router.go(0)。这种方法虽然代码很少,只有一行,但是体验很差。

两个项目一个webpack包

文件依赖关系错综复杂,静态资源请求效率低,模块化支持不友好,浏览器对高级JS兼容程度低?那就是时候了解webpack了,webpack 是一个JavaScript 应用程序的静态模块打包构建器。在处理应用程序时, webpack 会递归地构建一个依赖关系图

通过浏览器工作台启动本地项目

一直对通过浏览器工作台启动本地项目感兴趣,类似 vue-cli3 中提供的 vue ui,在浏览器中打开工作台,就能够创建、启动、停止、打包、部署你的项目,很好奇这一系列背后的实现原理。

Nginx如何实现一个域名访问多个项目

最近在个人的多个项目部署中遇到这样一个问题,一个域名如何实现多个项目的访问。因为不想自己单独去申请域名证书和域名配置,便想到了这个方案,结合Nginx的location功能实现了自己的需求,便记录下来。示例中是以PHP的项目演示

spa项目如何计算首屏

对于首屏的定义,浏览器没有给出标准的指标,因为不同网站对于首屏的要求也是不尽相同的。我们从谷歌的第一次有效时间(first meaningfull paint)得到了一些启发,例如,一个新闻网站文字跟字体对于它来说是更重要的

如何创建一个NodeJs命令行交互项目?

通过原生的NodeJs API,可见,argv中第一个参数为node应用程序的路径,第二个参数为被执行的js程序文件,其余为执行参数。通过yargs获取命令行参数,方法如下

为什么程序员熬夜加班,项目还是会延期?

首先这和你熬夜加班没有半毛线关系,千万别自己感动自己,但凡是互联网项目,出现延期是常有的事情。项目延期之后,一般流程是领导开会,大家讨论,新一任背锅侠,然后下一次还是老样子.

如何在 React 项目中整合 Eslint 和 Prettier?

首先,我们使用官方提供的脚手架 create-react-app 来创建一个项目:Eslint 是一个可以检验代码,并给出报告的工具。它的目标是保证代码的一致性,避免错误。Eslint 为我们提供了 ECMAScript/JavaScript 规范的代码校验

React + es6使用双向锚点,动态生成,也适用单页面路由项目

React页面中,不确定有多少个需要定位的块,根据元素块的个数,生成对应数量的锚点,点击锚点后页面滚动到指定的块。 页面滚动到指定的块,对应的锚点高亮。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全