click: true 是否派发click事件 directionLockThreshold: 5 style="color: #888888">momentum: true 当快速滑动时是否开启滑动惯性 style="color..." />

项目预览地址:

Options 参数

  • startX: 0 开始的X轴位置
  • startY: 0 开始的Y轴位置
  • scrollY: true 滚动方向为 Y
  • scrollX: ‘true’ 滚动方向为 X
  • style=”color: #888888″>click: true 是否派发click事件
  • directionLockThreshold: 5
  • style=”color: #888888″>momentum: true 当快速滑动时是否开启滑动惯性
  • style=”color: #888888″>bounce: true 是否启用回弹动画效果
  • selectedIndex: 0 wheel 为 true
    时有效,表示被选中的 wheel 索引
  • rotate: 25 wheel 为 true
    时有效,表示被选中的 wheel 每一层的旋转角度
  • wheel: false 该属性是给 picker
    组件使用的,普通的列表滚动不需要配置
  • snap: false 该属性是给 slider
    组件使用的,普通的列表滚动不需要配置
  • style=”color: #888888″>snapLoop: false 是否可以无缝循环轮播
  • style=”color: #888888″>snapThreshold: 0.1 用手指滑动时页面可切换的阈值,大于这个阈值可以滑动的下一页
  • snapSpeed: 400,
    轮播图切换的动画时间
  • swipeTime: 2500 swipe
    持续时间
  • style=”color: #888888″>bounceTime: 700 弹力动画持续的毫秒数
  • adjustTime: 400 wheel 为 true
    有用,调整停留位置的时间
  • swipeBounceTime: 1200 swipe
    回弹 时间
  • style=”color: #888888″>deceleration: 0.001 滚动动量减速越大越快,建议不大于0.01
  • style=”color: #888888″>momentumLimitTime: 300 符合惯性拖动的最大时间
  • style=”color: #888888″>momentumLimitDistance: 15 符合惯性拖动的最小拖动距离
  • style=”color: #888888″>resizePolling: 60 重新调整窗口大小时,重新计算better-scroll的时间间隔
  • style=”color: #888888″>preventDefault: true 是否阻止默认事件
  • style=”color: #888888″>preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
  • style=”color: #888888″>HWCompositing: true 是否启用硬件加速
  • style=”color: #888888″>useTransition: true 是否使用CSS3的Transition属性
  • style=”color: #888888″>useTransform: true 是否使用CSS3的Transform属性
  • style=”color: #888888″>probeType: 1 滚动的时候会派发scroll事件,会截流。2滚动的时候实时派发scroll事件,不会截流。 3除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件

 

1、可以把一些常用的、操作dom的方法封装到js里面,比如addClass

Events 事件

  • beforeScrollStart –
    滚动开始之前触发
  • scrollStart – 滚动开始时触发
  • scroll – 滚动时触发
  • scrollCancel – 取消滚动时触发
  • scrollEnd – 滚动结束时触发
  • touchend – 手指移开屏幕时触发
  • flick – 触发了 fastclick
    时的回调函数
  • refresh – 当 better-scroll
    刷新时触发
  • destroy – 销毁 better-scroll
    实例时触发

Example:

class=”storage type js”>let scroll  class=”keyword operator assignment js”>=  class=”meta class instance constructor”> class=”keyword operator js”>new  class=”entity name type instance js”>BScroll class=”meta brace round js”>( class=”support class js”>document class=”meta delimiter method period js”>. class=”support function dom js”>getElementById class=”meta js”> class=”punctuation definition begin round js”>( class=”string quoted single js”> class=”punctuation definition string begin js”>’wrapper class=”punctuation definition string end js”>’ class=”punctuation definition end round js”>) class=”meta delimiter object comma js”>, class=”meta brace curly js”>{

   probeType class=”keyword operator js”>:  class=”constant numeric decimal js”>3

class=”meta brace curly js”>} class=”meta brace round js”>)

 

class=”variable other object js”>scroll class=”meta delimiter method period js”>. class=”entity name function js”>on class=”punctuation definition begin round js”>( class=”string quoted single js”> class=”punctuation definition string begin js”>’scroll class=”punctuation definition string end js”>’ class=”meta delimiter object comma js”>,  class=”meta function js”> class=”punctuation definition begin round js”>( class=”variable function js”>pos class=”punctuation definition end round js”>)  class=”storage type function js”>=>  class=”punctuation definition function begin curly js”>{

class=”meta js”>   class=”entity name type object console js”>console class=”meta js”>. class=”support function console js”>log class=”punctuation definition begin round js”>( class=”variable other object js”>pos class=”meta delimiter period js”>. class=”support constant js”>x  class=”keyword operator js”>+  class=”string quoted single js”> class=”punctuation definition string begin js”>’~ class=”punctuation definition string end js”>’  class=”keyword operator js”>+  class=”variable other object js”>pos class=”meta delimiter period js”>. class=”support constant js”>y class=”punctuation definition end round js”>)

class=”meta js”> class=”punctuation definition function end curly js”>} class=”punctuation definition end round js”>)

 

