Vue框架之goods組件開發(fā)詳解

一、布局 Flex

10多年的撫順網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整撫順建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“撫順網(wǎng)站設(shè)計”,“撫順網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

Flex 布局，可以簡便、完整、響應式地實現(xiàn)各種頁面布局，F(xiàn)lex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局。

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

// 主要屬性
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值為0 1 auto。后兩個屬性可選。
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
flex-shrink屬性定義項目的縮小比例，默認為1，即如果空間不足，該項目將縮小，flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小，設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間

flex : 等分 內(nèi)容縮放 展位空間；
flex : 0 0 80px

二、圖標組件

子組件 iconMap

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

export default {
 props: { // 圖標類型
 iconType: Number
 },
 created() { // 數(shù)組類名
 this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
 }
}

父組件 goods

import iconMap from '../iconMap/iconMap' // 注意路徑寫法
// 注冊組件
 components: {
 iconMap
 }

<ul>
 <li v-for='(item,index) in goods' class="menu-item">
 <span class="text"> // json 數(shù)據(jù) 根據(jù) type 判斷 是否有圖標
 <iconMap v-show="item.type>0" :iconType="item.type"></iconMap>
 {{item.name}}
 </span>
 </li>
</ul>

三、better-scroll 應用

類似iscroll 實現(xiàn)滾動效果

安裝

npm install better-scroll

引入

import BScroll from 'better-scroll'

說明

（1）原理：父容器wrapper，它具有固定的高度，當它的第一個子元素content 的高度超出了wrapper的高度，我們就可以滾動內(nèi)容區(qū)了，若沒有超出則不能滾動了。

（2）better-scroll 的初始化

better-scroll 的初始化時機很重要，因為它在初始化的時候，會計算父元素和子元素的高度和寬度，來決定是否可以縱向和橫向滾動。因此，我們在初始化它的時候，必須確保父元素和子元素的內(nèi)容已經(jīng)正確渲染了。如果子元素或者父元素 DOM 結(jié)構(gòu)發(fā)生改變的時候，必須重新調(diào)用 scroll.refresh() 方法重新計算來確保滾動效果的正常。所以 better-scroll 不能滾動的原因多半是初始化 better-scroll 的時機不對，或者是當 DOM 結(jié)構(gòu)發(fā)送變化的時候并沒有重新計算 better-scroll。

（3）better-scroll 結(jié)合 Vue

Vue.js 提供了我們一個獲取 DOM 對象的接口—— vm.$refs。在這里，我們通過了 this.$refs.wrapper 訪問到了這個 DOM 對象，并且我們在 mounted 這個鉤子函數(shù)里，this.$nextTick 的回調(diào)函數(shù)中初始化 better-scroll 。因為這個時候，wrapper 的 DOM 已經(jīng)渲染了，我們可以正確計算它以及它內(nèi)層 content 的高度，以確保滾動正常。

這里的 this.$nextTick 是一個異步函數(shù)，為了確保 DOM 已經(jīng)渲染，底層用到了 MutationObserver 或者是 setTimeout(fn, 0)。其實我們在這里把 this.$nextTick 替換成 setTimeout(fn, 20) 也是可以的（20 ms 是一個經(jīng)驗值，每一個 Tick 約為 17 ms），對用戶體驗而言都是無感知的。

（4）異步數(shù)據(jù)的處理

在我們的實際工作中，列表的數(shù)據(jù)往往都是異步獲取的，因此我們初始化 better-scroll 的時機需要在數(shù)據(jù)獲取后，代碼如下：

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

這里的 requestData 是偽代碼，作用就是發(fā)起一個 http 請求從服務端獲取數(shù)據(jù)，并且這個函數(shù)返回的是一個 promise（實際項目中我們可能會用 axios 或者 vue-resource ）。我們獲取到數(shù)據(jù)的后，需要通過異步的方式再去初始化 better-scroll，因為 Vue 是數(shù)據(jù)驅(qū)動的， Vue 數(shù)據(jù)發(fā)生變化（this.data = res.data）到頁面重新渲染是一個異步的過程，我們的初始化時機是要在 DOM 重新渲染后，所以這里用到了 this.$nextTick，當然替換成 setTimeout(fn, 20) 也是可以的。

