Vue框架之goods组件开发详解_vue.js_脚本之家

// better-scroll 的事件,有_constructed: trueMouseEvent {isTrusted: false, _constructed: true, screenX: 0, screenY: 0, clientX: 0…}//pc的事件MouseEvent {isTrusted: true, screenX: -1867, screenY: 520, clientX: 53, clientY: 400…}

better-scroll 的初始化

在我们的实际工作中,列表的数据往往都是异步获取的,因此我们初始化
better-scroll 的时机需要在数据获取后,代码如下:

2.我们获取到区间高度数组后,我们要实时获取到右侧的y值,和左侧的索引值做一个对比,定义一个scrollY变量用来存放实时获取的y值。bs插件为我们提供了一个实时获取y值的方法,我们在初始化this.foodScroll的时候加一个·属性probeType:
3,其作用就是实时获取y值,相当于探针的作用。

// 通过 方法 计算foods内部每一个块的高度,组成一个数组listHeight。 // 每个li 定义一个类food-list-hook 通过获取该类 来计算 每一块的高度 存到数组listHeight里 _calculateHeight (){ // 获取 li 通过food-list-hook let foodList=this.$refs.foodsWrapper.querySelectorAll; let height=0;// 初始化高度 this.listHeight.push // 把第一个高度存入数组 //通过循环foodList下的dom结构,将每一个li的高度依次送入数组 for(let i = 0 ,l = foodList.length ; i < l ; i++){ let item=foodList[i]; //每一个item都是刚才获取的food的每一个dom height += item.clientHeight; //获取每一个foods内部块的高度 this.listHeight.push // 将获取的值存放到数组里 } }

在pc页面上 better-scroll 也派发了一次click事件,原生也派发了一次click事件

npm install better-scroll

import BScroll from 'better-scroll'

解决 : 针对better-scroll 的事件,有_constructed:
true,所以做处理,return掉非better-scroll 的事件

methods:{ // 用来对左右两侧dom结构进行初始化 _initScroll (){ // 实例化 better-scroll 插件,传入要滚动的DOM 对象 this.meunScroll=new BScroll(this.$refs.menuWrapper,{ click:true }); this.foodScroll=new BScroll(this.$refs.foodsWrapper,{ click:true }); } }

注意:这里为什么是在 created 这个钩子函数里请求数据而不是放到 mounted
的钩子函数里?因为 requestData
是发送一个网络请求,这是一个异步过程,当拿到响应数据的时候,Vue 的 DOM
早就已经渲染好了,但是数据改变 —> DOM
重新渲染仍然是一个异步过程,所以即使在我们拿到数据后,也要异步初始化
better-scroll。

//结合BScroll的接口使用,监听scroll事件,并获取鼠标坐标,当滚动时能实时暴露出scroll this.foodScroll.on =>{ // 回调函数 //scrollY接收变量 this.scrollY=Math.abs //滚动坐标会出现负的,并且是小数,所以需要处理一下,实时取得scrollY // console.log

三、better-scroll 应用

初始化需要滚动的dom结构

这里的 this.$nextTick 是一个异步函数,为了确保 DOM 已经渲染,底层用到了
MutationObserver 或者是 setTimeout。其实我们在这里把 this.$nextTick
替换成 setTimeout 也是可以的(20 ms 是一个经验值,每一个 Tick 约为 17
ms),对用户体验而言都是无感知的。

goods 组件到此差不多了!

原理:父容器wrapper,它具有固定的高度,当它的第一个子元素content
的高度超出了wrapper的高度,我们就可以滚动内容区了,若没有超出则不能滚动了。

5.最后实现左侧点击的功能。在左侧的li下绑定一个selectMenu的点击事件,并传入索引值,这样我们就可以知道点击的是哪一个li

使用

// 指定为 Flex 布局 display: flex;

原因 : better-scroll
会监听事件,并且阻止默认事件,并且他只会监听移动端的,pc端的没有监听

这里的 requestData 是伪代码,作用就是发起一个 http
请求从服务端获取数据,并且这个函数返回的是一个
promise(实际项目中我们可能会用 axios 或者 vue-resource
)。我们获取到数据的后,需要通过异步的方式再去初始化 better-scroll,因为
Vue 是数据驱动的, Vue
数据发生变化到页面重新渲染是一个异步的过程,我们的初始化时机是要在 DOM
重新渲染后,所以这里用到了 this.$nextTick,当然替换成 setTimeout
也是可以的。

selectMenu{ if  { //去掉自带的click事件点击,即pc端直接返回 return; } let foodList=this.$refs.foodsWrapper.querySelectorAll; // 获得监听元素 let el = foodList[index]; // 获得 当前 监听元素的高度 this.foodScroll.scrollToElement; //类似jump to的功能,通过这个方法,跳转到指定的dom }
goods: [],// goods json 数组listHeight: [],// 存放 foods 内部的每一块的高度scrollY:0

this.foodScroll=new BScroll(this.$refs.foodsWrapper,{ click:true, //探针作用,实时监测滚动位置 probeType: 3 });

在ajax内执行_initScroll() 函数

3.我们再添加一个方法this.foodScroll.on,作用是实时滚动的时候把获取到的位置给暴露出来。代码如下。

ES6语法格式: this.$nextTick

一、 布局 Flex

computed:{ currentIndex (){ //计算到达哪个区域的区间的时候的对应的索引值 // 利用 listHeight 存放 每一块 对应的高度 for (let i=0,l=this.listHeight.length; i menuHeight_fir && this.scrollY < menuHeight_sec) ){ return i; } } }, }
export default { props: { // 图标类型 iconType: Number }, created() { // 数组类名 this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'] }}

import iconMap from '../iconMap/iconMap' // 注意路径写法// 注册组件 components: { iconMap }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

说明:vue中更改数据,DOM会跟着做映射,但vue更新DOM是异步的,用 $nextTick
()来确保Dom变化后能调用到_initScroll方法能计算内层ul的高度,当内层ul的高度大于外层wrapper的高度时,可以实现滚动。

flex : 等分 内容缩放 展位空间;flex : 0 0 80px

此时俩侧可以分别滚动了!

created (){ // 在实例创建完成后被立即调用 $el 属性目前不可见。 axios.get.then => { this.goods=result.data.goods //dom结构加载结束 this.$nextTick => { this._initScroll}

参考: vue使用 better-scroll的参数和方法

原理:我们计算出右侧实时变化的y值,落到哪一个区间,我们就显示那一个区间。首先我们要计算整体区间的一个高度,然后分别计算第一个区间的高度,第二个区间的高度,以此类推。然后将区间数存入一个定义好的数组。当我们在滚动的时候实时拿到y轴的高度,然后对比在哪一个区间,这样我们就会得到一个区间的索引值去对应左侧的菜品类别,最后我们用一个vue的class去绑定高亮文本。

dom结构完全加载完再调用_initScroll
因为要监听内容区域的高度,所以初始化应在created过程中去监听dom结构是否完全加载,这里是在$nextTick对象中进行触发检测

// 主要属性 flex: none | [ ? || ] flex属性是flex-grow, flex-shrink
和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小,flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小,设为跟width或height属性一样的值,则项目将占据固定空间

better-scroll 结合 Vue

子组件 iconMap

   {{item}}   import BScroll from 'better-scroll' export default { data() { return { data: [] } }, created.then =&gt; { this.data = res.data this.$nextTick =&gt; { this.scroll = new Bscroll(this.$refs.wrapper, {}) }) }) } }
selectMenu { // 点击左侧 ,右侧响应 this.foodScroll.scrollTo(0, -this.listHeight[index], 300) }

scrollTo//滚动到某个位置,x,y 代表坐标,time 表示动画时间,easing 表示缓动函数scroll.scrollTo
  • // json 数据 根据 type 判断 是否有图标 {{item.name}}

说明:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
如果用在子组件上,引用就指向组件实例:

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里,我们通过了
this.$refs.wrapper 访问到了这个 DOM 对象,并且我们在 mounted
这个钩子函数里,this.$nextTick 的回调函数中初始化 better-scroll
。因为这个时候,wrapper 的 DOM 已经渲染了,我们可以正确计算它以及它内层
content 的高度,以确保滚动正常。

类似iscroll 实现滚动效果

在样式里提前设好 选中和正常的样式

6.关于在selectMenu中点击事件

在methods方法里面定义一个_initScroll的函数,主要用来对左右两侧dom结构进行初始化

在此之前我们要做一些准备和 注意事项

better-scroll
的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素
DOM 结构发生改变的时候,必须重新调用 scroll.refresh()
方法重新计算来确保滚动效果的正常。所以 better-scroll
不能滚动的原因多半是初始化 better-scroll 的时机不对,或者是当 DOM
结构发送变化的时候并没有重新计算 better-scroll。

在selectMenu中点击,在pc界面会出现两次事件,在移动端就只出现一次事件的问题

二、图标组件

4.定义一个计算属性computed,获取到food滚动区域对应的menu区域的子块的索引i值,从而定位到左侧边栏的位置。

借助ref属性用来绑定某个dom元素,或者来说来绑定某个组件,然后在函数内用this.$refs.menuwrapper获取到dom。

Flex 布局,可以简便、完整、响应式地实现各种页面布局,Flex 是 Flexible
Box
的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为
Flex 布局。

1.定义一个方法在 _initScroll
下面,作为计算高度的方法叫做_calculateHeight ()
,再定义一个listHeight:[]数组,存放获取到的每一块foods类的高度。然后通过给每个li
定义类名来供js 选择 从而计算出高度存放到listHeight数组里。

获取到i后,,然后通过设置一个class来做样式切换变化 :
,当currentIndex和menu-item对应的index相等时,设置current的样式。这样就可以实现左右联动了。

发表评论

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

网站地图xml地图