一,項目目錄
一,頁面效果
1.首頁
2,視頻播放頁
三,首頁頭部公衆部分的製作
在component目錄下的myTitle中
wxml
<!--components/MyTitle/MyTitle.wxml-->
<view class="mytitle">
<!-- logo -->
<navigator class="logo">
<image class="logoimg" style="width: 140rpx;height:60rpx" src="../../icons/logo2.png"></image>
</navigator>
<!-- 搜索 -->
<view class="searchicon">
<image style="width: 60rpx;height:44rpx" src="../../icons/search.png"></image>
</view>
<!-- 用戶 -->
<view class="usericon">
<image style="width: 54rpx;height:60rpx" src="../../icons/user.png"></image>
</view>
<!-- 下載按鈕 -->
<view class="downapp">
下載App
</view>
</view>
wxss
/* components/MyTitle/MyTitle.wxss */
.mytitle{
display: flex;
align-items:center;
padding: 10rpx;
background-color: white;
}
.logo{
flex: 7;
}
.searchicon{
flex:1;
display:flex;
justify-content: center;
align-content: center;
}
.usericon{
flex:2;
display:flex;
justify-content: center;
align-content: center;
}
.downapp{
flex:3;
display:flex;
justify-content: center;
align-items: center;
background-color: pink;
color: #fff;
border-radius:10rpx;
padding:10rpx;
}
使用index,json把myTitle 掛載到首頁上
{
"navigationBarTitleText": "bilibili",
"usingComponents": {
"MyTitle":"../../components/MyTitle/MyTitle"
}
}
index,wxml中使用myTitle組件
<MyTitle></MyTitle>
使用tab導航條
在index,wxml中
<view class="navwrap">
<!-- 自己滾動區域的組件 -->
<scroll-view class="nav" scroll-x>
<!--綁定了activeNav函數,class中若index等於currentIndexNav則使用active修飾-->
<view bindtap="activeNav" data-index="{{index}}"
class="navitem {{index===currentIndexNav?'active':''}}"
<!--for循環訪問navList中的數據-->
wx:for="{{navList}}" wx:key="{{index}}">
{{item.text}}
</view>
</scroll-view>
</view>
wxss修飾
.nav{
white-space: nowrap;
padding: 5rpx 0;
}
.navitem{
padding:20rpx 40rpx;
font-size: 30rpx;
display: inline-block;
}
.navitem.active{
border-bottom: 5rpx solid pink;
}
四,index,js中tab導航
data: {
// 定義這兩個數值
currentIndexNav:0,
navList:[],
},
//點擊首頁導航按鈕
activeNav(e){
this.setData({
//將事件e的導航條點擊的索引值傳遞給currentIndexNav
currentIndexNav:e.target.dataset.index
})
},
//獲取首頁導航數據
getNavList(){
let that=this;
//利用小程序內置發送請求方法
wx.request({
url: 'https://easy-mock.com/mock/5c1dfd98e8bfa547414a5278/bili/navList',
data: {},
method: 'GET',
success: function(res){
if(res.data.code===0){
that.setData({
navList:res.data.data.navList
})
}
},
})
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
this.getNavList();
},