开发二级分类页面及搜索页面

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/childClassify/index",
     "pages/index/index",
+    "pages/childClassify/index",
     "pages/pkResult/index",
     "pages/score/index",
     "pages/reading/index",

pages/childClassify/index.js

@@ -1,19 +1,24 @@
 // pages/childClassify/index.js
 Page({
-
   /**
    * 页面的初始数据
    */
   data: {
+    // class为二级,search为搜索
+    type: 'class',
+    childType: '',
     currentClass: 0,
-    scrollTop: 0
+    scrollTop: 0,
+    text: '',
   },
-
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-    console.log(options.id);
+    this.setData({
+      type: options.type,
+      childType: options.id
+    })
   },
   setClass({
     currentTarget
@@ -23,8 +28,25 @@ Page({
       currentClass: currentTarget.dataset.id
     })
   },
-  onReachBottom() {
-    console.log('11');
+  setSearch({
+    detail
+  }) {
+    this.setData({
+      text: detail.value
+    })
+  },
+  search() {
+    console.log("搜索");
+  },
+  goRead({
+    currentTarget
+  }) {
+    wx.navigateTo({
+      // url: `/pages/reading/index?videoId=${currentTarget.dataset.id}&readingType=pk`
+      url: `/pages/reading/index?videoId=1610706272332508`
+    })
+  },
+  bindscrolltolower() {
+    console.log("到底了");
   },
-
 })

pages/childClassify/index.less

@@ -28,6 +28,37 @@
     }
   }
 
+  .searchBox {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    padding: 4rpx 20rpx;
+    box-sizing: border-box;
+    z-index: 9;
+
+    .input {
+      background-color: white;
+      border-radius: 50rpx;
+      padding: 10rpx 30rpx;
+      padding-right: 140rpx;
+    }
+
+    .searchBtn {
+      position: absolute;
+      right: 40rpx;
+      top: 13rpx;
+      padding: 4rpx 40rpx;
+      background: #F2F6FC;
+      border-radius: 40rpx;
+
+      .img {
+        width: 24rpx;
+        height: 24rpx;
+      }
+    }
+  }
+
   .worksList {
     width: 100%;
     height: 100vh;

pages/childClassify/index.wxml

@@ -1,12 +1,19 @@
 <view class="classBox">
-  <scroll-view class="classify" scroll-x="true" enhanced show-scrollbar="{{false}}">
+  <scroll-view class="classify" scroll-x="true" enhanced show-scrollbar="{{false}}" wx:if="{{type=='class'}}">
     <view class="name {{currentClass==index?'currentClass':''}}" wx:for="{{6}}" wx:key="index" data-id="{{index}}"
       bindtap="setClass">
       书香美文
     </view>
   </scroll-view>
+  <view class="searchBox" wx:else>
+    <input class="input" placeholder="请输入搜索内容" bindblur="setSearch" />
+    <view class="searchBtn" catchtap="search">
+      <image src="/static/search.png" class="img" />
+    </view>
+  </view>
   <!-- 内容区域 -->
-  <scroll-view class="worksList" scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}">
+  <scroll-view class="worksList" scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}"
+    bindscrolltolower='bindscrolltolower'>
     <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" />
@@ -20,7 +27,7 @@
           </view>
         </view>
       </view>
-      <view class="goRead">去朗读</view>
+      <view class="goRead" data-id="{{index}}" bindtap="goRead">去朗读</view>
     </view>
   </scroll-view>
 </view>

pages/childClassify/index.wxss

@@ -25,6 +25,33 @@
   font-size: 32rpx;
   color: #333;
 }
+.classBox .searchBox {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  padding: 4rpx 20rpx;
+  box-sizing: border-box;
+  z-index: 9;
+}
+.classBox .searchBox .input {
+  background-color: white;
+  border-radius: 50rpx;
+  padding: 10rpx 30rpx;
+  padding-right: 140rpx;
+}
+.classBox .searchBox .searchBtn {
+  position: absolute;
+  right: 40rpx;
+  top: 13rpx;
+  padding: 4rpx 40rpx;
+  background: #F2F6FC;
+  border-radius: 40rpx;
+}
+.classBox .searchBox .searchBtn .img {
+  width: 24rpx;
+  height: 24rpx;
+}
 .classBox .worksList {
   width: 100%;
   height: 100vh;

pages/index/index.js

@@ -60,7 +60,12 @@ Page({
   },
   jumpChildClassify() {
     wx.navigateTo({
-      url: `/pages/childClassify/index?id=123`,
+      url: `/pages/childClassify/index?type=class&id=123`,
+    })
+  },
+  jumpSearch() {
+    wx.navigateTo({
+      url: '/pages/childClassify/index?type=search',
     })
   },
   /**

pages/index/index.wxml

@@ -25,7 +25,7 @@
       <view class="type {{currentType=='1'?'currentType':''}}" data-type='1'>优秀作品展播</view>
       <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>官方推荐</view>
       <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>官方活动</view>
-      <view class="search">
+      <view class="search" bindtap="jumpSearch">
         <image src="/static/search.png" class="searchImg" />
       </view>
     </view>