增加新功能

app.json

@@ -3,7 +3,8 @@
     "pages/index/index",
     "pages/classification/classification",
     "pages/collection/collection",
-    "pages/user/user"
+    "pages/user/user",
+    "pages/index/bangdan/bangdan"
   ],
   "window": {
     "navigationBarTitleText": "喜马拉雅",

app.wxss

@@ -28,11 +28,14 @@
     width: 100%;
     height: 80rpx;
     border-radius: 50rpx;
+    border: 0rpx;
+    outline: none;
 }
 .wechatLogin button{
     background-color: #70E500;
     border-radius: 50rpx;
-    border: 1rpx solid #70E500;
+    /* border: 1rpx solid #70E500; */
+    border: none;
     color: #fff;
 }
 .phoneLogin{
@@ -98,6 +101,6 @@
   }
   .Title-right{
     float: right;
-    font-size: 28rpx;
+    font-size: 26rpx;
     color: #aaa;
   }

pages/classification/classification.js

@@ -157,37 +157,60 @@ Page({
           {text:"历史"}
         ]
       },
+      {
+        title:"广播剧",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"戏曲",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
     ]
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
+
   onLoad: function (options) {
     var that = this;
+    //调用getSystemInfo APi获取到用户的手机屏幕高度，动态设置scroll-view的高度
+
+    // 还有缺陷，代改进
     wx.getSystemInfo({
       success (res) {
-        console.log(res.screenHeight);
-        var height = (res.screenHeight*2);
+        console.log(res.windowHeight);
+        // var heightleft = (res.windowHeight*2);
+        var height = (res.windowHeight*2);
         console.log(height);
         that.setData({
-          phoneHeight:height
+          phoneHeight:height,
         })
       }
     })
   },
 
+  //随着滚动动态设置左侧边栏的选中态
   showActive:function (e) {
-    console.log(e);
-    if(e.target.offsetTop=== parseInt(281.4*e.target.dataset.index)){
-      that.setData({
-        activeIndex: e.target.dataset.index,
-      })
-    }
-    // this.setData({
-    //   activeIndex: e.detail
-    //  })
+    //方法欠佳，还需改进
+    console.log(parseInt( e.detail.scrollTop/125));
+    var index = parseInt( e.detail.scrollTop/125);
+    this.setData({
+      activeIndex: index
+     })
   },
+  // 侧边栏的点击事件
   change:function (e){
     var that = this;
     console.log(e)
@@ -197,52 +220,4 @@ Page({
       TabCur: e.currentTarget.dataset.id,
     })
   },
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
 })

pages/classification/classification.wxml

@@ -8,7 +8,7 @@
 <!-- 分类索引 -->
 <view class="ification">
     <!-- 左边部分 -->
-   
+    <!-- 刻度尺的样式未能实现 -->
     <scroll-view class="scroll-left" scroll-y scroll-with-animation style="height:{{phoneHeight}}rpx" scroll-top="{{VerticalNavTop}}">
         <block wx:for="{{ificationTitle}}" wx:key="index">
             <view class="leftTitle {{index === activeIndex ? 'active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">— {{item.title}}</view>

pages/classification/classification.wxss

@@ -21,7 +21,7 @@
     
 }
 .active{
-    color: orange;
+    color: #ff520f;
 }
 .contentScroll-item{
     width: auto;

pages/index/bangdan/bangdan.js

@@ -0,0 +1,57 @@
+const app = getApp();
+// 定义一个全局变量保存从接口获取到的数据，以免重复请求接口
+var resut; 
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    currentTab:0,
+    navTitle:[
+      {title:'经典必听'},
+      {title:'优质专辑'},
+      {title:'有声小说'},
+      {title:'儿童教育'},
+      {title:'人文历史'},
+      {title:'最潮外语'},
+      {title:'商业财经'},
+      {title:'热门新闻'}
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var that = this;
+    wx.request({
+      url: 'http://mobile.ximalaya.com/mobile/discovery/v3/recommend/hotAndGuess?code=43_310000_3100&device=android&version=5.4.45',
+      
+      header: {'content-type':'application/json'},
+      method: 'GET',
+      dataType: 'json',
+      responseType: 'text',
+      success: (res)=>{
+        resut = res;
+        console.log(res);
+        that.setData({
+          list: res.data.hotRecommends.list[0].list
+        })
+      },
+      fail: ()=>{},
+      complete: ()=>{}
+    });
+  },
+  handleClick(e) {
+    let currentTab = e.currentTarget.dataset.index;
+    // 实现每一个tabbar切换对应内容的原理，根据每一个tabbar的index对应数组中的数据
+    this.setData({
+      currentTab,
+      list: resut.data.hotRecommends.list[currentTab].list
+    })
+  },
+  pullDown:function(){
+    
+  }
+})