2、页面中的方法,尽量封装成一个个小方法,减少每个方法里面的代码

方法列表

  • scrollTo(x, y, time, easing)

滚动到某个位置,x,y 代表坐标,time
表示动画时间,easing 表示缓动函数
scroll.scrollTo(0, 500)

 

  • scrollToElement(el, time, offsetX,
    offsetY, easing)

滚动到某个元素,el(必填)表示 dom
元素,time 表示动画时间,offsetX 和 offsetY 表示坐标偏移量,easing
表示缓动函数

 

  • refresh()

强制 scroll 重新计算,当 better-scroll
中的元素发生变化的时候调用此方法

 

  • getCurrentPage()

当 snap 为 true
时,获取滚动的当前页,返回的对象结构为 {x, y, pageX, pageY},其中 x,y
代表滚动横向和纵向的位置;pageX,pageY 表示横向和纵向的页面索引

 

  • goToPage(x, y, time, easing)

当 snap 为 true,滚动到对应的页面,x
表示横向页面索引,y 表示纵向页面索引, time 表示动画,easing
表示缓动函数

 

  • enable()

启用 better-scroll,默认开启

 

  • disable()

禁用 better-scroll

 

  • destroy()

销毁 better-scroll,解绑事件

 

3、recommend.vue,为什么要在引入轮播图插件的外面进行判断?原因是:created(){}
里面获取数据是一个异步操作,请求后台数据需要一点时间

左右滑动的组件 – slider.vue:

  • 实现效果:

自动轮播, 左右滑动切换,循环轮播

  • 效果图:

官网地址 1

官网地址, 

  • 代码:

slider.vue

<template>
  <div class=”slider” ref=”slider”>
    <div class=”slider-group” ref=”sliderGroup”>
      <slot></slot>
    </div>
    <div class=”dots”>

      <!–上图点的html  –>
      <span class=”dot” :class=”{active: currentPageIndex ===
index }” v-for=”(item, index) in dots”></span>
    </div>
  </div>
</template>

 

<script type=”text/ecmascript-6″>

import {addClass} from ‘common/js/dom’
import BScroll from ‘better-scroll’

export default {

name: ‘slider’,
props: {
  loop: {  //是否循环播放
    type: Boolean,
    default: true
  },
  autoPlay: { //是否自动播放
    type: Boolean,
    default: true
  },
  interval: { //轮播频率
    type: Number,
    default: 4000
  }
},

data() {
  return {
    dots: [],          // 用于设置有多小个点
    currentPageIndex: 0 // 当前播放到第几张图片
  }
},
mounted() {

  //
加上延迟20毫秒是因为dom初始化完,才可以执行以下操作

  setTimeout(() => {
    this._setSliderWidth()   //初始化宽度
    this._initDots()            //初始化上图的点
    this._initSlider()          //初始化better-scroll 

    if (this.autoPlay) {
      this._play()      // 自动播放
    }
  }, 20)

  //resize
监听设备窗口发生变化,要重新计算高宽

  window.addEventListener(‘resize’, () => {
    if (!this.slider) {
      return
    }
    this._setSliderWidth(true)
    this.slider.refresh()
  })
},

activated() {
  if (this.autoPlay) {
    this._play()   //
进入页面,重新执行自动播放,因为跳出页面会清除定时器
  }
},
deactivated() {
  clearTimeout(this.timer)  //跳出路由,清理定时器
},
beforeDestroy() {
  clearTimeout(this.timer)  //清理定时器
},
methods: {

  // 初始化高宽方法
  _setSliderWidth(isResize) {

    //
<slot></slot>应该会被外面组件通过for循环生成的列表替换,获取这些列表
    this.children = this.$refs.sliderGroup.children

    // 用于保存总宽度
    let width = 0

    //获取组件的宽度
    let sliderWidth = this.$refs.slider.clientWidth
    for (let i = 0; i < this.children.length; i++) {
      let child = this.children[i]

      //
在这里添加样式,是因为如果在父组件添加样式,会增强父子组件的依赖
      addClass(child, ‘slider-item’)

      //
给每一个子组件的宽度,都应该=组件最外层div的宽度,保证每次轮播,都能填满
      child.style.width = sliderWidth + ‘px’
      width += sliderWidth

    }
    if (this.loop && !isResize) {

      //循环播放的时,在第一个元素之前,会自动添加最后一个元素的克隆对象,

      //在最后一个元素之后,也会自动添加第一个元素的克隆对象,

      // 所以比实际上市多出2和元素, 计算宽度要 style=”color: #ff0000″>加 2 * sliderWidth
      width += 2 * sliderWidth
    }
    this.$refs.sliderGroup.style.width = width + ‘px’
  },
  _initSlider() {

this.slider = new BScroll(this.$refs.slider, {
  scrollX: true,
  scrollY: false,
  momentum: false,
  snap: true,
  snapLoop: this.loop,
  snapThreshold: 0.3,
  snapSpeed: 400

    })

this.slider.on(‘scrollEnd’, () => {

  // 获取当前播放的索引
  let pageIndex = this.slider.getCurrentPage().pageX
  if (this.loop) {

    //
如果是循环播放,实际当前播放元素的索引,计算要减去1,原因也是多了2个元素
    pageIndex -= 1
  }

  // 改变当前选中的样式
  this.currentPageIndex = pageIndex

  if (this.autoPlay) {
    clearTimeout(this.timer)

    //
能自动播放的关键,每次滑动完成都会重新调用 _play 方法
    this._play()
  }
})

  },
  _initDots() {
    this.dots = new Array(this.children.length)
  },
  _play() {
    let pageIndex = this.currentPageIndex + 1
    if (this.loop) {
      pageIndex += 1
    }
    this.timer = setTimeout(() => {

      // 跳转到哪个页面
      this.slider.goToPage(pageIndex, 0, 400)
    }, this.interval)
  }
}

}

