仿bilibili微信小程序一

一，項目目錄

一，頁面效果
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();
    
    },