最近項目需要用到獲取手機自身的定位系統，一直反饋定位不好用。網絡狀況不好的時候定位不準確。今天難得有時間修改了一下功能。但是遇到了一些問題，我用了一些方法解決，希望看了這個文章的有更好辦法的大神們，可以指點指點我。

1.定位不準

使用官方提供的getCurrentPosition，默認的坐標系是國際的坐標系，用在百度地圖上會有誤差。可以使用官方提供的配置解決。

如在getCurrentPosition方法的第三個參數加上

provider: "baidu",

coordsType: "bd09ll",//百度坐標系

'enableHighAccuracy': true,//開啟精準定位

2.實時獲取定位

使用官方提供的watchPosition方法 ，實時監控坐標的變化。

可用參數

provider: "baidu",

coordsType: "bd09ll",

'enableHighAccuracy': true,

'maximumAge': 2000,

等等 其他我暫時沒有 用

3.實時獲取定位的watchPosition方法出現的問題

用hbuilder 基座 調試 獲取經緯度一切沒問題，但是打正式app包后，發現watchPosition方法第一次監聽沒有問題，后面監聽的經緯度全是（5e-324，5e-324）。無法正確獲取定位。后來發現只要我打開監聽，出去走幾步就可以正常監聽。正常效果和打開地圖一樣，地圖上的標注點會和我走路的軌跡一樣，一直變化。

4.解決方法。

監聽發現經緯度全是（5e-324，5e-324）時候調用getCurrentPosition方法，

部分代碼：

this.dwtimer=plus.geolocation.watchPosition(

position=> {

//坐標獲取

//console.log(JSON.stringify(position));

let p=position;

//console.log(p.coords.latitude);

let lat=p.coords.latitude;

let lng=p.coords.longitude;

this.sb.jwdlr=lng + "," + lat;

let province=

p.address.province==undefined ? "" : p.address.province;

let city=p.address.city==undefined ? "" : p.address.city;

let district=

p.address.district==undefined ? "" : p.address.district;

let street=p.address.street==undefined ? "" : p.address.street;

let streetNum=

p.address.streetNum==undefined ? "" : p.address.streetNum;

let poiName=p.address.poiName==undefined ? "" : p.address.poiName;

this.sb.device_place=

city + "" + district + "" + street + "" + streetNum + "" + poiName;

console.log(lat);

if(lat!=5e-324&&lng!=5e-324&&lat!="5e-324"&&lng!="5e-324"){

this.center={

lng,

lat

};

this.choosedLocation={

province,

city,

district,

addr: street + streetNum,

lng,

lat

};

}else{

this.hqdw();

}

},

e=> {

console.log(e.message);

this.hqdw();

plus.nativeUI.toast("請打開GPS定位" + e.message);

},

{

provider: "baidu",

coordsType: "bd09ll",

'enableHighAccuracy': true,

'maximumAge': 2000,

}

);

型 H5 項目開發的思考

不知不覺已經是第四次接手負責每年的大型 H5 活動，這也意味著 4 年啦啊啊啊啊，哎時間過得真是太快，也是應該做一點總結了。

每年都會有大型的 H5 項目上線，這一些項目的邏輯在一般的情況下，它們的差別不會很大，但是每一次都會有不同的樣式、條件和玩法。如果每一次大活動都是寫死邏輯且不可復用，下一次 H5 項目過來又再寫一次其實就是很沒有必要的事情。

如果能把這一些做過的組件做成通用可配置的，即插即用。那么肯定是會極大的提高開發效率，同時項目的穩定性也有保證。只不過組件的代碼邏輯就會比較復雜，開發難度會比較高，就單單組件內的一個按鈕就需要考慮到這個按鈕的顏色，大小，按鈕內的字體各種樣式和背景色以及這按鈕是不是設計狀態變化，若有還要考慮這一個狀態變化的邏輯或者是一些聯動的可能。所以，一個通用組件需要考慮和實現的邏輯就很多。

舉個例子，比如今年的 H5 有一個 “我的獎品” 模塊 ( 頁面 or 彈窗 )，這個模塊里面有的獎品的信息展示、時間的展示、數量的展示以及底部還有一些其他的按鈕。以下是我截取兩次不同的活動的“我的獎品”列表展示模塊。

這兩種樣式的組件，大致的框架上都是一樣的，點擊側邊欄的 “我的獎勵” 和 “我的背包”，只是展現形式和展示數據類型以及按鈕的點擊事件是不一樣的。

所以，如果第三次 H5 ，或者以后的 H5 都寫一遍這樣的東西意義不大。所以，這樣使用頻率比較高的模塊，就必須和業務方討論。我們可以把這樣的模塊定出一個基本的交互和原型，統一做成一個通用列表展示組件，這個組件必須支持通用樣式的展示，也需要支持特殊的樣式展示，例如下面的情況

最左邊的也就是正常的列表樣式，右邊的就是一些特殊的卡片和文字樣式，所以，一個組件需要考慮的東西有很多。

這里叫列表展示組件而不叫“我的獎品組件”的原因是：我們只需要通過參數控制它需要展示什么的內容、標題是什么、按鈕名稱是什么、點擊之后的邏輯是什么，而不是只局限于我的獎品列表，它也可以用于其他數據的展示。同時，這樣的通用組件可以適用于各種 H5 。組件拿來即用或者用于一些 H5 自動生成的平臺，只要根據文檔傳參數就可以了。

