'fix'

README.md

@@ -25,7 +25,7 @@
   - [ ] 实现详情页的背景色根据图片的颜色改变而改变
   - [x] 实现搜索页
   - [ ] 实现节目详情页面的一些小功能
-  - [ ] 实现榜单页面的下拉选项点击选择功能
+  - [x] 实现榜单页面的下拉选项点击选择功能
 
 > 当然还有很多的bug......未完待续
 

app.wxss

@@ -1,79 +1,4 @@
-/**app.wxss**/
-
 /* 引入icon样式库 */
 @import 'icon.wxss';
+@import '/style/common.wxss';
 
-/* 登录样式 */
-.logo {
-  width: 128rpx;
-  height: 128rpx;
-  margin: 0rpx auto;
-  position: relative;
-  top: 200rpx;
-}
-
-.logoImg {
-  width: 100%;
-  height: 100%;
-}
-
-.loginButton {
-  width: 80%;
-  margin: 0rpx auto;
-  position: relative;
-  top: 500rpx;
-}
-
-.wechatLogin, .phoneLogin {
-  width: 100%;
-  height: 80rpx;
-  border-radius: 50rpx;
-  border: 0rpx;
-  outline: none;
-}
-
-.wechatLogin button {
-  background-color: #70e500;
-  border-radius: 50rpx;
-  border: none;
-  color: #fff;
-}
-
-.phoneLogin {
-  margin-top: 40rpx;
-}
-
-.phoneLogin button {
-  border-radius: 50rpx;
-  border: 1rpx solid #70e500;
-  background-color: #fff;
-  color: #70e500;
-}
-
-/* 公共类 */
-
-.marginTopBottom {
-  margin-top: 20rpx;
-  margin-bottom: 30rpx;
-}
-
-.barTitle {
-  width: 100%;
-  height: 56rpx;
-  padding: 20rpx 0rpx;
-  text-align: center;
-}
-
-.Title-left {
-  float: left;
-  font-size: 37rpx;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-weight: 800;
-  color: #333;
-}
-
-.Title-right {
-  float: right;
-  font-size: 26rpx;
-  color: #aaa;
-}

pages/classification/classification.wxml

@@ -1,4 +1,3 @@
-<!--pages/classification/classification.wxml-->
 <!-- 搜索框 -->
 <search></search>
 
@@ -22,7 +21,7 @@
                 </view>
             </view>
             <view class="content">
-                <view class="contentText" wx:for="{{item.content}}" wx:key>
+                <view class="contentText" wx:for="{{item.content}}" wx:key="index">
                     {{item.text}}
                 </view>
             </view>

pages/collection/collection.wxml

@@ -8,8 +8,7 @@
     <view class="loginButton" hover-class="none" hover-stop-propagation="false">
         <view class="wechatLogin">
             <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
-                <text class="icon-github"></text>
-                微信登录
+                <text class="icon-message"></text>  微信登录
             </button>
         </view>
         <view class="phoneLogin">

pages/index/bangdan/bangdan.js

@@ -63,5 +63,14 @@ Page({
     that.setData({
       showCover:false
     })
+  },
+  CoverCheck:function(e){
+    let currentTab = e.currentTarget.dataset.index;
+    // 实现每一个tabbar切换对应内容的原理，根据每一个tabbar的index对应数组中的数据
+    this.setData({
+      currentTab,
+      list: resut.data.hotRecommends.list[currentTab].list
+    })
+    this.closeCover()
   }
 })

pages/index/bangdan/bangdan.wxml

@@ -1,8 +1,9 @@
 <block wx:if="{{showCover}}">
   <!-- 蒙板内容 要放在蒙板的外面-->
   <view class="menu">
-    <view class="menuItem" wx:for="{{navTitle}}">{{item.title}}
-      <!-- <view class="currtline active"></view> -->
+    <view class="menuItem {{currentTab === index ? 'menuItemactive' : ''}}" 
+    wx:for="{{navTitle}}" wx:key="index" data-index="{{index}}" bindtap="CoverCheck">
+      {{item.title}}
     </view>
   </view>
   <!-- 蒙板 -->
@@ -11,7 +12,7 @@
 <block>
   <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="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>
@@ -22,7 +23,7 @@
     </view>
   </view>
   <!-- 对应的内容区 -->
-  <view class="content"  wx:for="{{list}}" wx:key="{{index}}">
+  <view class="content"  wx:for="{{list}}" wx:key="index">
     <view class="indexNumber">
       <view>{{index > 10 ? index : '0'+index}}</view>
     </view>

pages/index/bangdan/bangdan.wxss

@@ -156,4 +156,21 @@
   font-size: 32rpx;
   padding: 20rpx 10rpx;
   margin: 0rpx 15rpx;
