最近給自己做一個(gè)旅游站，逛了好多旅游APP，發(fā)現(xiàn)有個(gè)app的小功能有點(diǎn)兒吸引我，但苦于自己技術(shù)能力有限，開(kāi)發(fā)起來(lái)非常的費(fèi)勁。
不過(guò).....呵呵呵?。?！
被我實(shí)現(xiàn)了！
下面我先講講這個(gè)功能是個(gè)啥樣的！
因?yàn)槲沂亲龅穆糜握?，那么我想做到的用戶體驗(yàn)是給用戶推薦到了某個(gè)城市你該怎么去玩，全國(guó)1月份最適合去哪兒，2月份最適合去哪兒等等，反正就是一年12個(gè)月，每個(gè)月最適合去哪兒出游能夠欣賞到最美的風(fēng)景。
那么舉例：
1月份，最適合去湖南的張家界；
2月份，最適合去安徽的黃山；
3月份，最適合去江西的婺源；
......
12月份，最適合去東北的雪鄉(xiāng)。
好，那么想法是有了。
接下來(lái)就是實(shí)現(xiàn)，這個(gè)功能可能對(duì)于熟悉js代碼的一點(diǎn)兒都不難，可苦于我這種小白。
好了，廢話不多說(shuō)，看演示。
1、首先，我需要js給我判斷當(dāng)前是幾月份，現(xiàn)在是5月份，那么我就需要5月排在第一個(gè)，后面6、7、8、......、12、1、2、3、4月一次排序；
2、我給其月份上面增加了一個(gè)tab選項(xiàng)卡事件，讓其下面展示不同的內(nèi)容【注意：這個(gè)你需要在你的后臺(tái)創(chuàng)建1-12月的欄目，你發(fā)布內(nèi)容時(shí)就可以做單獨(dú)區(qū)分了】。
看代碼......
<div class="qyq_MonthBox">
<ul class="month_list"></ul>
</div>
<div class="qyq_MonthlyBox">
<div class="qyq_Monthly"></div>
</div>
上面是html代碼，注意month_list和qyq_Monthly下面會(huì)通過(guò)js自動(dòng)渲染1-12月份的數(shù)據(jù)。
下面是js代碼
// 獲取當(dāng)前月份
const currentMonth = new Date().getMonth() + 1;
// 創(chuàng)建月份數(shù)組
const months = [
{ value: 1 name: "1月" }
{ value: 2 name: "2月" }
{ value: 3 name: "3月" }
{ value: 4 name: "4月" }
{ value: 5 name: "5月" }
{ value: 6 name: "6月" }
{ value: 7 name: "7月" }
{ value: 8 name: "8月" }
{ value: 9 name: "9月" }
{ value: 10 name: "10月" }
{ value: 11 name: "11月" }
{ value: 12 name: "12月" }
];
// 將月份數(shù)組按照當(dāng)前月份排序
const sortedMonths = months.slice(currentMonth - 1).concat(months.slice(0 currentMonth - 1));
// 在頁(yè)面中展示月份列表
const monthList = document.querySelector(".month_list");
sortedMonths.forEach((month) => {
const listItem = document.createElement("li");
listItem.textContent = month.name;
if (month.value === currentMonth) {
listItem.classList.add("current-month");
}
monthList.appendChild(listItem);
});
// 定義每個(gè)月份的內(nèi)容
const contents = {
1: `
<div class="card">
<h3>這是 1 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
2: `
<div class="card">
<h3>這是 2 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
3: `
<div class="card">
<h3>這是 3 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
4: `
<div class="card">
<h3>這是 4 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
5: `
{eyou:artlist loop="5" typeid="" titlelen="255" infolen="25" }
<div class="card">
<h3>{$field.title}</h3>
<img src="{$field.litpic}">
</div>
{/eyou:artlist}
`
6: `
<div class="card">
<h3>這是 6 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
7: `
<div class="card">
<h3>這是 7 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
8: `
<div class="card">
<h3>這是 8 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
9: `
<div class="card">
<h3>這是 9 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
10: `
<div class="card">
<h3>這是 10 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
11: `
<div class="card">
<h3>這是 11 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
12: `
<div class="card">
<h3>這是 12 月的標(biāo)題</h3>
<img src="/template/qyqtrip/mobile/skin/assets/images/pic/pic_sw05.png">
</div>
`
};
// 在頁(yè)面中展示月份內(nèi)容
const monthlyContainer = document.querySelector(".qyq_Monthly");
sortedMonths.forEach((month) => {
const monthlyItem = document.createElement("div");
monthlyItem.classList.add("qyq_Monthly_item");
monthlyItem.textContent = month.value;
const content = document.createElement("div");
content.innerHTML = contents[month.value];
monthlyItem.appendChild(content);
monthlyContainer.appendChild(monthlyItem);
});
// 綁定點(diǎn)擊事件，切換月份內(nèi)容
const monthItems = document.querySelectorAll(".month_list li");
const monthlyItems = document.querySelectorAll(".qyq_Monthly_item");
monthItems.forEach((item index) => {
item.addEventListener("click" () => {
// 切換當(dāng)前月份樣式
monthItems.forEach((item) =>
item.classList.remove("current-month")
);
item.classList.add("current-month");
// 切換 qyq_Monthly_item 顯示
monthlyItems.forEach((item i) => {
if (i === index) {
item.classList.add("show");
item.classList.remove("hide");
} else {
item.classList.add("hide");
item.classList.remove("show");
}
});
});
});
// 頁(yè)面加載完成時(shí)，默認(rèn)顯示當(dāng)前月份的內(nèi)容
window.addEventListener("load" () => {
const defaultIndex = sortedMonths.findIndex(
(month) => month.value === currentMonth
);
monthItems[defaultIndex].click();
});注意看，const contents里面就是你自定義該展示給用戶的內(nèi)容，你可以自定義，可以通過(guò)eyou的文章標(biāo)簽去隨意進(jìn)行調(diào)用。
css樣式大家就隨意去修改，沒(méi)有截圖沒(méi)有錄屏，代碼可以直接復(fù)制使用。
不一定適合所有人，能給一部分小伙伴帶來(lái)啟發(fā)也是功德無(wú)量。