pages/index/bangdan/bangdan.json

@@ -0,0 +1,4 @@
+{  
+  "usingComponents": {},
+  "navigationBarTitleText": "榜单"
+}

pages/index/bangdan/bangdan.wxml

@@ -0,0 +1,46 @@
+<view class="top-nav">
+  <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" catchtouchmove="preventTouchMove" >
+    <view class="navigate-item" id="item{{index}}" wx:for="{{navTitle}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick">
+      <view class="names {{currentTab === index ? 'active' : ''}}">{{item.title}}</view>
+      <view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
+    </view>
+  </scroll-view>
+  <!-- 下拉按钮 -->
+  <view class="pull-down" bindtap="pullDown">
+    <view class="icon-right"></view>
+  </view>
+</view>
+<!-- 对应的内容区 -->
+<block wx:for="{{list}}" wx:key="{{index}}">
+  <view class="content">
+    <view class="indexNumber">
+    <!-- 此处写法不对，到了两位数的时候就不行了，并无好的方法，这里应该是后端给的数据 -->
+      <view>0{{index}}</view>
+    </view>
+    <image src="{{item.albumCoverUrl290}}"></image>
+    <view class="content-left">
+      <view class="content-title">{{item.title}}</view>
+      <view class="content-text">{{item.trackTitle}}</view>
+      <view class="count">
+        <view style="margin-right:25rpx;">
+          <!-- 本例中33.2亿的单位是写死的，此处应该是后端返回数据吧 -->
+          <text class="icon"></text>
+          <text class="">33.2亿</text>
+        </view>
+        <view>
+          <text class="icon"></text>
+          <text class="">44集</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</block>
+
+<!-- 蒙布 -->
+<!-- <view class="cover">
+  <view class="">
+    <view class="">
+      撒大赛
+    </view>
+  </view>
+</view> -->

pages/index/bangdan/bangdan.wxss

@@ -0,0 +1,134 @@
+.top-nav{
+  width: 100%;
+  height: 80rpx;
+  display: flex;
+  justify-content: start;
+}
+
+.scroll-wrapper {
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  background: #FFF;
+  padding-left: 20rpx;
+  width: 90%;
+  height: 85rpx;
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.navigate-item {
+  display: inline-block;
+  text-align: center;
+  height: 90rpx;
+  line-height: 90rpx;
+  margin-right: 80rpx;
+}
+
+.names {
+  font-size: 28rpx;
+  color: #3c3c3c;
+}
+
+.names.active {
+  color: #ff520f;
+  font-weight: bold;
+  font-size: 34rpx;
+}
+
+.currtline {
+  margin: -8rpx auto 0 auto;
+  width: 100rpx;
+  height: 1rpx;
+  border-radius: 4rpx;
+}
+
+.currtline.active {
+  background: #ff520f;
+  transition: all .3s;
+}
+
+.pull-down{
+  width: 10%;
+  height: 25rpx;
+  padding: 30rpx 0rpx;
+  background-color: rgb(249, 249, 249);
+  text-align: center;
+  color: #ff520f;
+  line-height: 30rpx
+}
+/* 内容区的代码 */
+
+.content {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10rpx;
+  padding-top: 30rpx;
+}
+
+.indexNumber {
+  width: 15%;
+  height: auto;
+  padding: 20rpx 20rpx;
+  text-align: center;
+  font-size: 50rpx;
+  color: #ff520f;
+}
+
+.content image {
+  width: 140rpx;
+  height: 140rpx;
+  margin-top: 10rpx;
+}
+
+.content-left {
+  padding: 10rpx 0rpx;
+  margin-left: 30rpx;
+  width: 60%;
+  height: auto;
+  border-bottom: 1rpx solid #ccc;
+}
+
+.content-title{
+  font-size: 35rpx;
+  height: 40rpx;
+  color: #000;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.content-text{
+  height: 40rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 27rpx;
+  text-align: left;
+  color: #ccc;
+  margin-top: 15rpx;
+}
+.count{
+  font-size: 27rpx;
+  color: #ccc;
+  display: flex;
+  justify-content: start;
+  margin-top: 15rpx;
+}
+
+/* 蒙布 */
+
+.cover{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 9999;
+}

pages/index/index.js

@@ -17,13 +17,6 @@ Page({
       '/image/ad6.jpg',
       '/image/ad7.jpg'
     ],
-    navList:[
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"榜单"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"听小说"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"情感电台"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"听相声"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"儿童故事"},
-    ],
     swiperCurrent: 0,
   },
   //轮播图改变事件
