优化界面

pages/classification/classification.wxml

@@ -11,7 +11,7 @@
     <!-- 刻度尺的样式未能实现 -->
     <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>
+            <view class="leftTitle {{index === activeIndex ? 'active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">{{item.title}}</view>
         </block>
     </scroll-view>
     

pages/classification/classification.wxss

@@ -8,20 +8,25 @@
     justify-content: start;
 }
 .scroll-left{
-    width: 25%;
+    width: 22%;
     padding-top: 55rpx;
+    margin-right: 20rpx;
+    background-color: #fff;
     overflow: hidden;
 }
 .leftTitle{
+    text-align: center;
     font-size: 28rpx;
-    height: 130rpx;
+    height: 100rpx;
+    line-height: 100rpx;
 }
+
 .scroll-right{
     width: 75%;
-    
 }
 .active{
     color: #ff520f;
+    background-color: rgb(243, 244, 246);
 }
 .contentScroll-item{
     width: auto;

pages/index/index.js

@@ -40,11 +40,18 @@ Page({
       responseType: 'text',
       success: (result)=>{
         console.log(result);
-        that.setData({
-          xiaoshuocontent:result.data.hotRecommends.list[0].list,
-          xiangshengcontent:result.data.hotRecommends.list[2].list,
-          tuokocontent:result.data.hotRecommends.list[4].list
-        })
+        if(result.statusCode == 200){
+          that.setData({
+            showitem:true,
+            xiaoshuocontent:result.data.hotRecommends.list[0].list,
+            xiangshengcontent:result.data.hotRecommends.list[2].list,
+            tuokocontent:result.data.hotRecommends.list[4].list
+          })
+        }else{
+          that.setData({
+            showitem:false
+          })
+        }
       },
       fail: ()=>{},
       complete: ()=>{}

pages/index/index.wxml

@@ -86,92 +86,95 @@
     </view>
   </view>
 </view>
-<!-- 有声小说 -->
-<view class="contentList">
-  <view class="barTitle">
-    <view class="Title-left">有声小说</view>
-    <view class="Title-right">查看全部></view>
-  </view>
-  <block wx:for="{{xiaoshuocontent}}" wx:key>
-    <view class="content">
-      <view class="contentImg">
-        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-      </view>
-      <view class="content-right">
-        <view class="title">
-          <view class="titleText">{{item.title}}</view>
-          <view class="introduction">{{item.trackTitle}}</view>
+
+<!-- 有数据的时候显示 -->
+<block wx:if="{{showitem}}">
+  <!-- 有声小说 -->
+  <view class="contentList">
+    <view class="barTitle">
+      <view class="Title-left">有声小说</view>
+      <view class="Title-right">查看全部></view>
+    </view>
+    <block wx:for="{{xiaoshuocontent}}" wx:key>
+      <view class="content">
+        <view class="contentImg">
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="count">
-          <text class="playcount">
-            <!-- <text class="icon-"></text> -->
-            126亿
-          </text>
-          <text class="jicount">
-            {{item.tracks}}集
-          </text>
+        <view class="content-right">
+          <view class="title">
+            <view class="titleText">{{item.title}}</view>
+            <view class="introduction">{{item.trackTitle}}</view>
+          </view>
+          <view class="count">
+            <text class="playcount">
+              <!-- <text class="icon-"></text> -->
+              126亿
+            </text>
+            <text class="jicount">{{item.tracks}}集</text>
+          </view>
         </view>
       </view>
-    </view>
-  </block>
-</view>
-
-<!-- 相声评书 -->
-<view class="contentList">
-  <view class="barTitle">
-    <view class="Title-left">相声评书</view>
-    <view class="Title-right">查看全部></view>
+    </block>
   </view>
-  <block wx:for="{{xiangshengcontent}}" wx:key>
-    <view class="content">
-      <view class="contentImg">
-        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-      </view>
-      <view class="content-right">
-        <view class="title">
-          <view class="titleText">{{item.title}}</view>
-          <view class="introduction">{{item.trackTitle}}</view>
+  <!-- 相声评书 -->
+  <view class="contentList">
+    <view class="barTitle">
+      <view class="Title-left">相声评书</view>
+      <view class="Title-right">查看全部></view>
+    </view>
+    <block wx:for="{{xiangshengcontent}}" wx:key>
+      <view class="content">
+        <view class="contentImg">
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="count">
-          <text class="playcount">
-            <!-- <text class="icon-"></text> -->
-            126亿
-          </text>
-          <text class="jicount">
-            {{item.tracks}}集
-          </text>
+        <view class="content-right">
+          <view class="title">
+            <view class="titleText">{{item.title}}</view>
+            <view class="introduction">{{item.trackTitle}}</view>
+          </view>
+          <view class="count">
+            <text class="playcount">
+              <!-- <text class="icon-"></text> -->
+              126亿
+            </text>
+            <text class="jicount">{{item.tracks}}集</text>
+          </view>
         </view>
       </view>
-    </view>
-  </block>
-</view>
-
-<!-- 脱口秀 -->
-<view class="contentList">
-  <view class="barTitle">
-    <view class="Title-left">脱口秀</view>
-    <view class="Title-right">查看全部></view>
+    </block>
   </view>
-  <block wx:for="{{tuokocontent}}" wx:key>
-    <view class="content">
-      <view class="contentImg">
-        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-      </view>
-      <view class="content-right">
-        <view class="title">
-          <view class="titleText">{{item.title}}</view>
-          <view class="introduction">{{item.trackTitle}}</view>
+  <!-- 脱口秀 -->
+  <view class="contentList">
+    <view class="barTitle">
+      <view class="Title-left">脱口秀</view>
+      <view class="Title-right">查看全部></view>
+    </view>
+    <block wx:for="{{tuokocontent}}" wx:key>
+      <view class="content">
+        <view class="contentImg">
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="count">
-          <text class="playcount">
-            <!-- <text class="icon-"></text> -->
-            126亿
-          </text>
-          <text class="jicount">
-            {{item.tracks}}集
-          </text>
+        <view class="content-right">
+          <view class="title">
+            <view class="titleText">{{item.title}}</view>
+            <view class="introduction">{{item.trackTitle}}</view>
+          </view>
+          <view class="count">
+            <text class="playcount">
+              <!-- <text class="icon-"></text> -->
+              126亿
+            </text>
+            <text class="jicount">{{item.tracks}}集</text>
+          </view>
         </view>
       </view>
-    </view>
-  </block>
-</view>
+    </block>
+  </view>
+</block>
+<block wx:else>
+  <view class="dataNotip">
+    <view class="tip">
+      网络暂时走丢了，请稍后再试
+    </view>  
+  </view>
+</block>

pages/index/index.wxss

@@ -191,3 +191,15 @@
   font-size: 25rpx;
   color: #cdcdcd;
 }
+
+.dataNotip{
+  width: 100%;
+  height: 300rpx;
+  padding-top: 150rpx;
+}
+.tip{
+  width: auto;
+  height: 100rpx;
+  text-align: center;
+  margin: 0rpx auto;
+}