通過 config 控制具體的展示名字還有按鈕id的標記區分事件，data 初始化組件的列表，與業務區分開來這里就變成了一個很純粹的列表展示組件，可以展示任意的數據，只要按照格式傳參就行。這里只是寫一個很簡單的 DEMO ，后面會提到入參和函數綁定。

規劃公共組件

拿到設計稿之后找出通用的模塊，再根據類似模塊之間的差異定出一個通用的規則。下面是本次大型 H5 的設計稿總覽：

第一大類：分組賽，資格賽，彈窗，規則和投票等

第二大類：沖刺賽，總決賽，PK模塊等

此次大型 H5 的分為了幾個大階段，分組賽，資格賽，沖刺賽和總決賽。看上去是非常多內容的，所以需要找出相似的模塊，再和業務側溝通從這幾個賽段來看，可以抽離成組件的是

1. TAB 切頁組件
2. 進度條組件
3. 列表記錄組件
4. 時間軸組件
5. 排行榜組件
6. 倒計時組件
7. 投票組件
8. 側邊欄懸浮組件
9. pk 模塊組件
10. 我的信息展示組件
11. 頂部組件
12. 吸底組件
13. 按鈕組件
14. 主播展示組件

這里就拿一部分的組件描述一下實現思路，全部寫的話就太多了，而且有些地方邏輯實現上也是比較像的。

組件的通用參數

組件傳入參數

一個通用組件所需要的配置參數一般歸納為幾種，最重要的是這個組件的所有需要使用的值，也就是這個初始化參數。其次，是這個組件的一些樣式配置或者是全局參數輔助使用，還有一些情況需要特定的屬于這個組件的 key 。當然，不是說樣式和全局參等等是不重要的參數，而是根據業務的需求來定，可能樣式的參數才是重點這個也是可能的，具體的還得從業務或者這個組件本身的性質考慮，只是在做組件的時候優先考慮功能的實現。以下是我封裝通用組件的一個習慣，分別綁定的參數是 data, styleForm, commonStyle, global, componentKey。以下是一個組件綁定參數和方法的例子：

<template>
  <head-section
    :data="headData"
    :global="global"
    :styleForm="headConfig"
    :commonStyle="headCommonStyle"
    :componentKey="headComponentKey"
    @methods="headMethods"
  />
</template>

<script>
export default {
	data(){
		return {
			// 全局配置
			global: {},
			
			// 頂部組件配置
			headData: {},	
			headConfig: {},
			headCommonStyle: {},
			headComponentKey: {},
		}
	}
}
</script>

data 組件初始化參數

data 是這個組件傳入的初始化參數或者是渲染組件的所有數據，類型是 Object 。組件可以用初始化參數通過 ajax 獲取數據也可以通過 class 執行初始化邏輯或者是直接將數據綁定在這個 data 中。

