Development of goods components in Vue framework

This article mainly introduces the detailed explanation of the goodvs component development of the Vue framework. Now I will share it with you and give you a reference.

1. Layout Flex

Flex layout can realize various page layouts simply, completely and responsively. Flex is the abbreviation of Flexible Box, which means "elasticity" Layout" to provide maximum flexibility for box models. Any container can be designated as a Flex layout.

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

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

// Main attributes
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis' > ]
The flex attribute is the abbreviation of flex-grow, flex-shrink and flex-basis. The default value is 0 1 auto. The last two properties are optional.
The flex-grow attribute defines the enlargement ratio of the item. The default is 0, that is, if there is insufficient space, the item will not be enlarged.
The flex-shrink attribute defines the shrinkage ratio of the item. The default is 1, that is, if there is insufficient space, the item will not be enlarged. Will shrink, the flex-shrink attribute is 0, and other items are all 1. If there is insufficient space, the former will not shrink
The flex-basis attribute defines the main axis space (main size) occupied by the item before allocating excess space. The browser uses this attribute to calculate whether there is extra space on the main axis. Its default value is auto, which is the original size of the project. If it is set to the same value as the width or height attribute (such as 350px), the project will occupy a fixed space

2. Icon component

Sub component iconMap

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

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

Parent component goods

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

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

3. better-scroll application

Similar to iscroll implementation Scroll effect

Installation

npm install better-scroll

Introduction

import BScroll from 'better-scroll'

Description

(1) Principle: The parent container wrapper, which has a fixed height, when its If the height of a child element content exceeds the height of the wrapper, we can scroll the content area. If it does not exceed the height, we cannot scroll.

(2) Initialization of better-scroll

The initialization timing of better-scroll is very important, because when it is initialized, it will calculate the height and width of the parent element and child element to determine whether Can scroll vertically and horizontally. Therefore, when we initialize it, we must ensure that the content of the parent element and child element has been rendered correctly. If the DOM structure of the child element or parent element changes, the scroll.refresh() method must be called again and recalculated to ensure the normal scrolling effect. Therefore, the reason why better-scroll cannot scroll is probably because the timing of initializing better-scroll is wrong, or better-scroll is not recalculated when the DOM structure sends changes.

(3) better-scroll combined with Vue

Vue.js provides us with an interface to obtain DOM objects - vm.$refs. Here, we access the DOM object through this.$refs.wrapper, and we initialize better-scroll in the mounted hook function and the callback function of this.$nextTick. Because at this time, the wrapper's DOM has been rendered, we can correctly calculate the height of it and its inner content to ensure normal scrolling.

This.$nextTick here is an asynchronous function. In order to ensure that the DOM has been rendered, MutationObserver or setTimeout(fn, 0) is used at the bottom. In fact, we can replace this.$nextTick with setTimeout(fn, 20) here (20 ms is an experience value, each Tick is about 17 ms), which is imperceptible to the user experience.

(4) Processing of asynchronous data

In our actual work, the data in the list is often obtained asynchronously, so the timing for us to initialize better-scroll needs to be after the data is obtained. The code is as follows:

<script>
 import BScroll from &amp;#39;better-scroll&amp;#39;
 export default {
 data() {
 return {
 data: []
 }
 },
 created() {
 requestData().then((res) => {
 this.data = res.data
 this.$nextTick(() => {
 this.scroll = new Bscroll(this.$refs.wrapper, {})
 })
 })
 }
 }
</script>

The requestData here is pseudo code. Its function is to initiate an http request to obtain data from the server, and this function returns a promise (in actual projects, we may use axios or vue-resource ). After we obtain the data, we need to initialize better-scroll in an asynchronous manner, because Vue is data-driven. When Vue data changes (this.data = res.data) and the page is re-rendered, it is an asynchronous process. We The initialization time is after the DOM is re-rendered, so this.$nextTick is used here. Of course, it can be replaced with setTimeout(fn, 20).

Note: Why is the data requested in the created hook function instead of in the mounted hook function? Because requestData is sending a network request, which is an asynchronous process. When the response data is obtained, Vue's DOM has already been rendered, but the data changes -> DOM re-rendering is still an asynchronous process, so even if After we get the data, we also need to initialize better-scroll asynchronously.

Use

to initialize the dom structure that needs to be scrolled

Use the ref attribute to bind a certain dom element, or to bind a certain component, and then use this.$refs.menuwrapper to get the dom inside the function.

Note: If used on a normal DOM element, the reference points to the DOM element; if used on a sub-component, the reference points to the component instance:

<p class="menu-wrapper" ref=&#39;menuWrapper&#39;> </p>
<p class="foods-wrapper" ref="foodsWrapper"></p>

Execute _initScroll within ajax () Function

Before this we need to make some preparations and precautions

(1) dom结构完全加载完再调用_initScroll()方法才会生效

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

ES6语法格式： this.$nextTick(() => {})

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

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

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

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

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

(4) 实现左右联动

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

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

// 通过 方法 计算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) // 将获取的值存放到数组里
 }
 
 }

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

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

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

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

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

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

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;
 }
 }
 },
 
 }

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

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

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

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

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

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

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

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

6.关于在selectMenu中点击事件

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

原因 : better-scroll 会监听事件(例如touchmove,click之类),并且阻止默认事件(prevent stop),并且他只会监听移动端的,pc端的没有监听

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

// 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…}

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

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
 }

goods 组件到此差不多了！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用原生JavaScript实现放大镜效果

在nodejs中通过redis作为缓存实现的封装缓存类

Vue Socket.io源码详细分析

vue中调用methods的方法

Vue组件通信（详细教程）

The above is the detailed content of Development of goods components in Vue framework. For more information, please follow other related articles on the PHP Chinese website!