Entwicklung von Warenkomponenten im Vue-Framework

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Goodvs-Komponentenentwicklung des Vue-Frameworks vor. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

1. Layout Flex

Flex ist die Abkürzung für „Flexible Box“, was „Elastizität“-Layout bedeutet. um maximale Flexibilität für Box-Modelle zu bieten. Jeder Container kann als Flex-Layout festgelegt werden.

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

rreee

//Hauptattribute
Flex: keine | > ]
Das Flex-Attribut ist die Abkürzung für Flex-Grow, Flex-Shrink und Flex-Basis. Der Standardwert ist 0 1 Auto. Die letzten beiden Eigenschaften sind optional.
Das Flex-Grow-Attribut definiert das Vergrößerungsverhältnis des Elements. Der Standardwert ist 0, das heißt, wenn nicht genügend Platz vorhanden ist, wird das Element nicht vergrößert.
Das Flex-Shrink-Attribut definiert das Schrumpfverhältnis Der Standardwert ist 1, das heißt, wenn nicht genügend Platz vorhanden ist, wird das Element nicht verkleinert, das Flex-Shrink-Attribut ist 0 und alle anderen Elemente sind 1. Wenn nicht genügend Platz vorhanden ist, gilt ersteres wird nicht verkleinert
Das Flex-Basis-Attribut definiert den Hauptachsenraum (Hauptgröße), den das Element einnimmt, bevor überschüssiger Platz zugewiesen wird. Der Browser verwendet dieses Attribut, um zu berechnen, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Der Standardwert ist „Auto“, also die ursprüngliche Größe des Projekts. Wenn er auf denselben Wert wie das Breiten- oder Höhenattribut eingestellt ist (z. B. 350 Pixel), nimmt das Projekt einen festen Platz ein

2. Symbolkomponente

Untergeordnete Komponente iconMap

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

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

Übergeordnete Komponentengüter

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

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

3. Better-Scroll-Anwendung

< Das hat eine feste Höhe. Wenn die Höhe des Inhalts eines untergeordneten Elements die Höhe des Wrappers überschreitet, können wir im Inhaltsbereich scrollen. Wenn er die Höhe nicht überschreitet, können wir nicht scrollen.

(2) Better-Scroll-Initialisierung

Der Initialisierungszeitpunkt von Better-Scroll ist sehr wichtig, da bei der Initialisierung die Höhe und Breite des übergeordneten Elements und des untergeordneten Elements berechnet werden Element, um zu entscheiden, ob vertikal und horizontal scrollen kann. Daher müssen wir bei der Initialisierung sicherstellen, dass der Inhalt des übergeordneten Elements und des untergeordneten Elements korrekt gerendert wurde. Wenn sich die DOM-Struktur des untergeordneten oder übergeordneten Elements ändert, muss die Methode scroll.refresh() erneut aufgerufen und neu berechnet werden, um den normalen Scroll-Effekt sicherzustellen. Daher liegt der Grund, warum Better-Scroll nicht scrollen kann, wahrscheinlich darin, dass der Zeitpunkt der Initialisierung von Better-Scroll falsch ist oder Better-Scroll nicht neu berechnet wird, wenn die DOM-Struktur Änderungen sendet.

(3) Better-Scroll kombiniert mit Vue

Vue.js bietet uns eine Schnittstelle zum Abrufen von DOM-Objekten – vm.$refs. Hier greifen wir über this.$refs.wrapper auf das DOM-Objekt zu und initialisieren Better-Scroll in der gemounteten Hook-Funktion und der Callback-Funktion von this.$nextTick. Da zu diesem Zeitpunkt das DOM des Wrappers gerendert wurde, können wir seine Höhe und seinen inneren Inhalt korrekt berechnen, um ein normales Scrollen sicherzustellen.

This.$nextTick ist hier eine asynchrone Funktion. Um sicherzustellen, dass das DOM gerendert wurde, wird unten MutationObserver oder setTimeout(fn, 0) verwendet. Tatsächlich können wir this.$nextTick hier durch setTimeout(fn, 20) ersetzen (20 ms ist ein Erfahrungswert, jeder Tick dauert etwa 17 ms), was für die Benutzererfahrung nicht wahrnehmbar ist.

(4) Verarbeitung asynchroner Daten

In unserer tatsächlichen Arbeit werden die Daten der Liste häufig asynchron abgerufen, sodass der Zeitpunkt für die Initialisierung von Better-Scroll nach dem Abruf der Daten liegen muss . Der Code lautet wie folgt:

<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>

Die requestData hier sind Pseudocode. Ihre Funktion besteht darin, eine HTTP-Anfrage zum Abrufen von Daten vom Server zu initiieren, und diese Funktion gibt ein Versprechen zurück (in tatsächlichen Projekten können wir verwenden). axios oder vue-resource ). Nachdem wir die Daten erhalten haben, müssen wir den Better-Scroll auf asynchrone Weise initialisieren, da Vue datengesteuert ist. Wenn sich Vue-Daten ändern (this.data = res.data) und die Seite neu gerendert wird, ist sie asynchron Prozess. Die Initialisierungszeit liegt nach dem erneuten Rendern des DOM, daher kann this.$nextTick hier natürlich durch setTimeout(fn, 20) ersetzt werden.

Hinweis: Warum werden die Daten in der erstellten Hook-Funktion und nicht in der gemounteten Hook-Funktion angefordert? Da requestData eine Netzwerkanforderung sendet, handelt es sich um einen asynchronen Prozess. Wenn die Antwortdaten abgerufen werden, wurde das DOM von Vue bereits gerendert, aber die Datenänderungen -> Das erneute Rendern des DOM ist immer noch ein asynchroner Prozess, also auch wenn Nachher bekommen Für die Daten müssen wir auch einen besseren asynchronen Bildlauf durchführen.

Verwenden Sie

, um die Dom-Struktur zu initialisieren, die gescrollt werden muss.

Verwenden Sie das ref-Attribut, um ein bestimmtes Dom-Element zu binden, oder um ein zu binden bestimmte Komponente und verwenden Sie dann this.$refs.menuwrapper, um den Dom innerhalb der Funktion abzurufen.

Hinweis: Bei Verwendung auf einem normalen DOM-Element zeigt die Referenz auf das DOM-Element; bei Verwendung auf einer Unterkomponente zeigt die Referenz auf die Komponenteninstanz:

npm install better-scroll

Führen Sie _initScroll innerhalb aus ajax ()-Funktion

Zuvor müssen wir einige Vorbereitungen und Vorsichtsmaßnahmen treffen

(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组件通信（详细教程）

Das obige ist der detaillierte Inhalt vonEntwicklung von Warenkomponenten im Vue-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!