注意：這里為什么是在 created 這個鉤子函數(shù)里請求數(shù)據(jù)而不是放到 mounted 的鉤子函數(shù)里？因為 requestData 是發(fā)送一個網(wǎng)絡請求，這是一個異步過程，當拿到響應數(shù)據(jù)的時候，Vue 的 DOM 早就已經(jīng)渲染好了，但是數(shù)據(jù)改變 —> DOM 重新渲染仍然是一個異步過程，所以即使在我們拿到數(shù)據(jù)后，也要異步初始化 better-scroll。

使用

初始化需要滾動的dom結(jié)構(gòu)

借助ref屬性用來綁定某個dom元素，或者來說來綁定某個組件，然后在函數(shù)內(nèi)用this.$refs.menuwrapper獲取到dom。

說明：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例:

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

在ajax內(nèi)執(zhí)行_initScroll() 函數(shù)

在此之前我們要做一些準備和注意事項

(1) dom結(jié)構(gòu)完全加載完再調(diào)用_initScroll()方法才會生效

(2) 因為要監(jiān)聽內(nèi)容區(qū)域的高度，所以初始化應在created過程中去監(jiān)聽dom結(jié)構(gòu)是否完全加載，這里是在$nextTick對象中進行觸發(fā)檢測

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

created (){ // 在實例創(chuàng)建完成后被立即調(diào)用 $el 屬性目前不可見。
 axios.get('static/data.json').then((result) => {
 this.goods=result.data.goods
 //dom結(jié)構(gòu)加載結(jié)束
 this.$nextTick(() => {
 this._initScroll(); // 初始化scroll
 })
 })
}

(3) 在methods方法里面定義一個_initScroll的函數(shù)，主要用來對左右兩側(cè)dom結(jié)構(gòu)進行初始化

methods:{
 // 用來對左右兩側(cè)dom結(jié)構(gòu)進行初始化
 _initScroll (){
 // 實例化 better-scroll 插件，傳入要滾動的DOM 對象 
 this.meunScroll=new BScroll(this.$refs.menuWrapper,{
 click:true 
 });
 this.foodScroll=new BScroll(this.$refs.foodsWrapper,{
 click:true
 });
 
 }
 }

說明：vue中更改數(shù)據(jù)，DOM會跟著做映射，但vue更新DOM是異步的，用 $nextTick ()來確保Dom變化后能調(diào)用到_initScroll()方法。調(diào)用_initScroll()方法能計算內(nèi)層ul的高度，當內(nèi)層ul的高度大于外層wrapper的高度時，可以實現(xiàn)滾動。

此時倆側(cè)可以分別滾動了！

(4) 實現(xiàn)左右聯(lián)動

原理：我們計算出右側(cè)實時變化的y值，落到哪一個區(qū)間，我們就顯示那一個區(qū)間。首先我們要計算整體區(qū)間的一個高度，然后分別計算第一個區(qū)間的高度，第二個區(qū)間的高度，以此類推。然后將區(qū)間數(shù)存入一個定義好的數(shù)組。當我們在滾動的時候?qū)崟r拿到y(tǒng)軸的高度，然后對比在哪一個區(qū)間，這樣我們就會得到一個區(qū)間的索引值去對應左側(cè)的菜品類別，最后我們用一個vue的class去綁定高亮文本。

1.定義一個方法在 _initScroll 下面，作為計算高度的方法叫做_calculateHeight () ，再定義一個listHeight:[]數(shù)組，存放獲取到的每一塊foods類的高度。然后通過給每個li 定義類名來供js 選擇從而計算出高度存放到listHeight數(shù)組里。

// 通過 方法 計算foods內(nèi)部每一個塊的高度,組成一個數(shù)組listHeight。
 // 每個li 定義一個類food-list-hook 通過獲取該類 來計算 每一塊的高度 存到數(shù)組listHeight里
 _calculateHeight (){
 // 獲取 li 通過food-list-hook
 let foodList=this.$refs.foodsWrapper.querySelectorAll(".food-list-hook");
 let height=0;// 初始化高度
 this.listHeight.push(height) // 把第一個高度存入數(shù)組
 //通過循環(huán)foodList下的dom結(jié)構(gòu)，將每一個li的高度依次送入數(shù)組
 for(let i = 0 ,l = foodList.length ; i < l ; i++){
 let item=foodList[i]; //每一個item都是剛才獲取的food的每一個dom
 height += item.clientHeight; //獲取每一個foods內(nèi)部塊的高度
 this.listHeight.push(height) // 將獲取的值存放到數(shù)組里
 }
 
 }

