Vue框架之goods组件开发详解

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

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

<template lang="html">
 <span class="iconMap" :class="iconClassMap[iconType]"></span>
</template>

export default {
 props: { // 图标类型
 iconType: Number
 },
 created() { // 数组类名
 this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
 }
}

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

<ul>
 <li v-for='(item,index) in goods' class="menu-item">
 <span class="text"> // json 数据 根据 type 判断 是否有图标
 <iconMap v-show="item.type>0" :iconType="item.type"></iconMap>
 {{item.name}}
 </span>
 </li>
</ul>

npm install better-scroll

import BScroll from 'better-scroll'

<template>
 <div class="wrapper" ref="wrapper">
 <ul class="content">
 <li v-for="item in data">{{item}}</li>
 </ul>
 </div>
</template>
<script>
 import BScroll from 'better-scroll'
 export default {
 data() {
 return {
 data: []
 }
 },
 created() {
 requestData().then((res) => {
 this.data = res.data
 this.$nextTick(() => {
 this.scroll = new Bscroll(this.$refs.wrapper, {})
 })
 })
 }
 }
</script>

<div class="menu-wrapper" ref='menuWrapper'> </div>
<div class="foods-wrapper" ref="foodsWrapper"></div>

created (){ // 在实例创建完成后被立即调用 $el 属性目前不可见。
 axios.get('statichttps://img.qb5200.com/download-x/data.json').then((result) => {
 this.goods=result.data.goods
 /https://img.qb5200.com/download-x/dom结构加载结束
 this.$nextTick(() => {
 this._initScroll(); // 初始化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
 });
 
 }
 }

// 通过 方法 计算foods内部每一个块的高度,组成一个数组listHeight。
 // 每个li 定义一个类food-list-hook 通过获取该类 来计算 每一块的高度 存到数组listHeight里
 _calculateHeight (){
 // 获取 li 通过food-list-hook
 let foodList=this.$refs.foodsWrapper.querySelectorAll(".food-list-hook");
 let height=0;// 初始化高度
 this.listHeight.push(height) // 把第一个高度存入数组
 //通过循环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(height) // 将获取的值存放到数组里
 }
 
 }

goods: [],// goods json 数组
listHeight: [],// 存放 foods 内部的每一块的高度
scrollY:0

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

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

computed:{
 currentIndex (){ //计算到达哪个区域的区间的时候的对应的索引值
 // 利用 listHeight 存放 每一块 对应的高度
 for (let i=0,l=this.listHeight.length; i<l ; i++){
 let menuHeight_fir = this.listHeight[i] // 当前menu 子块区域的 高度
 let menuHeight_sec = this.listHeight[i + 1] // 下一个menu 子块区域的 高度
 // 当滑到底部时，menuHeight_sec 为 underfined,
 // 需要确定滑到俩个高度区间 
 if( !menuHeight_sec || (this.scrollY > menuHeight_fir && this.scrollY < menuHeight_sec) ){
 return i;
 }
 }
 },
 
 }

<li v-for='(item,index) in goods' class="menu-item" :class="index === currentIndex?'menu-item-selected':'menu-item'">
...

<li v-for='(item,index) in goods' class="menu-item" @click="selectMenu(index,$event)" :class="index === currentIndex?'menu-item-selected':'menu-item'">
...

selectMenu (index, event){ // 点击左侧 ，右侧响应
 this.foodScroll.scrollTo(0, -this.listHeight[index], 300)
 }

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

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

selectMenu(index, event){
 if (!event._constructed) { //去掉自带的click事件点击，即pc端直接返回
 return;
 }
 let foodList=this.$refs.foodsWrapper.querySelectorAll(".food-list-hook"); // 获得监听元素
 let el = foodList[index]; // 获得 当前 监听元素的高度 
 this.foodScroll.scrollToElement(el, 300); //类似jump to的功能,通过这个方法,跳转到指定的dom
 }