Vue框架之goods组件开发详解
一、 布局 FlexFlex 布局，可以简便、完整、响应式地实现各种页面布局，Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
二、图标组件子组件 iconMap 父组件 goods 三、better-scroll 应用类似iscroll 实现滚动效果 安装 引入 说明 （1）原理：父容器wrapper，它具有固定的高度，当它的第一个子元素content 的高度超出了wrapper的高度，我们就可以滚动内容区了，若没有超出则不能滚动了。 （2）better-scroll 的初始化 better-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常。所以 better-scroll 不能滚动的原因多半是初始化 better-scroll 的时机不对，或者是当 DOM 结构发送变化的时候并没有重新计算 better-scroll。 （3）better-scroll 结合 Vue Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里，我们通过了 this.$refs.wrapper 访问到了这个 DOM 对象，并且我们在 mounted 这个钩子函数里，this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候，wrapper 的 DOM 已经渲染了，我们可以正确计算它以及它内层 content 的高度，以确保滚动正常。 这里的 this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染，底层用到了 MutationObserver 或者是 setTimeout(fn,0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn,20) 也是可以的（20 ms 是一个经验值，每一个 Tick 约为 17 ms），对用户体验而言都是无感知的。 （4）异步数据的处理 在我们的实际工作中，列表的数据往往都是异步获取的，因此我们初始化 better-scroll 的时机需要在数据获取后，代码如下： 这里的 requestData 是伪代码，作用就是发起一个 http 请求从服务端获取数据，并且这个函数返回的是一个 promise（实际项目中我们可能会用 axios 或者 vue-resource ）。我们获取到数据的后，需要通过异步的方式再去初始化 better-scroll，因为 Vue 是数据驱动的， Vue 数据发生变化（this.data = res.data）到页面重新渲染是一个异步的过程，我们的初始化时机是要在 DOM 重新渲染后，所以这里用到了 this.$nextTick，当然替换成 setTimeout(fn,20) 也是可以的。 注意：这里为什么是在 created 这个钩子函数里请求数据而不是放到 mounted 的钩子函数里？因为 requestData 是发送一个网络请求，这是一个异步过程，当拿到响应数据的时候，Vue 的 DOM 早就已经渲染好了，但是数据改变 —> DOM 重新渲染仍然是一个异步过程，所以即使在我们拿到数据后，也要异步初始化 better-scroll。 使用初始化需要滚动的dom结构 借助ref属性用来绑定某个dom元素，或者来说来绑定某个组件，然后在函数内用this.$refs.menuwrapper获取到dom。 说明：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例: 在ajax内执行_initScroll() 函数 在此之前我们要做一些准备和 注意事项(1) dom结构完全加载完再调用_initScroll()方法才会生效 (2) 因为要监听内容区域的高度，所以初始化应在created过程中去监听dom结构是否完全加载，这里是在$nextTick对象中进行触发检测 ES6语法格式： this.$nextTick(() => {}) {
this.goods=result.data.goods
//dom结构加载结束
this.$nextTick(() => {
this._initScroll(); // 初始化scroll
})
})
}
(3) 在methods方法里面定义一个_initScroll的函数，主要用来对左右两侧dom结构进行初始化 }
} 说明：vue中更改数据，DOM会跟着做映射，但vue更新DOM是异步的，用 $nextTick ()来确保Dom变化后能调用到_initScroll()方法。调用_initScroll()方法能计算内层ul的高度，当内层ul的高度大于外层wrapper的高度时，可以实现滚动。 此时俩侧可以分别滚动了！ (4) 实现左右联动 原理：我们计算出右侧实时变化的y值，落到哪一个区间，我们就显示那一个区间。首先我们要计算整体区间的一个高度，然后分别计算第一个区间的高度，第二个区间的高度，以此类推。然后将区间数存入一个定义好的数组。当我们在滚动的时候实时拿到y轴的高度，然后对比在哪一个区间，这样我们就会得到一个区间的索引值去对应左侧的菜品类别，最后我们用一个vue的class去绑定高亮文本。 1.定义一个方法在 _initScroll 下面，作为计算高度的方法叫做_calculateHeight () ，再定义一个listHeight:[]数组，存放获取到的每一块foods类的高度。然后通过给每个li 定义类名来供js 选择 从而计算出高度存放到listHeight数组里。 }
2.我们获取到区间高度数组后，我们要实时获取到右侧的y值，和左侧的索引值做一个对比，定义一个scrollY变量用来存放实时获取的y值。bs插件为我们提供了一个实时获取y值的方法，我们在初始化this.foodScroll的时候加一个·属性probeType: 3，其作用就是实时获取y值，相当于探针的作用。 3.我们再添加一个方法this.foodScroll.on('scroll',(pos) => {}),作用是实时滚动的时候把获取到的位置给暴露出来。代码如下。 { // 回调函数
//scrollY接收变量
this.scrollY=Math.abs(Math.round(pos.y)) //滚动坐标会出现负的,并且是小数,所以需要处理一下，实时取得scrollY
// console.log(pos.y)
})
4.定义一个计算属性computed，获取到food滚动区域对应的menu区域的子块的索引i值，从而定位到左侧边栏的位置。 menuHeight_fir && this.scrollY < menuHeight_sec) ){
return i;
}
}
},}
获取到i后，,然后通过设置一个class来做样式切换变化 :class="{'current':currentIndex === index}",当currentIndex和menu-item对应的index相等时，设置current的样式。这样就可以实现左右联动了。 在样式里提前设好 选中和正常的样式 5.最后实现左侧点击的功能。在左侧的li下绑定一个selectMenu的点击事件，并传入索引值，这样我们就可以知道点击的是哪一个li 参考： 6.关于在selectMenu中点击事件 在selectMenu中点击,在pc界面会出现两次事件,在移动端就只出现一次事件的问题 原因 : better-scroll 会监听事件(例如touchmove,click之类),并且阻止默认事件(prevent stop),并且他只会监听移动端的,pc端的没有监听 在pc页面上 better-scroll 也派发了一次click事件,原生也派发了一次click事件 解决 : 针对better-scroll 的事件,有_constructed: true,所以做处理,return掉非better-scroll 的事件 goods 组件到此差不多了！ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |