sxx的技术专栏 Nodejs and Javascript Coder

项目中使用的better-scroll库

2018-07-01
SnakeSon

阅读:


1. 项目中使用的better-scroll库

1). 什么: 用来实现页面滑动相关效果的js库
2). 原理: 当内容的高度超过了容器的高度(固定)时, 才会形成滚动
3). 基本编码:
	scroll = new BScroll(selector, {})
	scroll.on(eventName, cb)
	scroll.scrollTo()
	scroll.refresh()
4). 注意:
	创建BScroll对象的时机
	创建BScroll对象的个数
	BScroll禁用的原生dom事件, 自动定义事件分发

2. 说说我vue项目开发中碰到的问题吧, 给大家说下原因及解决办法

    如果对大家有帮助,可以参考
1). 创建Swiper/BScroll对象后, 轮播/滑动没有效果?
	原因: 创建对象太早, 得在数据显示后创建
	解决: watch + $nextTick() 或 callback + $nextTick()
2). 初始显示异常
    情况1: Cannot read property 'xxx' of undefined"
    原因: 初始值是空对象, 内部没有数据, 而模块中直接显示3层表达式
    解决: 使用v-if指令
    
    情况2: Cannot read property 'avatar' of null"
    原因: 初始值是null, 而模块中直接显示2层表达式
    解决: 初始值为{}
3). 问题: 更新状态数据, 对应的界面不变化
    原因: 一般方法给一个已有绑定的对象中添加一个新的属性, 这个属性没有数据绑定
    解决: 
        Vue.set(obj, 'xxx', value)才有数据绑定
        this.$set(obj, 'xxx', value)才有数据绑定
4). 问题: 点击添加购物项, 会1次添加多个
    原因: 创建了多个BScroll对象来管理同一个DOM元素
    解决: 只创建一个BScroll对象 
    扩展: 单例对象: 
        创建前, 先判断是否已经存在, 只有不存在才创建
        创建后, 保存创建的对象

3. vue组件间5种通信方式并比较

1). props
	父子组件间通信的基本方式
    属性值的2大类型: 
        一般: 父组件-->子组件
        函数: 子组件-->父组件
	隔层组件间传递: 必须逐层传递(麻烦)
	兄弟组件间: 必须借助父组件(麻烦)


2). vue自定义事件
	子组件与父组件的通信方式
    用来取代function props
    不适合隔层组件和兄弟组件间的通信


3). 消息订阅和发布
	适合于任何关系的组件间通信
	缺点: 管理不够集中


4). vuex
	多组件共享状态(数据的管理)
    组件间的关系也没有限制
    功能比pubsub强大, 更适用于vue项目


5). slot
	通信是带数据的标签
    注意: 标签是在父组件中解析

4. Vue的MVVM结构图

Vue的MVVM结构图


Similar Posts

下一篇 函数高级

Comments