开发二级分类滑动切换

components/comment/index.js

@@ -37,6 +37,7 @@ Component({
     replyType: 'works', // 回复类型，works是回复作品，comment是回复评论
     animation: {},
     author: '',
+    placeholderText:'留下你的赞美，鼓励一下',
     uid: wx.getStorageSync('uid')
   },
   methods: {
@@ -317,5 +318,15 @@ Component({
         icon: 'none'
       });
     },
+    cleanPlaceholder(){
+        this.setData({
+            placeholderText:''
+        })
+    },
+    setPlaceholder(){
+        this.setData({
+            placeholderText:'留下你的赞美，鼓励一下'
+        })
+    }
   }
 })

components/comment/index.less

@@ -1,297 +1,300 @@
 .commentBox {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  overflow: hidden;
-
-  .commentBg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, .3);
-  }
+    z-index: 999;
+    overflow: hidden;
 
-  .comment {
-    position: absolute;
-    left: 0;
-    bottom: 0px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 100%;
-    background-color: white;
-    border-top-left-radius: 25rpx;
-    border-top-right-radius: 25rpx;
-
-    .header {
-      position: relative;
-      padding: 24rpx;
-      display: flex;
-      align-items: center;
-
-      .hl {
-        position: relative;
-        padding-bottom: 10rpx;
-        margin-right: 120rpx;
-      }
-
-      .currentH::after {
-        position: absolute;
-        bottom: 0rpx;
-        left: 50%;
-        transform: translateX(-50%);
-        content: '';
-        width: 50rpx;
-        height: 4rpx;
-        background-color: #333;
-      }
-
-      .hr {
-        position: absolute;
-        right: 26rpx;
-        top: -4rpx;
-        font-size: 54rpx;
-        color: #333333;
-      }
+    .commentBg {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, .3);
     }
 
-    .body {
-      height: 40vh;
-
-      .body-box {
-        padding: 0rpx 22rpx;
-
-        .content {
-          padding: 34rpx 0rpx;
-          display: flex;
-          border-bottom: 1px solid #97979783;
-
-          .c-avatar {
-            width: 96rpx;
-            height: 96rpx;
-            border-radius: 50%;
-            margin-right: 20rpx;
-            background: rgb(216, 216, 216);
-          }
+    .comment {
+        position: absolute;
+        left: 0;
+        bottom: 0px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 100%;
+        background-color: white;
+        border-top-left-radius: 25rpx;
+        border-top-right-radius: 25rpx;
 
-          .c-right {
-            flex: 1;
+        .header {
+            position: relative;
+            padding: 24rpx;
+            display: flex;
+            align-items: center;
 
-            .nickName {
-              font-size: 30rpx;
-              color: rgba(0, 0, 0, 0.60);
+            .hl {
+                position: relative;
+                padding-bottom: 10rpx;
+                margin-right: 120rpx;
+                color: black;
             }
 
-            .detailDesc {
-              letter-spacing: 2rpx;
-              margin: 12rpx 0rpx;
-              padding: 12rpx 0rpx;
-              border-radius: 10rpx;
-              font-size: 30rpx;
-              word-break: break-all;
-              color: rgba(0, 0, 0, 0.7);
+            .currentH::after {
+                position: absolute;
+                bottom: 0rpx;
+                left: 50%;
+                transform: translateX(-50%);
+                content: '';
+                width: 50rpx;
+                height: 4rpx;
+                background-color: #333;
             }
 
-            .hoverClass {
-              background-color: #F7F7F7;
+            .hr {
+                position: absolute;
+                right: 26rpx;
+                top: -4rpx;
+                font-size: 54rpx;
+                color: #333333;
             }
+        }
 
-            .replyList {
-              width: 100%;
-              padding: 14rpx;
-              box-sizing: border-box;
-              background-color: #fafafa93;
-              margin-bottom: 20rpx;
-
-              .reply {
-                font-size: 28rpx;
-                margin-bottom: 8rpx;
-                .replyTitle {
-                  color: rgb(13, 147, 201);
+        .body {
+            height: 40vh;
+
+            .body-box {
+                padding: 0rpx 22rpx;
+
+                .content {
+                    padding: 34rpx 0rpx;
+                    display: flex;
+                    border-bottom: 1px solid #97979783;
+
+                    .c-avatar {
+                        width: 96rpx;
+                        height: 96rpx;
+                        border-radius: 50%;
+                        margin-right: 20rpx;
+                        background: rgb(216, 216, 216);
+                    }
+
+                    .c-right {
+                        flex: 1;
+
+                        .nickName {
+                            font-size: 30rpx;
+                            color: black;
+                        }
+
+                        .detailDesc {
+                            letter-spacing: 2rpx;
+                            margin: 12rpx 0rpx;
+                            padding: 12rpx 0rpx;
+                            border-radius: 10rpx;
+                            font-size: 26rpx;
+                            line-height: 40rpx;
+                            word-break: break-all;
+                            color: rgba(0, 0, 0, 0.7);
+                        }
+
+                        .hoverClass {
+                            background-color: #F7F7F7;
+                        }
+
+                        .replyList {
+                            width: 100%;
+                            padding: 14rpx;
+                            box-sizing: border-box;
+                            background-color: #fafafa93;
+                            margin-bottom: 20rpx;
+
+                            .reply {
+                                font-size: 28rpx;
+                                margin-bottom: 8rpx;
+
+                                .replyTitle {
+                                    color: rgb(13, 147, 201);
+                                }
+
+                                .replyContent {
+                                    color: rgba(0, 0, 0, 0.7);
+                                }
+                            }
+
+                            .hoverClass2 {
+                                background-color: #F7F7F7;
+                            }
+                        }
+
+                        .record {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            font-size: 26rpx;
+
+                            .record-right {
+                                display: flex;
+                                align-items: center;
+                                justify-content: space-between;
+
+                                text {
+                                    margin-left: 6rpx;
+                                }
+
+                                .icon {
+                                    width: 30rpx;
+                                    height: 28rpx;
+                                }
+
+                                .iconBox {
+                                    display: flex;
+                                    align-items: center;
+                                    margin-left: 24rpx;
+                                }
+                            }
+                        }
+                    }
+
+                    .c-like {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+
+                        .left {
+                            height: 90rpx;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-between;
+
+                            .nickName {
+                                font-size: 36rpx;
+                                color: black;
+                            }
+
+                            .time {
+                                font-size: 24rpx;
+                                color: #666666;
+                            }
+                        }
+
+                        .follow {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            width: 140rpx;
+                            font-size: 24rpx;
+                            padding: 8rpx 0rpx;
+                            border-radius: 50rpx;
+                            border: 1rpx solid #1BC665;
+                            color: #1BC665;
+
+                            .character {
+                                width: 22rpx;
+                                height: 22rpx;
+                                margin-right: 6rpx;
+                            }
+                        }
+
+                        .isFans {
+                            border: 1rpx solid #E2ECFB;
+                            background-color: #E2ECFB;
+                            color: #333;
+                        }
+
+                        .pkNum {
+                            color: #30C866;
+                            font-size: 44rpx;
+                            margin-right: 20rpx;
+                        }
+                    }
                 }
 
-                .replyContent {
-                  color: rgba(0, 0, 0, 0.7);
+                .content:last-child {
+                    border: none;
                 }
-              }
-
-              .hoverClass2 {
-                background-color: #F7F7F7;
-              }
             }
+        }
 
-            .record {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              font-size: 26rpx;
+        .quick {
+            width: 100%;
+            background-color: #EEEDED;
 
-              .record-right {
+            .close {
+                text-align: right;
+                font-size: 54rpx;
+                line-height: 54rpx;
+                padding: 0rpx 20rpx 10rpx;
+            }
+
+            .quickTop {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+                padding: 0rpx 20rpx;
+                font-size: 28rpx;
 
-                text {
-                  margin-left: 6rpx;
+                .left {
+                    color: #00000060;
                 }
 
-                .icon {
-                  width: 30rpx;
-                  height: 28rpx;
+                .right {
+                    padding: 4rpx 20rpx;
+                    background-color: #FFC86D;
+                    color: #484848;
+                    border-radius: 50rpx;
+
                 }
+            }
 
-                .iconBox {
-                  display: flex;
-                  align-items: center;
-                  margin-left: 24rpx;
+            .contents {
+                display: flex;
+                align-items: center;
+                padding: 30rpx 0rpx 30rpx 20rpx;
+                width: 100%;
+                box-sizing: border-box;
+                white-space: nowrap;
+                border-bottom: 2rpx solid #9797976e;
+
+                .remark {
+                    display: inline-block;
+                    font-size: 26rpx;
+                    padding: 8rpx 22rpx;
+                    margin-right: 20rpx;
+                    border-radius: 50rpx;
+                    color: white;
+                    background-color: #FF9B55;
                 }
-              }
             }
-          }
+        }
 
-          .c-like {
-            flex: 1;
+        .footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
-
-            .left {
-              height: 90rpx;
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-
-              .nickName {
-                font-size: 36rpx;
-                color: rgba(0, 0, 0, 0.60);
-              }
-
-              .time {
-                font-size: 24rpx;
-                color: #666666;
-              }
-            }
-
-            .follow {
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              width: 140rpx;
-              font-size: 24rpx;
-              padding: 8rpx 0rpx;
-              border-radius: 50rpx;
-              border: 1rpx solid #1BC665;
-              color: #1BC665;
-
-              .character {
-                width: 22rpx;
-                height: 22rpx;
-                margin-right: 6rpx;
-              }
-            }
-
-            .isFans {
-              border: 1rpx solid #E2ECFB;
-              background-color: #E2ECFB;
-              color: #333;
+            background-color: #EEEDED;
+            padding: 20rpx 24rpx;
+
+            .input {
+                height: 80rpx;
+                flex: 1;
+                padding-left: 20rpx;
+                border-radius: 10rpx;
+                background-color: white;
             }
 
-            .pkNum {
-              color: #30C866;
-              font-size: 44rpx;
-              margin-right: 20rpx;
+            .submit {
+                margin-left: 40rpx;
+                width: 76rpx;
+                color: #0091FF;
+                font-size: 32rpx;
             }
-          }
-        }
-
-        .content:last-child {
-          border: none;
-        }
-      }
-    }
-
-    .quick {
-      width: 100%;
-      background-color: #EEEDED;
-
-      .close {
-        text-align: right;
-        font-size: 54rpx;
-        line-height: 54rpx;
-        padding: 0rpx 20rpx 10rpx;
-      }
-
-      .quickTop {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0rpx 20rpx;
-        font-size: 28rpx;
-
-        .left {
-          color: #00000060;
-        }
-
-        .right {
-          padding: 4rpx 20rpx;
-          background-color: #FFC86D;
-          color: #484848;
-          border-radius: 50rpx;
-
         }
-      }
-
-      .contents {
-        display: flex;
-        align-items: center;
-        padding: 30rpx 0rpx 30rpx 20rpx;
-        width: 100%;
-        box-sizing: border-box;
-        white-space: nowrap;
-        border-bottom: 2rpx solid #9797976e;
-
-        .remark {
-          display: inline-block;
-          font-size: 26rpx;
-          padding: 8rpx 22rpx;
-          margin-right: 20rpx;
-          border-radius: 50rpx;
-          color: white;
-          background-color: #FF9B55;
-        }
-      }
     }
 
-    .footer {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      background-color: #EEEDED;
-      padding: 20rpx 24rpx;
-
-      .input {
-        height: 80rpx;
-        flex: 1;
-        padding-left: 20rpx;
-        border-radius: 10rpx;
-        background-color: white;
-      }
-
-      .submit {
-        margin-left: 40rpx;
-        width: 76rpx;
-        color: #0091FF;
-        font-size: 32rpx;
-      }
+    .seat2 {
+        padding-bottom: calc(130rpx + env(safe-area-inset-bottom)) !important;
     }
-  }
-
-  .seat2 {
-    padding-bottom: calc(130rpx + env(safe-area-inset-bottom)) !important;
-  }
 }

components/comment/index.wxml

@@ -88,7 +88,7 @@
             </scroll-view>
         </view>
         <view class="footer">
-            <input class="input" bindinput="bindKeyInput" value="{{detailDesc}}" placeholder="留下你的赞美，鼓励一下"
+            <input class="input" bindinput="bindKeyInput" bindfocus='cleanPlaceholder' bindblur='setPlaceholder' value="{{detailDesc}}" placeholder="{{placeholderText}}"
                 focus="{{ifGetFocus}}" />
             <view class="submit" bindtap="sendReply">发送</view>
         </view>

components/comment/index.wxss

@@ -37,6 +37,7 @@
   position: relative;
   padding-bottom: 10rpx;
   margin-right: 120rpx;
+  color: black;
 }
 .commentBox .comment .header .currentH::after {
   position: absolute;
@@ -78,14 +79,15 @@
 }
 .commentBox .comment .body .body-box .content .c-right .nickName {
   font-size: 30rpx;
-  color: rgba(0, 0, 0, 0.6);
+  color: black;
 }
 .commentBox .comment .body .body-box .content .c-right .detailDesc {
   letter-spacing: 2rpx;
   margin: 12rpx 0rpx;
   padding: 12rpx 0rpx;
   border-radius: 10rpx;
-  font-size: 30rpx;
+  font-size: 26rpx;
+  line-height: 40rpx;
   word-break: break-all;
   color: rgba(0, 0, 0, 0.7);
 }
@@ -149,7 +151,7 @@
 }
 .commentBox .comment .body .body-box .content .c-like .left .nickName {
   font-size: 36rpx;
-  color: rgba(0, 0, 0, 0.6);
+  color: black;
 }
 .commentBox .comment .body .body-box .content .c-like .left .time {
   font-size: 24rpx;

pages/childClassify/index.js

@@ -17,6 +17,7 @@ import {
 let storeBindings;
 Page({
     behaviors: [reachBottom, event],
+    startPageX: 0,
     data: {
         // class为二级,search为搜索
         type: 'class',
@@ -27,7 +28,7 @@ Page({
         text: '',
         currentId: '',
         navBarTitle: '',
-        historySearch: []
+        historySearch: [],
     },
     /**
      * 生命周期函数--监听页面加载
@@ -168,6 +169,40 @@ Page({
             url: `/pages/reading/index?videoId=${currentTarget.dataset.id}&navBarTitle=${this.data.navBarTitle || ''}`
         });
     },
+    touchStart(e) {
+        this.startPageX = e.changedTouches[0].pageX;
+    },
+    touchEnd(e) {
+        const moveX = e.changedTouches[0].pageX - this.startPageX;
+        if (Math.abs(moveX) >= 100) {
+            if (moveX > 0) {
+                if (this.data.currentIndex > 0) {
+                    let data = this.data.categoryList[this.data.currentIndex - 1]
+                    let index = data.sort - 1
+                    this.setClass({
+                        currentTarget: {
+                            dataset: {
+                                title: data.title,
+                                index
+                            }
+                        }
+                    })
+                }
+            } else {
+                if (this.data.currentIndex < this.data.categoryList.length - 1) {
+                    let data = this.data.categoryList[this.data.currentIndex + 1]
+                    this.setClass({
+                        currentTarget: {
+                            dataset: {
+                                title: data.title,
+                                index: data.sort - 1
+                            }
+                        }
+                    })
+                }
+            }
+        }
+    },
     onUnload() {
         this.storeBindings.destroyStoreBindings();
     }

pages/childClassify/index.wxml

@@ -1,60 +1,64 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="classBox">
-  <scroll-view class="classify" scroll-x="true" scroll-into-view="{{currentId}}" enhanced show-scrollbar="{{false}}"
-    wx:if="{{type=='class'&&!childType}}">
-    <view id="{{'class'+index}}" class="name {{currentIndex==index?'currentClass':''}}" wx:for="{{categoryList}}"
-      wx:key="id" data-index="{{index}}" data-title='{{item.title}}' bindtap="setClass">
-      {{item.title}}
-    </view>
-  </scroll-view>
-  <view class="searchBox" wx:if="{{type=='search'}}">
-    <input class="input" placeholder="请输入搜索内容" bindconfirm='search' confirm-type='send' bindinput="setSearch"
-      value="{{text}}" maxlength='20'/>
-    <view class="searchBtn" catchtap="search">
-      <image src="/static/search-2.png" class="img" />
-    </view>
-  </view>
-  <view class="historyList" wx:if="{{text==''&&list.length==0}}">
-    <view class="notes" wx:for="{{historySearch}}" wx:key="index" data-text="{{item}}" bindtap="historySearch">
-      <view class="left">
-        <image src="/static/clock.png" class="clock" />
-        {{item}}
-      </view>
-      <view class="delete" data-text="{{item}}" catchtap="deleteHistory">
-        ×
-      </view>
-    </view>
-    <view class="clearHistory" bindtap="clearHistory" wx:if="{{historySearch.length>0}}">
-      清除搜索记录
-    </view>
-  </view>
-  <!-- 内容区域 -->
-  <scroll-view wx:if="{{list.length>0}}" class="worksList" style="{{childType?'padding-top:10rpx':''}}" scroll-y="true"
-    enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}" bindscrolltolower='loadMore'>
-    <view class="worksBox" wx:for="{{list}}" wx:key="id" data-id="{{item.id}}" bindtap="goRead">
-      <view class="left">
-        <image src="{{item.coverImg}}" class="cover" wx:if="{{item.resourcesType==0}}" />
-        <view class="audioCover" style="background-image: url({{item.backgroundVirtualImg}});" wx:else>
-          <image src="/static/audioBg.png" class="audioPlayBg" />
-          <image src="/static/zhen.png" class="audioPlayZhen" />
-          <image src="{{item.coverImg}}" class="cover" />
+    <!-- 搜索 -->
+    <block>
+        <view class="searchBox" wx:if="{{type=='search'}}">
+            <input class="input" placeholder="请输入搜索内容" bindconfirm='search' confirm-type='send' bindinput="setSearch"
+                value="{{text}}" maxlength='20' />
+            <view class="searchBtn" catchtap="search">
+                <image src="/static/search-2.png" class="img" />
+            </view>
         </view>
-        <view class="work">
-          <view class="title textOver">{{item.title}}</view>
-          <view class="statistics">
-            <view class="statistic">
-              <image src="/static/zp.png" class="playImg" mode="" />
-              <view class="num">{{filters.numFilter(item.readAmount)|| 0}}</view>
+        <view class="historyList" wx:if="{{text==''&&list.length==0}}">
+            <view class="notes" wx:for="{{historySearch}}" wx:key="index" data-text="{{item}}" bindtap="historySearch">
+                <view class="left">
+                    <image src="/static/clock.png" class="clock" />
+                    {{item}}
+                </view>
+                <view class="delete" data-text="{{item}}" catchtap="deleteHistory">
+                    ×
+                </view>
+            </view>
+            <view class="clearHistory" bindtap="clearHistory" wx:if="{{historySearch.length>0}}">
+                清除搜索记录
             </view>
-            <view class="statistic">
-              <image src="/static/play2.png" class="playImg" mode="" />
-              <view class="num">{{filters.numFilter(item.playAmount)|| 0}}</view>
+        </view>
+    </block>
+    <!-- 内容区域 -->
+    <scroll-view class="classify" scroll-x="true" scroll-into-view="{{currentId}}" enhanced show-scrollbar="{{false}}"
+        wx:if="{{type=='class'&&!childType}}">
+        <view id="{{'class'+index}}" class="name {{currentIndex==index?'currentClass':''}}" wx:for="{{categoryList}}"
+            wx:key="id" data-index="{{index}}" data-title='{{item.title}}' bindtap="setClass">
+            {{item.title}}
+        </view>
+    </scroll-view>
+    <scroll-view wx:if="{{list.length>0}}" class="worksList" style="{{childType?'padding-top:10rpx':''}}"
+        scroll-y="true" enhanced show-scrollbar="{{false}}" scroll-top="{{scrollTop}}" bindscrolltolower='loadMore'
+        bindtouchstart="touchStart" bindtouchend="touchEnd">
+        <view class="worksBox" wx:for="{{list}}" wx:key="id" data-id="{{item.id}}" bindtap="goRead">
+            <view class="left">
+                <image src="{{item.coverImg}}" class="cover" wx:if="{{item.resourcesType==0}}" />
+                <view class="audioCover" style="background-image: url({{item.backgroundVirtualImg}});" wx:else>
+                    <image src="/static/audioBg.png" class="audioPlayBg" />
+                    <image src="/static/zhen.png" class="audioPlayZhen" />
+                    <image src="{{item.coverImg}}" class="cover" />
+                </view>
+                <view class="work">
+                    <view class="title textOver">{{item.title}}</view>
+                    <view class="statistics">
+                        <view class="statistic">
+                            <image src="/static/zp.png" class="playImg" mode="" />
+                            <view class="num">{{filters.numFilter(item.readAmount)|| 0}}</view>
+                        </view>
+                        <view class="statistic">
+                            <image src="/static/play2.png" class="playImg" mode="" />
+                            <view class="num">{{filters.numFilter(item.playAmount)|| 0}}</view>
+                        </view>
+                    </view>
+                </view>
             </view>
-          </view>
+            <view class="goRead">去朗读</view>
         </view>
-      </view>
-      <view class="goRead">去朗读</view>
-    </view>
-  </scroll-view>
-  <emptyBg wx:if="{{text!=''&&nullList}}" message="没有找到想要的内容~"></emptyBg>
+    </scroll-view>
+    <emptyBg wx:if="{{text!=''&&nullList}}" message="没有找到想要的内容~"></emptyBg>
 </view>

pages/message/index.less

@@ -74,7 +74,7 @@
 
         .base {
             display: flex;
-            align-items: flex-start;
+            align-items: center;
             justify-content: space-between;
             padding: 20rpx 0rpx 20rpx 20rpx;
             border-bottom: 1rpx solid #D8D8D8;
@@ -89,7 +89,6 @@
             .body {
                 flex: 1;
                 padding: 0rpx 20rpx;
-
                 .name {
                     max-width: 330rpx;
                     font-size: 30rpx;

pages/message/index.wxss

@@ -270,7 +270,7 @@
 }
 .messagePage .messageList .base {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   padding: 20rpx 0rpx 20rpx 20rpx;
   border-bottom: 1rpx solid #D8D8D8;