-
下首頁(yè)的導(dǎo)航模塊
image.png -
這個(gè)數(shù)據(jù)是發(fā)請(qǐng)求來(lái)獲取的,先看一下這個(gè)借口吧,下面這個(gè)公共接口地址,先把他復(fù)制,然后在拼接下面的接口的后綴就可以了
image.png 公共路徑:(https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili)
(https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList)
-
下載一個(gè)postman工具安裝,然后將公共路徑復(fù)制進(jìn)去
image.png
image.png
image.png
- 現(xiàn)在我想先發(fā)請(qǐng)求來(lái)拿一下這個(gè)數(shù)據(jù),然后再考慮做一個(gè)循環(huán)顯示的問(wèn)題,找到我們的index/index.json文件,在data里面先聲明一個(gè)變量
image.png
image.png
image.png
-
在微信小程序內(nèi)部里面,你在發(fā)一些外鏈請(qǐng)求時(shí)候,必須要在小程序官網(wǎng)后臺(tái)配置
image.png
image.png
image.png
image.png
image.png
image.png
- 需要讓他們?cè)谝恍猩巷@示,并且讓他們有一個(gè)橫向滾動(dòng)條顯示的效果
image.png
image.png
image.png
-
然后給樣式,
image.png -
你會(huì)發(fā)現(xiàn)左右拖動(dòng)不了
image.png -
這樣就可以拖動(dòng)了
image.png 再優(yōu)化一下字體的顏色(灰色),下邊框有一個(gè)激活選中的紅色的線
- 需要聲明一下下劃線是紅色的,這么一個(gè)類(lèi)
image.png
image.png
image.png
- 下面做一個(gè)激活選中效果
-
先如下圖
image.png -
到j(luò)s文件中聲明一個(gè)變量
image.png
image.png
image.png
image.png
image.png
- index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
// (被點(diǎn)擊的首頁(yè)導(dǎo)航的菜單的索引)當(dāng)前點(diǎn)擊的時(shí)候選中的菜單欄是第幾個(gè)索引的意思,開(kāi)始等于一個(gè)0
currentIndexNav:0,
//首頁(yè)導(dǎo)航數(shù)據(jù)
navList:[]
},
//點(diǎn)擊首頁(yè)導(dǎo)航按鈕
activeNav(e){
// console.log(123);
//傳遞參數(shù)邏輯
this.setData({
currentIndexNav:e.target.dataset.index
})
},
/**
* 獲取首頁(yè)導(dǎo)航數(shù)據(jù)
*/
getNavList(){
let that=this;
//利用小程序內(nèi)置發(fā)送請(qǐng)求的方法
wx.request({
url:"https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList",
//請(qǐng)求成功之后,會(huì)幫你觸發(fā)一個(gè)回調(diào)函數(shù)
success(res){
// console.log(res);
if(res.data.code===0){
that.setData({
navList:res.data.data.navList
})
}
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
// 1.獲取首頁(yè)導(dǎo)航數(shù)據(jù)
this.getNavList();
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
- index.wxml
<view class="main">
<!-- 公共頭部 -->
<MyTitle></MyTitle>
<!-- 首頁(yè)導(dǎo)航 -->
<view class="nav_wrap">
<!-- 自己滾動(dòng)區(qū)域的組件(小程序自帶的) -->
<scroll-view class="nav" scroll-x="{{true}}">
<!-- 因?yàn)檫@個(gè)標(biāo)簽是做一個(gè)循環(huán)生成的,所以做一個(gè)循環(huán) -->
<view bindtap="activeNav" data-index="{{index}}"
class="nav_item {{index===currentIndexNav?'active':''}}"
wx:for="{{navList}}" wx:key="{{index}}">
{{item.text}}
</view>
</scroll-view>
</view>
</view>
- index.wxss
page{
color: #666;
}
/* 首頁(yè)導(dǎo)航 */
.nav_wrap{
}
.nav{
/* 第一件事,不要因?yàn)橐粋€(gè)空格而換行 */
white-space: nowrap;
/* 加一個(gè)padding值 上下5,左右0 */
padding: 5rpx 0;
}
.nav_item{
padding: 20rpx 45rpx;
/* 字體大小 */
font-size: 30rpx;
/* 在一行上顯示 */
display: inline-block;
}
.nav_item.active{
border-bottom: 5px solid #de688b ;
}
