开发二级分类页面

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/childClassify/index",
     "pages/index/index",
     "pages/pkResult/index",
     "pages/score/index",

pages/childClassify/index.js

@@ -0,0 +1,30 @@
+// pages/childClassify/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    currentClass: 0,
+    scrollTop: 0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    console.log(options.id);
+  },
+  setClass({
+    currentTarget
+  }) {
+    this.setData({
+      scrollTop: 0,
+      currentClass: currentTarget.dataset.id
+    })
+  },
+  onReachBottom() {
+    console.log('11');
+  },
+
+})

pages/childClassify/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/childClassify/index.less

@@ -0,0 +1,97 @@
+.classBox {
+  width: 100%;
+  height: 100vh;
+
+  .classify {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    padding: 24rpx 0rpx;
+    width: 100%;
+    background-color: #F2F6FC;
+    z-index: 9;
+    white-space: nowrap;
+
+    .name {
+      text-align: center;
+      display: inline-block;
+      padding: 0rpx 20rpx;
+      margin-right: 40rpx;
+      color: #666666;
+      font-weight: bold;
+      font-size: 28rpx;
+    }
+
+    .currentClass {
+      font-size: 32rpx;
+      color: #333;
+    }
+  }
+
+  .worksList {
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 20rpx;
+    padding-top: 90rpx;
+    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+
+    .worksBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 26rpx 20rpx;
+      box-sizing: border-box;
+      background-color: white;
+      border-radius: 20rpx;
+      margin-bottom: 20rpx;
+
+      .left {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .cover {
+          width: 144rpx;
+          height: 80rpx;
+          border-radius: 8rpx;
+        }
+
+        .work {
+          margin-left: 26rpx;
+
+          .title {
+            font-size: 32rpx;
+            font-weight: bold;
+            margin-bottom: 10rpx;
+          }
+
+          .statistic {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .playImg {
+              width: 34rpx;
+              height: 28rpx;
+            }
+
+            .num {
+              font-size: 26rpx;
+              color: #666666;
+            }
+          }
+        }
+      }
+
+      .goRead {
+        padding: 6rpx 32rpx 8rpx;
+        color: white;
+        font-size: 32rpx;
+        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+        border-radius: 50rpx;
+      }
+    }
+  }
+}

pages/childClassify/index.wxml

@@ -0,0 +1,26 @@
+<view class="classBox">
+  <scroll-view class="classify" scroll-x="true" enhanced show-scrollbar="{{false}}">
+    <view class="name {{currentClass==index?'currentClass':''}}" wx:for="{{6}}" wx:key="index" data-id="{{index}}"
+      bindtap="setClass">
+      书香美文
+    </view>
+  </scroll-view>
+  <!-- 内容区域 -->
+  <scroll-view class="worksList" scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}">
+    <view class="worksBox" wx:for="{{16}}" wx:key="index">
+      <view class="left">
+        <image src="https://yfklxt-image.ai160.com/reader/20211012/1634004843742426.jpg" class="cover" />
+        <view class="work">
+          <view class="title">狼来了</view>
+          <view class="statistics">
+            <view class="statistic">
+              <image src="/static/play.png" class="playImg" mode="" />
+              <view class="num">1234</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="goRead">去朗读</view>
+    </view>
+  </scroll-view>
+</view>

pages/childClassify/index.wxss

@@ -0,0 +1,84 @@
+.classBox {
+  width: 100%;
+  height: 100vh;
+}
+.classBox .classify {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  padding: 24rpx 0rpx;
+  width: 100%;
+  background-color: #F2F6FC;
+  z-index: 9;
+  white-space: nowrap;
+}
+.classBox .classify .name {
+  text-align: center;
+  display: inline-block;
+  padding: 0rpx 20rpx;
+  margin-right: 40rpx;
+  color: #666666;
+  font-weight: bold;
+  font-size: 28rpx;
+}
+.classBox .classify .currentClass {
+  font-size: 32rpx;
+  color: #333;
+}
+.classBox .worksList {
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+  padding: 20rpx;
+  padding-top: 90rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+}
+.classBox .worksList .worksBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 26rpx 20rpx;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 20rpx;
+  margin-bottom: 20rpx;
+}
+.classBox .worksList .worksBox .left {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.classBox .worksList .worksBox .left .cover {
+  width: 144rpx;
+  height: 80rpx;
+  border-radius: 8rpx;
+}
+.classBox .worksList .worksBox .left .work {
+  margin-left: 26rpx;
+}
+.classBox .worksList .worksBox .left .work .title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+.classBox .worksList .worksBox .left .work .statistic {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.classBox .worksList .worksBox .left .work .statistic .playImg {
+  width: 34rpx;
+  height: 28rpx;
+}
+.classBox .worksList .worksBox .left .work .statistic .num {
+  font-size: 26rpx;
+  color: #666666;
+}
+.classBox .worksList .worksBox .goRead {
+  padding: 6rpx 32rpx 8rpx;
+  color: white;
+  font-size: 32rpx;
+  background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+  box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+  border-radius: 50rpx;
+}

pages/index/index.js

@@ -57,7 +57,11 @@ Page({
         grade: 'PRESCHOOL'
       })
     }
-
+  },
+  jumpChildClassify() {
+    wx.navigateTo({
+      url: `/pages/childClassify/index?id=123`,
+    })
   },
   /**
    * 监听页面滚动事件
@@ -73,7 +77,6 @@ Page({
       })
     }
   },
-
   onReachBottom() {
     this.loadMore()
   },
@@ -87,5 +90,4 @@ Page({
       this.resetData()
     }
   },
-
 })

pages/index/index.wxml

@@ -15,7 +15,7 @@
   <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
     <!-- 一级分类区域 -->
     <scroll-view class="firstClassify" scroll-x="true" enhanced show-scrollbar="{{false}}">
-      <view class="firstBox" wx:for="{{10}}" wx:key="index">
+      <view class="firstBox" wx:for="{{10}}" wx:key="index" bindtap="jumpChildClassify">
         <image class="icon" src="/static/header.png" mode="" />
         <view class="name">书香美文</view>
       </view>