+  position: relative;
+}
+.menuItemactive {
+  font-size: 32rpx;
+  font-weight: 700;
+  transition: all .3s;
+  color: #333333;
+}
+.menuItemactive:after{
+  content: '';
+  width: 40rpx;
+  height: 8rpx;
+  position: absolute;
+  bottom: 0rpx;
+  left: 50rpx;
+  border-radius: 15rpx;
+  background: #ff520f;
 }

pages/index/index.wxss

@@ -153,13 +153,18 @@
   width: 530rpx;
   height: 100%;
   margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
 }
 .title{
   width: 100%;
   height: 138rpx;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 .titleText{
+  width: 100%;
   font-size: 35rpx;
   color: #333;
   text-align: left;
@@ -170,6 +175,7 @@
   text-overflow: ellipsis;
 }
 .introduction{
+  width: 100%;
   font-size: 28rpx;
   color: #cdcdcd;
   text-align: left;

pages/search/search.js

@@ -9,9 +9,9 @@ Page({
       {title:"宝宝巴士",icon:"icon-top",color:"text-orange"},
       {title:"孟鹤堂",icon:"icon-refresharrow",color:"text-red"},
       {title:"三体",icon:"icon-top",color:"text-red"},
-      {title:"龙王殿",icon:"icon-top",color:"text-red"},
+      {title:"龙王殿",icon:"icon-refresharrow",color:"text-red"},
       {title:"儿童恐龙故事",icon:"icon-top",color:"text-red"},
-      {title:"儿童版三国演义",icon:"icon-top",color:"text-red"},
+      {title:"儿童版三国演义",icon:"icon-refresharrow",color:"text-red"},
     ]
   },
 

pages/search/search.wxml

@@ -1,38 +1,41 @@
 <!-- 搜索框 -->
 <view class="search">
-  <view class="search-left">
-    <text class="icon-search"></text>
-    <input placeholder="搜索你想听的节目"></input>
-  </view>
-  <view class="search-right">
-    取消
-  </view> 
+	<view class="search-left">
+		<text class="icon-search"></text>
+		<input placeholder="搜索你想听的节目"></input>
+	</view>
+	<view class="search-right">
+		取消
+	</view>
 </view>
 <!-- 搜索历史 -->
 <view class="history">
-  <!-- 提示标题 -->
-  <view class="title">
-    <view class="title-text">搜索历史</view>
-    <text class="icon-search"></text>
-  </view>
-  <!-- 内容 -->
-  <view class="history-content">
-    <view class="content-item">庆余年</view>
-  </view>
+	<!-- 提示标题 -->
+	<view class="title">
+		<view class="title-text">搜索历史</view>
+		<text class="icon-delete"></text>
+	</view>
+	<!-- 内容 -->
+	<view class="history-content">
+		<view class="content-item">庆余年</view>
+		<view class="content-item">德云社</view>
+		<view class="content-item">评书</view>
+		<view class="content-item">英语</view>
+	</view>
 </view>
 <!-- 热门搜索 -->
 <view class="hot">
-  <!-- 提示标题 -->
-  <view class="title">
-    <view class="title-text">热门搜索</view>
-  </view>
-  <view class="hot-content">
-    <view class="hot-items" wx:for="{{hotData}}" wx:key="index">
-      <view class="item-left">
-        <view class="text-red">{{index}}</view>
-        <view class="itemTitle">{{item.title}}</view>
-      </view>
-      <text class="{{item.icon}} itemIcon {{item.color}}"></text>
-    </view>
-  </view>
+	<!-- 提示标题 -->
+	<view class="title">
+		<view class="title-text">热门搜索</view>
+	</view>
+	<view class="hot-content">
+		<view class="hot-items" wx:for="{{hotData}}" wx:key="index">
+			<view class="item-left">
+				<view class="text-red">{{index}}</view>
+				<view class="itemTitle">{{item.title}}</view>
+			</view>
+			<text class="{{item.icon}} itemIcon {{item.color}}"></text>
+		</view>
+	</view>
 </view>

pages/search/search.wxss

@@ -50,12 +50,17 @@
   width: 100%;
   height: auto;
   margin-top: 30rpx;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
 }
 .content-item{
   width: 150rpx;
   font-size: 33rpx;
   text-align: center;
   padding: 10rpx 20rpx;
+  margin-bottom: 20rpx;
   border-radius: 25rpx;
   color: #333;
   background-color: rgb(240, 240, 240);
@@ -87,25 +92,4 @@
 }
 .itemTitle{
   margin-left: 40rpx;
-}
-/* 公共样式 */
-
-.title{
-  width: 100%;
-  height: 50rpx;
-  /* padding-right: 20rpx; */
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-}
-.title-text{
-  color: #000;
-  font-weight: 700;
-}
-.text-red{
-  color: #f00;
-}
-.text-orange{
-  color: orange;
 }

pages/user/user.wxml

@@ -9,7 +9,7 @@
         <!-- 在本小程序中只实现了微信登录 -->
         <view class="wechatLogin">
             <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
-                <text class="icon-github"></text>微信登录
+                <text class="icon-message"></text>  微信登录
             </button>
         </view>
         <view class="phoneLogin" bindtap="phoneLogin">
@@ -39,7 +39,8 @@
             <!-- 签到 -->
             <view class="qiandao">
                 <view class="qianText">
-                    <text class="icon-calendar text-gray"></text>签到
+                    <text class="icon-calendar text-gray"></text>
+                    <text style="margin-left:20rpx">签到</text>
                 </view>
                 <view class="icon_">
                     <text class="icon-right text-gray"></text>
@@ -51,25 +52,29 @@
             <!-- 选项卡item -->
             <view class="choiceItem">
                 <view class="">
-                    <text class="icon-time text-gray"></text>定时关闭
+                    <text class="icon-time text-gray"></text>
+                    <text style="margin-left:20rpx">定时关闭</text>
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
             <view class="choiceItem">
                 <view class="">
-                    <text class="icon-creative text-gray"></text>夜间模式
+                    <text class="icon-creative text-gray"></text>
+                    <text style="margin-left:20rpx">夜间模式</text>
                 </view>
                 <switch></switch>
             </view>
             <view class="choiceItem">
                 <view class="">
-                    <text class="icon-post text-gray"></text>意见反馈
+                    <text class="icon-post text-gray"></text>
+                    <text style="margin-left:20rpx">意见反馈</text>
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
             <view class="choiceItem" bindtap="gotoLogin">
                 <view class="">
-                    <text class="icon-order text-gray"></text>切换账号
+                    <text class="icon-order text-gray"></text>
+                    <text style="margin-left:20rpx">切换账号</text>
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>

project.config.json

@@ -21,7 +21,7 @@
 		}
 	},
 	"compileType": "miniprogram",