<script>
// 組件
export default {
props: {
  data: {
    type: Object,
    default: ()=> ({
    	// list:[],                example
    	// total: 10               example
    }),
   },
}
</script>

styleForm 組件的配置參數

styleForm 這個是組件的配置信息，比如這個組件的一些背景、樣式信息以及一些固定的數據不會發生變化的數據。數據格式類型是 Object 。

<script>
// 組件
export default {
props: {
  styleForm: {
    type: Object,
    default: ()=> ({
    	// styles: {},                example
    	// bg: './images/xx.png'      example
    }),
   },
}
</script>

commonStyle 通用樣式配置參數

commonForm 這個參數是通用的樣式配置，比如，控制這個組件的寬、高以及背景色等等。這個我們在自己在獨立開發的 H5 的時候，會按照這樣的參數格式配置。目的是讓組件更加通用，適用于不同的地方，比如一些 H5 的自動生成平臺。 因為，在互聯網大廠里 H5 的開發如果是比較簡單的頁面，是不會單獨用人力去開發的，而是通過平臺配置生成 H5。我們需要做的就是提供各種各樣的組件，讓業務同學去配置使用。所以，平臺的配置是以每個功能模塊劃分，commonForm 可以接入他們的平臺的接口數值，直接在平臺上控制這個組件的寬、高、是否居中等等的基礎樣式。

<script>
// 組件
export default {
props: {
  commonStyle: {
    type: Object,
    default: ()=> ({
    	// width: 300,                example
    	// height: 20                 example
    }),
   },
}
</script>

global 全局屬性

全局屬性指的是這個項目的唯一標記，適用于項目中的任意一個地方。比如說這個項目的 id ，他可能在做上報操作或者在請求接口的時候需要帶上這個參數。那么就由 global 這個參數統一接收。類型也是 Object 。

<script>
// 組件
export default {
props: {
  global: {
    type: Object,
    default: ()=> ({
    	// page_id: 111,                example
    }),
   },
}
</script>

componentKey

componentKey 是組件的標記，主要用于在做區分組件的時候，使用比如上報數據。同時也可以用于一些非常特定的邏輯，提供臨時的解決方法。舉個非常簡單例子：業務方需要畫 10 個圓且背景都是白色，突然間提出要在第 9 個圓中某個位置加上一個黑色的點，其他不變。 這樣既不合理也不通用還砍不掉的需求，臨時的解決方法就是通過 key 寫一個 if else ，之后再說。

<script>
// 組件
export default {
props: {
  componentKey: {
    type: [String,Number],
    default: 1,                     // example
   },
}
</script>

@methods 方法綁定

在組件內通過輸出按鈕 id 或者事件類型，由上一層組件進行執行特定邏輯，這樣的好處是通用的樣式和 DOM 與 JavaScript 分離，不含有業務邏輯一下次也可以直接復用這個組件，不需要再去改。

組件

<template>
    <div class="head-section" style="padding: 0px 0px">
        <div
            class="lottery-btn"
            @click="onClickBtn('lottery', 'normal')"
        ></div>
        <div
            class="nav-btn rule-btn"
            @click="onClickBtn('rule', 'page')"
        ></div>
    </div>
</template>
<script>
export default {
  methods: {
    onClickBtn(id, type='page', eventParams={}) {
      this.$emit('methods',{
        id: type,
        value: eventParams
      });
    },
  },
}
</script>

父級組件

<script>
export default {
  methods: {
    headMethods($Event) {
      const { id, value }=$Event;
      const page=(params)=> { 
        this.goPage();
      };
      const anchor=(params)=> {
        this.goAnchor();
      };
      const clickEventMap={
        'page': page,
        'anchor': anchor,
      };
      // 區分不同事件類型 傳參
      clickEventMap[id](value);
    },
    goAnchor(params) {
    	// ...
    },
    goPage(params) {
    	// ...
    }
  },
}
</script>

頁面頂部組件

組件布局和實現：

組件封裝思路

首先從功能上看，這個組件只能適用于獨立開發的 H5 ，它不適合 H5 生成平臺。或者說這樣的組件在 H5 生成平臺完全沒有意義。因為，左邊的 icon 和右邊按鈕列表，他們在 H5 生成平臺里面，這些按鈕都是靠使用者自己手動配置的地方。例如： 左邊的 icon 就是使用一個按鈕組件拖拽進去，再加上一個跳轉事件。 右邊的 btn-list 可以看成是 3 個獨立按鈕，也和上面一樣用一個按鈕組件拖拽進去，加上一個跳轉事件，再連續配置 3 次。

但是，這一次是獨立開發，所以只能按照可復用定制模版的思路來實現。需要考慮的地方是：

1. 頭圖片支持背景配置
2. 左邊的按鈕支持背景設置，文案設置和顯隱設置。
3. 右側的按鈕列表中支持單個按鈕的背景設置，文案設置和顯隱設置以及支持再新增加多個按鈕的情況下可復用樣式 。

如圖：對應的每個模塊使用一個 ID 作為區分，其中 btn-list 包含以 btn-x 為唯一的標記，內容就是控制這個按鈕的背景，顯隱和文案。

之后再通過 headData 來渲染 btn-list ，數據格式為：

<script>
export default {
  data() {
    return {
    	headData:[
    		{
    			id: 'btn-1',
    			value: {
    				url: '...'
    			}
    		},
    		{
    			id: 'btn-2',
    			value: {
    				url: '...'
    			}
    		}
    		....
    	]
    }
  },
}
</script>

它的核心思想就是通過 ID 關聯數據，通過 ID 關聯配置。這有點像是數據庫里面的主鍵，可以根據這個主鍵可以查詢或者關聯查找其他的數據表。

細節實現要點

寫一個通用的方法，在后面如果有新增的按鈕，可以直接通過傳參 (第幾個按鈕) 控制按鈕的位置。

@function head-nav-btn-top($number) {
  $top: 15;
  $boxHeight: 46;
  @if($number==1){
    @return 385;
  }
  @return 385 + (($top + $boxHeight) * ($number -  1));
}
// .class
top: remit(head-nav-btn-top(1));
top: remit(head-nav-btn-top(2));
top: remit(head-nav-btn-top(3));

錨點跳轉到參數指定位置

headMethods($Event){
  const { id, value }=$Event;
  
  if (id==='lottery-btn') {
  	const scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
  	window.scrollTo(scrollTop, this.$refs[value].offsetTop);
  }
},

倒計時組件

組件布局和實現：

組件封裝思路

倒計時組件在邏輯上是比較簡單的，更多需要考慮倒計時的展示樣式，因為在 H5 里面，每種設計的風格或者業務需求不一樣，不可能一直沿用一種樣式的倒計時，比如這樣

所以需要考慮的點是：

1. 倒計時的多種展示樣式和展示形式，比如是否需要拼接標題和展示天數或者秒數。
2. 倒計時在結束的時候需要執行的下一步邏輯。

細節實現要點

在計算倒計時的方法上有兩種，第一種是獲取本地手機時間再寫一個 inteval 函數遞減計算，第二種是使用 interval 每秒都向服務器進行時間獲取計算出剩余時間。 這里我一般會選擇后面那種，因為，首先本地時間不一定是正確的，也有可能是人為的去修改了系統的時間，其次，本地的 interval 延遲時間不一定準確。比如我們設定 1000 毫秒執行，但是由于部分手機本身的原因，這里可能存在著誤差，設定的是 1000 毫秒，而在實際的執行中，它相當于 800 毫秒。那么就會導致一個問題，本地的時間越算，誤差越大，如果在頁面中的時間停留較短那問題不大，但是如果在頁面的停留時間很長，到了最后看上就是一個大大的 BUG 。所以，每次都讀取服務器時間是比較靠譜的。

實現要點：

<template>
  <div class="countdown-section">
    <div
    	v-if="styleForm.type==='normal'"
      :style="[{ 'background-image': `url(${styleForm.bgUrl})` }]"
      :class="['countdown-section-bg', `width-${styleForm.bgWidth}`]"
    >
      <div class="countdown-content">
        <p class="time-front" v-text="styleForm.timeFront"></p>
        <p class="time" v-text="countTime"></p>
        <p class="time-end" v-text="styleFrom.timeEnd"></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    countdown() {
      ...
      this.timeStr={}   //data
      this.format=['hours', 'minutes','seconds']  // props
      for(let i=0 ;i < format.length; i++ ){
      	this.timeStr=this.time[format[i]];
      }
    },
  },
}
</script>

節點樣式方面：讓 countdown-content 的內容居中，倒計時前后可以配置任意文案，再給 clase="time" 加上一個寬度，這樣的好處是避免了在數字變化的時，因倒計時數字切換發生的抖動而影響到了整個倒計時文案的抖動問題。另一個是，在倒計時外層再包一層 v-if 樣式，這個是來拓展倒計時多種樣式的功能。

邏輯方面：傳入一個時間格式的配置項，比如是否需要展示天數或者秒數，使用一個循環指定數據更新。最后的時間由 computed 計算屬性將 day, hours minutes , seconds 計算出來。同時，倒計時為零的時候支持配置一個方法，例如，最常見的操作就是刷新當前頁面或者是執行跳轉。

進度條組件

組件布局和實現

組件封裝思路

進度條組件和倒計時組件一樣，屬于邏輯比較簡單而比較注重樣式上的一些配置。進度條組件需要考慮的點是：

1. 背景色支持漸變配置
2. 進度條每個節點上面和下面的文案與樣式支持配置
3. 進度條的節點所有內容支持顯隱

細節實現要點

<template>
<div class="progress-content">
  <div class="progress">
    <div class="progress-line" 
    :style="{ width: `${currentProgress}%`, backgroundImage: `linear-gradient(
    to right,
    ${styles.lineStyle.begin},
    ${styles.lineStyle.end}
    )`}"></div>
    <div class="progress-state">
    	<div v-for="(item, index) in styles.list"
    :key="`${index}buttom`"
    :style="[{ 'background-image': `url(${+index <=+current ? styles.dot.high: styles.dot.normal})` }]"
    class="state"
    >
        <div v-if="item.topText" :style="styles.top[index]" :class="['top']" v-text="item.topText"></div>
        <div v-if="item.bottomText" :style="styles.bottom[index]" class="buttom" v-text="item.bottomText"></div>
    	</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  methods: {
   
  },
}
</script>

首先，通過 props 進來的 styles參數， 獲取到這個進度條的顏色，為了進度條能有更多的顏色配置，就是用漸變色來配置，只要傳入一個開始和一個結束的色值。

節點的的樣式和文案全部通過數組渲染，來達到通用配置的目，以下是我截取簡易的配置數據

const progress={
    top: [
        {
            color: '#f5ddff',
        },
        {
            color: '#d6a5ea',
        },
				....
    ],
    bottom: [
        {
            color: '#d6a5ea',
        },
        {
            color: '#d6a5ea',
        },
        ....
    ],
    dot: {
        high: '',
        normal: '',
    },
    list: [
        {
            topText: 'Switch',
            bottomText: '0',
            hidden: false
        },
        {
            topText: '2部',
            bottomText: '10000',
            hidden: false
        },
				...
    ],
    lineStyle:{
         begin:'rgba(255, 166, 248, 1)',
         end:'rgba(255, 58, 210, 1)'   
    }
};

吸底組件

組件布局和實現：

組件封裝思路

吸底部組件和頂部組件一樣，它不適用于 H5 自動生成平臺。吸底組件和頂部組件它們更像是一個容器，在這個容器里面配置其他的組件，所以這里還是做成一個可復用的定制模版。需要考慮的一些點：

1. 最左邊部分的頭像和和昵稱可以寫死固定下來同時需要配置默認打底狀態數據。
2. 中間部分的票數做成可配置的情況可以展示 1 行或者 2 行以及支持顯隱。
3. 最右邊部分的按鈕同樣支持可配置 1 個或者 2 個以及支持顯隱。
4. 可配置背景色

細節實現要點

他們的數據格式是：

<script>
export default {
  data() {
    return {
    	// 數據源綁定
    	suspensionData: {
        userSection: {
        	name: 'xxxx',
        	url: '....png',
        },
        textSection: [
          {
          	'text': `已貢獻助力票數: 600`
          },
          {
          	'text': `剩余助力票數: 400`
          }
        ],
    	},
      // 數據配置樣式設定
      suspensionConfig: {
      	bg: '....png',
        btn: [
          {
            'id': 'get',
            'url': '....png',
            'text': '獲取助力票'
          },
          {
            'id': 'exchange',
            'url': '....png',
            'text': '兌換助力票'
          }
        ]
      },
    },
  },
}
</script>

中間的文字展示和右邊的按鈕使用 Array 的形式渲染

<template>
...
  <div
    v-if="btn && btn.length > 0"
    :class="['item-right, `length-${btn.length}`']"
    >
    ...
  </div>
</template>
<style lang="scss" scoped>
	... 
	.btn{
		...
		&.length-2{
			justify-content: space-between;
		}
		&.length-1{
			justify-content: space-evenly;
		}
	}
</style>

在樣式上線配置好 length-x 情況下是居中還是均分的樣式。中間的文字也是同樣的方法，只是這里就多了一些細節的考慮，比如：字體容器的溢出處理和行間距的一些設定。

頭像和昵稱按理也可以做一些設定，但是這里根據實際的需求來說沒有必要，所以這里就直接固定下來。

投票組件

組件布局和實現

組件封裝思路

這個 H5 的投票功能相對簡單，只有一個增加/減少和最大值。

在做這個組件之前，我其實更想把它做成這樣的形式。如圖：

它可展示圖片，還可以展示選擇票的類型，同時下面還可以配置拓展按鈕也可以綁定執行事件，看上去非常的好。但是后來想了一下，還是覺得這樣投票組件的邏輯會有點冗余，既然是一個投票組件應該不就有其他的東西。

所以我也在原來的基礎上結合這個組件多加了一投票的類型選擇。就是這樣：

這樣看上去邏輯簡單，而且也確實多了是一個實用的功能。所以，這個組件需要考慮的點是：

1. 增加/減少和最大值的計算
2. 類型選擇同時可以支持拓展以及默認隱藏使用。

細節實現要點

<template>
...
<!-- 票數編輯區域 -->
<div class="ticket-section">
  <div class="ticket-edit">
    <input class="ticket-text" v-model="ticketInfo['count']"/>
    <div :class="['ticket-add']" @click="ticketAdd()" >
  		<p class="add">+</p>
  	</div>
    <div :class="['ticket-min']" @click="ticketMins">
      <p class="min">-</p>
  	</div>
  </div>
    <div :class="['ticket-max', 'allow']">
      <p class="max" @click="ticketAdd(true)">MAX</p>
  	</div>
  </div>
  
  <!-- 類型選擇區域 -->
  <div class="ticket-type-section">
    <div v-if="typeList.length > 0" class="ticket-type-content">
      <div v-for="(item,index) in typeList" :key="`type${index}`"
        class="ticket-type-item">
      <div :class="['box',item.active? 'active': '']"></div>
      <div v-text="item.text"></div>
    </div>
  </div>
</div>
...
</template>

首先用一個數組渲染類型列表，編輯區域票數區域比較重要的的就是做好數字上的校驗和統一管理檢驗失敗的提示文案。

const tipsMap={
    error: '親！剩余助力票不足，請重新輸入！',
    success: '助力成功！',
    errorNum: '必須是一個數值,注意不能有空格',
    errorMax: '親，剩余助票不足，請重新輸入',
    errorZero: '親，剩余助票不足，請去獲取哦！',
};

const validCount=(num)=> {
this.$set(this, 'showTips', false);
  const regExp=/^\+?[1-9][0-9]*$/g;
  if (+this.ticketInfo.count===0) {
   return false
  }
  if (!regExp.test(this.ticketInfo.count)) {
  	this.toast(tipsMap['errorNum'])
  	return false;
	};
  if (+this.ticketInfo.count > +this.ticketInfo.left){
  	this.toast(tipsMap['errorMax'])
  	return false;
  };
  // 檢驗通過
  return true;
  }
},
validCount(1000);

排行榜組件

組件布局和實現

組件封裝思路

排行組件是這一個活動邏輯最復雜的一個，他除了需要支持到這個活動展示的列表數據，也需要支持到以后其他 H5 的數據展示，也就是支持拓展。 比如：在這個排行榜中，第一列是一個頭像列表類型，第二列是一個文字類型，第三列也是一個頭像類型，第四列是一個按鈕類型。那么，在組件初始化的時候通過 config 配置定義好每一列的類型和樣式。如圖：

const rankConfig={
    init: [
          {
            type: 'headList',
            key: 'head',
            name: '超能',
            tips: 'live',
            style: {
              width: '25%',
              color: '#ffffff',
              background: '#c69494',
            }
          },
          {
            type: 'text',
            key: 'score',
            name: '總助力值',
            style: {
              width: '25%',
              color: '#ffffff',
              background: '#e53de7',
            }
          },
				....
    ]
};

這一段是部分配置

1. type 是數據類型，比如 純文字，頭像或者按鈕。
2. key 是對應實際數據的 key，通過這個 key 讓這一列展示這個字段的內容。
3. name 是這一列的標題
4. style 是這一列的具體樣式配置參數。

以后無論是需要怎么樣的一個排行榜，先查找文檔看看是不是都有這樣類型的樣式，沒有的話拓展，有的話只需要傳入配置參數之后，再傳入具體的數據就可以跑起一個排行榜的組件。

從功能上看他需要支持：

1. 支持數據分頁
2. 支持數據展示和拓展展示的數據類型
3. 點擊事件通用配置

細節實現要點

標題部分主要代碼：

<template>
...
<div v-for="(item, index) in styles.init"
     :style="item.style"
     :class="['column-item', 'column-type']"
     :key="`${index}column`">
     
	<div class="item-title">
		
    <p class="title-text" v-text="item.name"></p>
  	<slot class="title-tips" :name="`sub-${item.key}`"></slot>
  </div>
</div>
</template>

使用配置項循環列出列表的標題，里面有個 icon 的提示圖標，使用插槽的方式插入，這里需要用 sub-${item.key} 作為一個區分，需要顯示 tips icon 的標題才展示。這里只能用 key 作為區分不能用 type，原因是一個列表里面是有可能有相同的 type 列的。

列表的渲染，這里需要各種類型的展示再抽離成一個小組件，比如將 text ，headList 等等抽離成一個小組件，需要的時候再引用。這樣做的好處出邏輯分開容易維護，小組件容易拓展，排行榜的代碼也不會過多，如圖：

他的核心代碼如下：

<template>
...
<div
class="column"
v-for="(item, index) in info.list"
:key="`${index}rankList`"
>
  <div
  v-for="(styleItem, styleIndex) in styles.init"
  :key="`${styleIndex}rankConfig`"
  :class="'column-item'"
  >
    <HeadList
      v-if="styleItem.type==='headList'"
      @methods="onClickEvent(item.key, item)"
      ><HeadList>

    <Text v-if="styleItem.type==='text'"></Text>

    <ListBtn v-if="styleItem.type==='btn'"></ListBtn>
  </div>
</div>
</template>

第一層循環遍歷所有列表數據，第二層循環遍歷配置表，根據類型渲染具體內容，之后每一個塊的內容都通過小組件形式引入。

I組件

element- 餓了么出品的Vue2的web UI工具套件

Vux- 基于Vue和WeUI的組件庫

mint-ui- Vue 2的移動UI元素

iview- 基于 Vuejs 的開源 UI 組件庫

Keen-UI- 輕量級的基本UI組件合集

vue-material- 通過Vue Material和Vue 2建立精美的app應用

muse-ui- 三端樣式一致的響應式 UI 庫

vuetify- 為移動而生的Vue JS 2組件框架

vonic- 快速構建移動端單頁應用

eme- 優雅的Markdown編輯器

vue-multiselect- Vue.js選擇框解決方案

vue-table- 簡化數據表格

VueCircleMenu- 漂亮的vue圓環菜單

vue-chat- vuejs和vuex及webpack的聊天示例

radon-ui- 快速開發產品的Vue組件庫

vue-waterfall- Vue.js的瀑布布局組件

vue-carbon- 基于 vue 開發MD風格的移動端

vue-beauty- 由vue和ant design創建的優美UI組件

vue-blu- 幫助你輕松創建web應用

vueAdmin- 基于vuejs2和element的簡單的管理員模板

vue-syntax-highlight- Sublime Text語法高亮

vue-infinite-scroll- VueJS的無限滾動指令

Vue.Draggable- 實現拖放和視圖模型數組同步

vue-awesome-swiper- vue.js觸摸滑動組件

vue-calendar- 日期選擇插件

bootstrap-vue- 應用于Vuejs2的Twitter的Bootstrap 4組件

vue-swipe- VueJS觸摸滑塊

vue-amap- 基于Vue 2和高德地圖的地圖組件

vue-chartjs- vue中的Chartjs的封裝

vue-datepicker- 日歷和日期選擇組件

markcook- 好看的markdown編輯器

vue-google-maps- 帶有雙向數據綁定Google地圖組件

vue-progressbar- vue輕量級進度條

vue-picture-input- 移動友好的圖片文件輸入組件

vue-infinite-loading- VueJS的無限滾動插件

vue-upload-component- Vuejs文件上傳組件

vue-datetime-picker- 日期時間選擇控件

vue-scroller- Vonic UI的功能性組件

vue2-calendar- 支持lunar和日期事件的日期選擇器

vue-video-player- VueJS視頻及直播播放器

vue-fullcalendar- 基于vue.js的全日歷組件

rubik- 基于Vuejs2的開源 UI 組件庫

VueStar- 帶星星動畫的vue點贊按鈕

vue-mugen-scroll- 無限滾動組件

mint-loadmore- VueJS的雙向下拉刷新組件

vue-tables-2- 顯示數據的bootstrap樣式網格

vue-virtual-scroller- 帶任意數目數據的順暢的滾動

DataVisualization- 數據可視化

vue-quill-editor- 基于Quill適用于Vue2的富文本編輯器

Vueditor- 所見即所得的編輯器

vue-html5-editor- html5所見即所得編輯器

vue-msgbox- vuejs的消息框

vue-slider- vue 滑動組件

vue-core-image-upload- 輕量級的vue上傳插件

vue-slide- vue輕量級滑動組件

vue-lazyload-img- 移動優化的vue圖片懶加載插件

vue-drag-and-drop-list- 創建排序列表的Vue指令

vue-progressive-image- Vue的漸進圖像加載插件

vuwe- 基于微信WeUI所開發的專用于Vue2的組件庫

vue-dropzone- 用于文件上傳的Vue組件

vue-charts- 輕松渲染一個圖表

vue-swiper- 易于使用的滑塊組件

vue-images- 顯示一組圖片的lightbox組件

vue-carousel-3d- VueJS的3D輪播組件

vue-region-picker- 選擇中國的省份市和地區

vue-typer- 模擬用戶輸入選擇和刪除文本的Vue組件

vue-impression- 移動Vuejs2 UI元素

vue-datatable- 使用Vuejs創建的DataTableView

vue-instant- 輕松創建自動提示的自定義搜索控件

vue-dragging- 使元素可以拖拽

vue-slider-component- 在vue1和vue2中使用滑塊

vue2-loading-bar- 最簡單的仿Youtube加載條視圖

vue-datepicker- 漂亮的Vue日期選擇器組件

vue-video- Vue.js的HTML5視頻播放器

vue-toast-mobile- VueJS的toast插件

vue-image-crop-upload- vue圖片剪裁上傳組件

vue-tooltip- 帶綁定信息提示的提示工具

vue-highcharts- HighCharts組件

vue-touch-ripple- vuejs的觸摸ripple組件

coffeebreak- 實時編輯CSS組件工具

vue-datasource- 創建VueJS動態表格

vue2-timepicker- 下拉時間選擇器

vue-date-picker- VueJS日期選擇器組件

vue-scrollbar- 最簡單的滾動區域組件

vue-quill- vue組件構建quill編輯器

vue-google-signin-button- 導入谷歌登錄按鈕

vue-svgicon- 創建svg圖標組件的工具

vue-float-label- VueJS浮動標簽模式

vue-baidu-map- 基于 Vue 2的百度地圖組件庫

vue-social-sharing- 社交分享組件

vue2-editor- HTML編輯器

vue-tagsinput- 基于VueJS的標簽組件

vue-easy-slider- Vue 2.x的滑塊組件

datepicker- 基于flatpickr的時間選擇組件

vue-chart- 強大的高速的vue圖表解析

vue-music-master- vue手機端網頁音樂播放器

handsontable- 網頁表格組件

vue-simplemde- VueJS的Markdown編輯器組件

vue-popup-mixin- 用于管理彈出框的遮蓋層

cubeex- 包含一套完整的移動UI

vue-fullcalendar- vue FullCalendar封裝

vue-material-design- Vue MD風格組件

vue-morris- Vuejs組件封裝Morrisjs庫

we-vue- Vue2及weui1開發的組件

vue-image-clip- 基于vue的圖像剪輯組件

vue-bootstrap-table- 可排序可檢索的表格

vue-radial-progress- Vue.js放射性進度條組件

vue-slick- 實現流暢輪播框的vue組件

vue-pull-to-refresh- Vue2的上拉下拉

vue-form-2- 全面的HTML表單管理的解決方案

vue-side-nav- 響應式的側邊導航

mint-indicator- VueJS移動加載指示器插件

chartjs- Vue Bulma的chartjs組件

vue-scroll- vue滾動

vue-ripple- 制作谷歌MD風格漣漪效果的Vue組件

vue-touch-keyboard- VueJS虛擬鍵盤組件

vue-chartkick- VueJS一行代碼實現優美圖表

vue-ztree- 用 vue 寫的樹層級組件

vue-m-carousel- vue 移動端輪播組件

vue-datepicker-simple- 基于vue的日期選擇器

vue-tabs- 多tab頁輕型框架

vue-verify-pop- 帶氣泡提示的vue校驗插件

vue-parallax- 整潔的視覺效果

vue-img-loader- 圖片加載UI組件

vue-typewriter- vue組件類型

vue-smoothscroll- smoothscroll的VueJS版本

vue-city- 城市選擇器

vue-tree- vue樹視圖組件

vue-ios-alertview- iOS7+ 風格的alertview服務

dd-vue-component- 訂單來了的公共組件庫

paco-ui-vue- PACOUI的vue組件

vue-cmap- Vue China map可視化組件

vue-button- Vue按鈕組件

開發框架

vue.js- 流行的輕量高效的前端組件化方案

vue-admin- Vue管理面板框架

electron-vue- Electron及VueJS快速啟動樣板

vue-2.0-boilerplate- Vue2單頁應用樣板?

vue-spa-template- 前后端分離后的單頁應用開發

Framework7-Vue- VueJS與Framework7結合

vue-bulma- 輕量級高性能MVVM Admin UI框架

vue-webgulp- 仿VueJS Vue loader示例

vue-element-starter- vue啟動頁

實用庫

vuex- 專為 Vue.js 應用程序開發的狀態管理模式

vuelidate- 簡單輕量級的基于模塊的Vue.js驗證

qingcheng- qingcheng主題

vue-desktop- 創建管理面板網站的UI庫

vue-meta- 管理app的meta信息

vue-axios- 將axios整合到VueJS的封裝

vue-svg-icon- vue2的可變彩色svg圖標方案

avoriaz- VueJS測試實用工具庫

vue-framework7- 結合VueJS使用的Framework7組件

vue-bootstrap-modal- vue的Bootstrap樣式組件

vuep- 用實時編輯和預覽來渲染Vue組件

vue-online- reactive的在線和離線組件

vue-lazy-render- 用于Vue組件的延遲渲染

vue-password-strength-meter- 交互式密碼強度計

element-admin- 支持 vuecli 的 Element UI 的后臺模板

vue-electron- 將選擇的API封裝到Vue對象中的插件

cleave- 基于cleave.js的Cleave組件

vue-events- 簡化事件的VueJS插件

vue-shortkey- 應用于Vue.js的Vue-ShortKey 插件

vue-cordova- Cordova的VueJS插件

vue-router-transition- 頁面過渡插件

vue-gesture- VueJS的手勢事件插件

http-vue-loader- 從html及js環境加載vue文件

vue-qart- 用于qartjs的Vue2指令

vuemit- 處理VueJS事件

vue-websocket- VueJS的Websocket插件

vue-local-storage- 具有類型支持的Vuejs本地儲存插件

lazy-vue- 懶加載圖片

vue-bus- VueJS的事件總線

vue-reactive-storage- vue插件的Reactive層

vue-notifications- 非阻塞通知庫

vue-lazy-component- 懶加載組件或者元素的Vue指令

v-media-query- vue中添加用于配合媒體查詢的方法

vue-observe-visibility- 當元素在頁面上可見或隱藏時檢測

vue-ts-loader- 在Vue裝載機檢查腳本

vue-pagination-2- 簡單通用的分頁組件

vuex-i18n- 定位插件

Vue.resize- 檢測HTML調整大小事件的vue指令

vuex-shared-mutations- 分享某種Vuex mutations

vue-file-base64- 將文件轉換為Base64的vue組件

modal- Vue Bulma的modal組件

Famous-Vue- Famous庫的vue組件

leo-vue-validator- 異步的表單驗證組件

Vue-Easy-Validator- 簡單的表單驗證

vue-truncate-filter- 截斷字符串的VueJS過濾器

vue-zoombox- 一個高級zoombox

vue-input-autosize- 基于內容自動調整文本輸入的大小

vue-lazyloadImg- 圖片懶加載插件

服務端

nuxt.js- 用于服務器渲染Vue app的最小化框架

express-vue- 簡單的使用服務器端渲染vue.js

vue-ssr- 非常簡單的VueJS服務器端渲染模板

vue-ssr- 結合Express使用Vue2服務端渲染

vue-easy-renderer- Nodejs服務端渲染

輔助工具

DejaVue- Vuejs可視化及壓力測試

vue-play- 展示Vue組件的最小化框架

vscode-VueHelper- 目前vscode最好的vue代碼提示插件

vue-generate-component- 輕松生成Vue js組件的CLI工具

vue-multipage-cli- 簡單的多頁CLI

VuejsStarterKit- vuejs starter套件

應用實例

koel- 基于網絡的個人音頻流媒體服務

pagekit- 輕量級的CMS建站系統

vuedo- 博客平臺

jackblog-vue- 個人博客系統

vue-cnode- 重寫vue版cnode社區

CMS-of-Blog- 博客內容管理器

rss-reader- 簡單的rss閱讀器

vue-ghpages-blog- 依賴GitHub Pages無需本地生成的靜態博客

swoole-vue-webim- Web版的聊天應用

vue-dashing-js- nuvo-dashing-js的fork

fewords- 功能極其簡單的筆記本

vue-blog- 使用Vue2.0 和Vuex的vue-blog

Demo示例

Vue-cnodejs- 基于vue重寫Cnodejs.org的webapp

NeteaseCloudWebApp- 高仿網易云音樂的webapp

vue-zhihu-daily- 知乎日報 with Vuejs

vue-wechat- vue.js開發微信app界面

vue2-demo- 從零構建vue2 + vue-router + vuex 開發環境

eleme- 高仿餓了么app商家詳情

vue-demo- vue簡易留言板

maizuo- vue/vuex/redux仿賣座網

spa-starter-kit- 單頁應用啟動套件

vue-music- Vue 音樂搜索播放

douban- 模仿豆瓣前端

vue-Meizi- vue最新實戰項目

zhihudaily-vue- 知乎日報web版

vue-demo-kugou- vuejs仿寫酷狗音樂webapp

VueDemo_Sell_Eleme- Vue2高仿餓了么外賣平臺

vue2.0-taopiaopiao- vue2.0與express構建淘票票頁面

vue-leancloud-blog- 一個前后端完全分離的單頁應用

node-vue-server-webpack- Node.js+Vue.js+webpack快速開發框架

mi-by-vue- VueJS仿小米官網

vue-fis3- 流行開源工具集成demo

vue2.x-douban- Vue2實現簡易豆瓣電影webApp

vue-demo-maizuo- 使用Vue2全家桶仿制賣座電影

vue-zhihudaily- 知乎日報 Web 版本

vue-adminLte-vue-router- vue和adminLte整合應用

vue-axios-github- 登錄攔截登出功能

Zhihu-Daily-Vue.js- Vuejs單頁網頁應用

hello-vue-django- 使用帶有Django的vuejs的樣板項目

vue-cnode- vue單頁應用demo

x-blog- 開源的個人blog項目

vue-express-mongodb- 簡單的前后端分離案例

websocket_chat- 基于vue和websocket的多人在線聊天室

photoShare- 基于圖片分享的社交平臺

vue-zhihudaily-2.0- 使用Vue2.0+vue-router+vuex創建的zhihudaily

notepad- 本地存儲的記事本

vueBlog- 前后端分離博客

vue-ruby-china- VueJS框架搭建的rubychina平臺

Zhihu_Daily- 基于Vue和Nodejs的Web單頁應用

vue-koa-demo- 使用Vue2和Koa1的全棧demo

vue2.x-Cnode- 基于vue全家桶的Cnode社區

life-app-vue- 使用vue2完成多功能集合到小webapp

github-explorer- 尋找最有趣的GitHub庫

vue-trip- vue2做的出行webapp

vue-ssr-boilerplate- 精簡版的ofvue-hackernews-2

vue-bushishiren- 不是詩人應用

houtai- 基于vue和Element的后臺管理系統

ios7-vue- 使用vue2.0 vue-router vuex模擬ios7

Framework7-VueJS- 使用移動框架的示例

cnode-vue- 基于vue和vue-router構建的cnodejs web網站SPA

vue-cli-multipage-bootstrap- 將vue官方在線示例整合到組件中

vue-cnode- 用 Vue 做的 CNode 官網

HyaReader- 移動友好的閱讀器

zhihu-daily- 輕松查看知乎日報內容

seeMusic- 跨平臺云音樂播放器

vue-cnode- 使用cNode社區提供的接口

zhihu-daily-vue- 知乎日報

sls-vuex2-demo- vuex2商城購物車demo

vue-dropload- 用以測試下拉加載與簡單路由

vue-cnode-mobile- 搭建cnode社區

Vuejs-SalePlatform- vuejs搭建的售賣平臺demo

v-notes- 簡單美觀的記事本

vue-starter- VueJs項目的簡單啟動頁

vue-memo- 用 vue寫的記事本應用