2.我們獲取到區(qū)間高度數(shù)組后，我們要實時獲取到右側(cè)的y值，和左側(cè)的索引值做一個對比，定義一個scrollY變量用來存放實時獲取的y值。bs插件為我們提供了一個實時獲取y值的方法，我們在初始化this.foodScroll的時候加一個·屬性probeType: 3，其作用就是實時獲取y值，相當于探針的作用。

goods: [],// goods json 數(shù)組
listHeight: [],// 存放 foods 內(nèi)部的每一塊的高度
scrollY:0

this.foodScroll=new BScroll(this.$refs.foodsWrapper,{
 click:true,
 //探針作用，實時監(jiān)測滾動位置
 probeType: 3
 });

3.我們再添加一個方法this.foodScroll.on('scroll',(pos) => {}),作用是實時滾動的時候把獲取到的位置給暴露出來。代碼如下。

//結(jié)合BScroll的接口使用,監(jiān)聽scroll事件(實時派發(fā)的),并獲取鼠標坐標，當滾動時能實時暴露出scroll
 this.foodScroll.on("scroll",(pos) =>{ // 回調(diào)函數(shù)
 //scrollY接收變量 
 this.scrollY=Math.abs(Math.round(pos.y)) //滾動坐標會出現(xiàn)負的,并且是小數(shù),所以需要處理一下，實時取得scrollY
 // console.log(pos.y)
 })

4.定義一個計算屬性computed，獲取到food滾動區(qū)域?qū)膍enu區(qū)域的子塊的索引i值，從而定位到左側(cè)邊欄的位置。

computed:{
 currentIndex (){ //計算到達哪個區(qū)域的區(qū)間的時候的對應的索引值
 // 利用 listHeight 存放 每一塊 對應的高度
 for (let i=0,l=this.listHeight.length; i<l ; i++){
 let menuHeight_fir = this.listHeight[i] // 當前menu 子塊區(qū)域的 高度
 let menuHeight_sec = this.listHeight[i + 1] // 下一個menu 子塊區(qū)域的 高度
 // 當滑到底部時，menuHeight_sec 為 underfined,
 // 需要確定滑到倆個高度區(qū)間 
 if( !menuHeight_sec || (this.scrollY > menuHeight_fir && this.scrollY < menuHeight_sec) ){
 return i;
 }
 }
 },
 
 }

獲取到i后，,然后通過設(shè)置一個class來做樣式切換變化 :class="{'current':currentIndex === index}" ,當currentIndex和menu-item對應的index相等時，設(shè)置current的樣式。這樣就可以實現(xiàn)左右聯(lián)動了。

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

在樣式里提前設(shè)好選中和正常的樣式

5.最后實現(xiàn)左側(cè)點擊的功能。在左側(cè)的li下綁定一個selectMenu的點擊事件，并傳入索引值，這樣我們就可以知道點擊的是哪一個li

<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){ // 點擊左側(cè) ，右側(cè)響應
 this.foodScroll.scrollTo(0, -this.listHeight[index], 300)
 }

scrollTo(x, y, time, easing)
//滾動到某個位置，x,y 代表坐標，time 表示動畫時間，easing 表示緩動函數(shù)
scroll.scrollTo(0, 500)

參考： vue使用 better-scroll的參數(shù)和方法

6.關(guān)于在selectMenu中點擊事件

在selectMenu中點擊,在pc界面會出現(xiàn)兩次事件,在移動端就只出現(xiàn)一次事件的問題

原因 : better-scroll 會監(jiān)聽事件(例如touchmove,click之類),并且阻止默認事件(prevent stop),并且他只會監(jiān)聽移動端的,pc端的沒有監(jiān)聽

在pc頁面上 better-scroll 也派發(fā)了一次click事件,原生也派發(fā)了一次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"); // 獲得監(jiān)聽元素
 let el = foodList[index]; // 獲得 當前 監(jiān)聽元素的高度 
 this.foodScroll.scrollToElement(el, 300); //類似jump to的功能,通過這個方法,跳轉(zhuǎn)到指定的dom
 }

goods 組件到此差不多了！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁題目：Vue框架之goods組件開發(fā)詳解
文章路徑：http://muchs.cn/article24/ipgoje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、網(wǎng)站策劃、網(wǎng)站維護、App設(shè)計、網(wǎng)站收錄、面包屑導航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容