@@ -57,53 +50,9 @@ Page({
       complete: ()=>{}
     });
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-    
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-    
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-    
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-    
+  goToBangDan:function(){
+    wx.navigateTo({
+      url: '/pages/index/bangdan/bangdan',
+    })
   }
 })

pages/index/index.wxml

@@ -10,7 +10,7 @@
     <!-- 轮播图图片 -->
     <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key>
       <!-- 加上widthFix可以使图片自适应 -->
-      <image src="{{item}}" mode="widthFix"></image>
+      <image src="{{item}}" ></image>
     </swiper-item>
   </swiper>
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
@@ -23,11 +23,28 @@
 </view>
 <!-- 宫格导航 -->
 <view class="nav">
-  <block wx:for="{{navList}}" wx:key>
-    <view class="navItem">
+  <block>  
+  <!-- 因为每个宫格的导航都不一样所以没有使用循环 -->
+    <view class="navItem" bindtap="goToBangDan">
       <!-- 因为没有合适的图，所以全部使用的一样的 -->
-      <image class="navIcon" src="{{item.navIconImg}}" mode="widthFix" lazy-load="false"></image>
-      <text class="navText">{{item.navText}}</text>
+      <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">榜单</text>
+    </view>
+     <view class="navItem" bindtap="">
+      <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">听小说</text>
+    </view>
+     <view class="navItem" bindtap="">
+      <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">情感电台</text>
+    </view>
+     <view class="navItem" bindtap="">
+      <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">听相声</text>
+    </view>
+     <view class="navItem" bindtap="">
+      <image class="navIcon" src="/image/nav-icon/bangdan.png" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">儿童故事</text>
     </view>
   </block>
 </view>

pages/index/index.wxss

@@ -2,20 +2,26 @@
 
 /* 轮播图 */
 .swiper-container{
-  width: 90%;
+  width: 95%;
+  height: 280rpx;
   margin: 0rpx auto;
   position: relative;
 }
+
 .swiper{
   width: 100%;
+  height: 100%;
 }
 .swiperItem{
   width: 100%;
+  height: 100%;
   /* height: auto; */
+  margin: 0rpx 20rpx;
   border-radius: 15rpx;
 }
 .swiperItem>image{
-  width: 100%;
+  width: 95%;
+  height: 100%;
   border-radius: 15rpx;
 }
 .dots{

project.config.json

@@ -48,7 +48,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 1,
+			"current": 3,
 			"list": [
 				{
 					"id": -1,
@@ -61,6 +61,20 @@
 					"id": -1,
 					"name": "分类页",
 					"pathName": "pages/classification/classification",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "榜单页",
+					"pathName": "pages/index/bangdan/bangdan",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "user",
+					"pathName": "pages/user/user",
 					"scene": null
 				}
 			]