-	"libVersion": "2.9.4",
+	"libVersion": "2.10.0",
 	"appid": "wx101d03d3f1aab84c",
 	"projectname": "%E4%BB%BF%E5%96%9C%E9%A9%AC%E6%8B%89%E9%9B%85lite",
 	"debugOptions": {

style/common.wxss

@@ -0,0 +1,119 @@
+/* 公共样式 */
+
+/* 
+==========
+  bar相关 
+==========
+*/
+.marginTopBottom {
+  margin-top: 20rpx;
+  margin-bottom: 30rpx;
+}
+
+.barTitle {
+  width: 100%;
+  height: 56rpx;
+  padding: 20rpx 0rpx;
+  text-align: center;
+}
+
+.Title-left {
+  float: left;
+  font-size: 37rpx;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-weight: 800;
+  color: #333;
+}
+
+.Title-right {
+  float: right;
+  font-size: 26rpx;
+  color: #aaa;
+}
+/* 
+===========
+  登录样式 
+===========
+*/
+.logo {
+  width: 128rpx;
+  height: 128rpx;
+  margin: 0rpx auto;
+  position: relative;
+  top: 200rpx;
+}
+
+.logoImg {
+  width: 100%;
+  height: 100%;
+}
+
+.loginButton {
+  width: 80%;
+  margin: 0rpx auto;
+  position: relative;
+  top: 500rpx;
+}
+
+.wechatLogin, .phoneLogin {
+  width: 100%;
+  height: 80rpx;
+  border-radius: 50rpx;
+  border: 0rpx;
+  outline: none;
+}
+
+.wechatLogin button {
+  background-color: #70e500;
+  border-radius: 50rpx;
+  border: none;
+  color: #fff;
+}
+
+.phoneLogin {
+  margin-top: 40rpx;
+}
+
+.phoneLogin button {
+  border-radius: 50rpx;
+  border: 1rpx solid #70e500;
+  background-color: #fff;
+  color: #70e500;
+}
+/* 
+===========
+  搜索部分
+===========
+*/
+.title{
+  width: 100%;
+  height: 50rpx;
+  /* padding-right: 20rpx; */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.title-text{
+  color: #000;
+  font-weight: 700;
+}
+/* 
+====================
+  tarbar选中后的样式
+====================
+*/
+
+
+/*
+==========
+  颜色类
+==========
+*/
+
+.text-red{
+  color: #f00;
+}
+.text-orange{
+  color: orange;
+}