1

src/components/col-header/index.tsx

@@ -51,8 +51,8 @@ export default defineComponent({
       default: () => {}
     }
   },
-  watch:{
-    backIconColor(){
+  watch: {
+    backIconColor() {
       // 设置返回按钮颜色
       postMessage({
         api: 'backIconChange',
@@ -129,7 +129,10 @@ export default defineComponent({
       <div>
         {this.$slots.content ? (
           <div
-            style={{ paddingTop: `${this.navBarHeight}px` }}
+            style={{
+              paddingTop: `${this.navBarHeight}px`,
+              background: this.background
+            }}
             class={styles.headerSection}
           >
             {this.$slots.content(this.navBarHeight)}

src/views/music/list/index.module.less

@@ -3,6 +3,28 @@
     box-shadow: 10px 10px 10px var(--box-shadow-color);
   }
 }
+
+.listContainer {
+  padding-top: 2px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  color: #999999;
+  line-height: 22px;
+  .line {
+    margin: 0 15px;
+    width: 1px;
+    height: 10px;
+    background: #e8e8e8;
+  }
+  .active {
+    color: #333333;
+  }
+}
 .label {
   margin-right: 8px;
   font-size: 14px;
@@ -24,3 +46,7 @@
   background-color: #fff;
   margin: 14px;
 }
+
+.swipeContainer {
+  // height: calc(100vh - 44px);
+}

src/views/music/list/index.tsx

@@ -1,5 +1,5 @@
-import { defineComponent, reactive, ref } from 'vue'
-import { Sticky, List, Popup, Icon } from 'vant'
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
+import { Sticky, List, Popup, Icon, SwipeItem, Swipe } from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
 import Item from './item'
@@ -12,6 +12,8 @@ import { state } from '@/state'
 import SelectSubject from '../search/select-subject'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import Song from '../component/song'
+import ColHeader from '@/components/col-header'
+import { useRect } from '@vant/use'
 
 const noop = () => {}
 
@@ -75,6 +77,7 @@ export default defineComponent({
     //
     const params = reactive({
       search: (route.query.search as string) || '',
+      exquisiteFlag: 1,
       musicTagIds: route.query.tagids || '',
       page: 1,
       ...defauleParams,
@@ -154,6 +157,31 @@ export default defineComponent({
       FetchList()
       subject.show = false
     }
+
+    const tabType = ref(1)
+    const onTabChange = async (type: number) => {
+      console.log(type, 'onTabChange')
+      tabType.value = type
+      params.exquisiteFlag = type
+      params.page = 1
+      data.value = null
+      await FetchList()
+    }
+
+    const sticky = ref()
+    const searchHeight = ref(200)
+    onMounted(() => {
+      nextTick(() => {
+        console.log(sticky)
+        if (sticky.value) {
+          const { height } = useRect(sticky)
+          const clientHeight =
+            document.body.clientHeight || document.body.offsetHeight
+          searchHeight.value = clientHeight - height
+        }
+      })
+    })
+
     const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
     const subject = reactive({
       show: false,
@@ -169,17 +197,33 @@ export default defineComponent({
 
     return () => (
       <>
-        <List
-          loading={loading.value}
-          finished={finished.value}
-          finished-text={
-            data.value && data.value.rows.length ? '没有更多了' : ''
-          }
-          onLoad={FetchList}
-          error={isError.value}
-        >
-          {!hideSearch && (
-            <Sticky class={styles.sticky}>
+        {!hideSearch && (
+          <Sticky class={styles.sticky}>
+            <div ref={sticky}>
+              <ColHeader
+                isFixed={false}
+                border={false}
+                background="#fff"
+                v-slots={{
+                  content: () => (
+                    <div class={styles.listContainer}>
+                      <span
+                        onClick={() => onTabChange(1)}
+                        class={tabType.value === 1 && styles.active}
+                      >
+                        精品曲目
+                      </span>
+                      <span class={styles.line}></span>
+                      <span
+                        onClick={() => onTabChange(0)}
+                        class={tabType.value === 0 && styles.active}
+                      >
+                        热门曲目
+                      </span>
+                    </div>
+                  )
+                }}
+              />
               <Search
                 showAction
                 onSearch={onSearch}
@@ -202,52 +246,89 @@ export default defineComponent({
                   )
                 }}
               />
-            </Sticky>
-          )}
-
-          {data.value && data.value.rows.length ? (
-            <div class={styles.alumnList}>
-              <Song
-                list={data.value.rows}
-                onDetail={(item: any) => {
-                  if (onItemClick === noop) {
-                    musicBuy(item)
-                  } else {
-                    onItemClick?.(item)
-                  }
-                  // if (onItemClick === noop || !onItemClick) {
-                  //   musicBuy(item, () => {}, {
-                  //     albumId: route.params.id,
-                  //     albumName: albumDetail.value?.albumName
-                  //   })
-                  // } else {
-                  //   onItemClick(item)
-                  // }
-                }}
-              />
             </div>
-          ) : (
-            // data.value.rows.map(item => (
-            //     <Item
-            //       data={item}
-            //       onClick={() => {
-            //         if (onItemClick === noop) {
-            //           musicBuy(item)
-            //         } else {
-            //           onItemClick?.(item)
-            //         }
-            //       }}
-            //     />
-            //   ))
-            !loading.value && (
-              <ColResult
-                tips="暂无曲目"
-                classImgSize="SMALL"
-                btnStatus={false}
-              />
-            )
-          )}
-        </List>
+          </Sticky>
+        )}
+        <Swipe
+          // class={styles.swipeContainer}
+          height={searchHeight.value}
+          // style={{
+          //   height: `calc(100vh - ${searchHeight.value})`
+          // }}
+          showIndicators={false}
+          onChange={(name: string) => {
+            console.log('12')
+          }}
+        >
+          <SwipeItem>
+            <List
+              loading={loading.value}
+              finished={finished.value}
+              finished-text={
+                data.value && data.value.rows.length ? '没有更多了' : ''
+              }
+              onLoad={FetchList}
+              error={isError.value}
+            >
+              {data.value && data.value.rows.length ? (
+                <div class={styles.alumnList}>
+                  <Song
+                    list={data.value.rows}
+                    onDetail={(item: any) => {
+                      if (onItemClick === noop) {
+                        musicBuy(item)
+                      } else {
+                        onItemClick?.(item)
+                      }
+                    }}
+                  />
+                </div>
+              ) : (
+                !loading.value && (
+                  <ColResult
+                    tips="暂无曲目"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )
+              )}
+            </List>
+          </SwipeItem>
+          <SwipeItem>
+            <List
+              loading={loading.value}
+              finished={finished.value}
+              finished-text={
+                data.value && data.value.rows.length ? '没有更多了' : ''
+              }
+              onLoad={FetchList}
+              error={isError.value}
+            >
+              {data.value && data.value.rows.length ? (
+                <div class={styles.alumnList}>
+                  <Song
+                    list={data.value.rows}
+                    onDetail={(item: any) => {
+                      if (onItemClick === noop) {
+                        musicBuy(item)
+                      } else {
+                        onItemClick?.(item)
+                      }
+                    }}
+                  />
+                </div>
+              ) : (
+                !loading.value && (
+                  <ColResult
+                    tips="暂无曲目"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )
+              )}
+            </List>
+          </SwipeItem>
+        </Swipe>
         <Popup
           show={tagVisibility.value}
           round