</script>

 

父组件引用插件:

import Slider from ‘base/slider/slider’

components: {
  Slider
}

<!–  v-if=”recommends.length”作用是保证有数据才会渲染组件  –>

<div v-if=”recommends.length” class=”slider-wrapper”
ref=”sliderWrapper”>
  <slider>
    <div v-for=”item in recommends”>
      <a :href=”item.linkUrl”>

        <img class=”needsclick” @load=”loadImage”
:src=”item.picUrl”>
      </a>
    </div>
  </slider>
</div>

 

方法loadImage
:由于图片下载时异步的,所以有可能出现列表已经渲染好,但是图片还没有下载完的情况,导致的结果就是组件的宽度不正确,所以当图片加载完成,要重新计算宽度

loadImage() {
  if (!this.checkloaded) {
    this.checkloaded = true
    this.$refs.scroll.refresh()
  }
},

 

官网地址 2

 

4、slider.vue,mounted里的setTimeout的时间为20的原因,浏览器刷新一次的时间为17毫秒

 官网地址 3

 5、app.vue  

当切换组件后,再切回来,数据会再请求一次

官网地址 4

优化方法

  在app.vue里面,添加

1 <keep-alive>
2       <router-view></router-view>
3 </keep-alive>

添加keep-alive后,数据会保存到内存中

6、slide.vue

1 destroyed () {
2   clearTimeout(this.timer)
3 }

当组件被切换出去,生命周期就进入到destroyed,要进行clearTimeout。

注意:当组件中用到了计时器时,要在destroyed中进行clearTimeout,释放内存资源,这是一种好的编程习惯

7、scroll.vue组件

官网地址 5

通过监控data数据的变化来调用refresh()方法

8.、recommend.vue组件

官网地址 6

在使用scroll组件的时候,传入data的为discList的原因是:

官网地址 7

discList数据后获取,但有一个问题,如果recommend数据没有获取到,或者在discList数据之后获取,那么滚动的时候,就会少了下面这一块区域

官网地址 8

解决的办法:

结果分析:上面这一块的高度,是由图片撑开的,所以我们可以给图片绑定一个load方法,当图片加载时,就调用

官网地址 9

1 loadImage () {
2   if (!this.checkloaded) {
3     this.checkloaded = true
4     setTimeout(() => {
5       this.$refs.scroll.refresh()
6     }, 20)
7   }
8 }

小技巧:图片有很多,我们不需要每一张图片都调用load方法,可以添加有一个判断值
  this.checkloaded

9、在页面中,我们要加载很多图片,不需要一次性全部加载,只要滑动到相应位置再加载,这时候就需要用到vue-lazyload

地址:

使用方法,先用npm 安装vue-lazyload

main.js 引入vue-lazyload

官网地址 10

需要用到的地方

<img>标签里面,把:src改成v-lazy

官网地址 11

10、当一个组件中,同时使用了fastclick
和better-scroll,且better-scroll设置了click:true属性,这时会出现一个问题,

官网地址 12

无法点击了,解决办法是,在Iimg处设置class=”needsclick”,这个是fastclick的属性

11、数据没有加载时显示的效果,请看 loading.vue

12、singer.vue

 官网地址 13

数组进行排序,用来sort方法,sort方法内部的返回俩个数的charCodeAt相减的bollean值

13、listview.vue

官网地址 14

这个表示向下取整,原因:

因为|这个是或位操作符,意思是先将数值转换成32位二进制整数值(如果有小数则忽略),再对二进制上每一位进行或运算,得出结果;

这里xxx|0,因为0的二进制就是0000000…00一共32位(32个0),无论任何数对0进行或运算都是原来的数,因此可以用它来进行向下取整

14、scroll.vue (第5章用到)

官网地址 15

15、

官网地址 16

 

官网地址 17

 官网地址 18

 16、子路由的配置

router文件夹下的Index.js里面

官网地址 19

singer.vue里面

// router的编程式调用接口,类似于申明式<router-link :to="...">
参考地址:http://blog.csdn.net/sinat_17775997/article/details/68941091

官网地址 20

 17、在vue中,用export注册的东西,其他页面获取的时候,要用 import {Xx}
from ,或者import * as 自己起的名字 from 

 18、singer-datail.vue

官网地址 21

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图