修复标题抖动

src/views/hot-music-more/index.module.less

@@ -11,6 +11,7 @@
     .van-sticky--fixed {
       background: url('./images/woring-bg.png') no-repeat top center;
       background-size: 100%;
+      position: relative;
     }
   }
 

src/views/hot-music-more/index.tsx

@@ -122,7 +122,6 @@ export default defineComponent({
       loading: false,
       finished: false,
       isAllStatus: true, // 当前是否已经为全部了
-      isFocus: false,// 是否获取焦点
       searchPopup: false,
       musicDetailPopup: false,
       showVip: false,
@@ -171,7 +170,7 @@ export default defineComponent({
       tagActive: {} as any,
       childSelectId: null as any
     });
-    const contentRef = ref()
+    const contentRef = ref();
 
     const searchValue = computed(() => {
       if (state.tabActive === 'RECOMMEND') {
@@ -184,7 +183,6 @@ export default defineComponent({
         return state.allSearch.name;
       }
     });
-    const mSearchRef = ref()
 
     let isClick = false;
     const getMusicList = async () => {
@@ -199,21 +197,21 @@ export default defineComponent({
         } as any;
         if (state.tabActive === 'RECOMMEND') {
           params = Object.assign(params, state.recommendSearch);
-          params.page = 1
-          params.rows = 60
+          params.page = 1;
+          params.rows = 60;
         } else if (state.tabActive === 'HOT') {
           params = Object.assign(params, state.hotSearch);
-          params.page = 1
-          params.rows = 60
+          params.page = 1;
+          params.rows = 60;
         } else if (state.tabActive === 'NEW') {
           params = Object.assign(params, state.newSearch);
-          params.page = 1
-          params.rows = 60
+          params.page = 1;
+          params.rows = 60;
         } else {
           params.name = state.allSearch.name;
           params = Object.assign(params, state.allSearch);
         }
-        
+
         const res = await api_musicSheetPage(params);
         if (res.code === 200 && Array.isArray(res?.data?.rows)) {
           const result = res.data.rows || [];
@@ -288,7 +286,7 @@ export default defineComponent({
       state.sAPT = '';
       data.tagActiveId = '';
       data.childSelectId = null;
-      data.selectParents = {}
+      data.selectParents = {};
       // state.allSearch.bookVersionId = data.childSelectId || data.tagActiveId;
       // state.allSearch.audioPlayTypes = state.sAPT
       //   ? state.sAPT === 'PLAY_SING'
@@ -443,11 +441,17 @@ export default defineComponent({
       getMusicList();
 
       window.addEventListener('resize', tabResize);
-      useEventListener(document, 'scroll', () => {
-        if(state.isFocus) {
-          mSearchRef.value?.searchBlur()
-        }
-      });
+      // useEventListener(document, 'scroll', () => {
+      //   if (state.isFocus) {
+      //     mSearchRef.value?.searchBlur();
+      //   }
+      //   // if(state.isFocus2) {
+      //   //   const header: any = document.querySelector('.van-sticky--fixed')
+      //   //   header.style.position = 'absolute'
+      //   //   header.style.top = window.scrollY + 'px'
+      //   //   console.log(window.scrollY, 'window.scrollY')
+      //   // }
+      // });
 
       listenerMessage('webViewOnResume', () => {
         tabResize();
@@ -487,42 +491,47 @@ export default defineComponent({
                     class={styles.tabSection}
                     v-model:active={state.tabActive}
                     shrink
-                    onClickTab={() => {
+                    onClickTab={(val) => {
                       if (state.tabActive === '') {
                         if (state.isAllStatus) {
                           state.searchPopup = !state.searchPopup;
                           if (state.searchPopup) {
-                            const allSearch = state.allSearch
-                            if(allSearch.audioPlayTypes.length > 0) {
-                              if(allSearch.audioPlayTypes.length == 1) {
-                                state.sAPT = allSearch.audioPlayTypes.join(',')
+                            const allSearch = state.allSearch;
+                            if (allSearch.audioPlayTypes.length > 0) {
+                              if (allSearch.audioPlayTypes.length == 1) {
+                                state.sAPT = allSearch.audioPlayTypes.join(',');
                               } else {
-                                state.sAPT = 'PLAY_SING'
+                                state.sAPT = 'PLAY_SING';
                               }
                             } else {
-                              state.sAPT = ''
+                              state.sAPT = '';
                             }
-                            state.sNt = allSearch.musicTagIds
-                            if(allSearch.bookVersionId) {
-                              let ids: any = []
+                            state.sNt = allSearch.musicTagIds;
+                            if (allSearch.bookVersionId) {
+                              let ids: any = [];
                               data.tags.forEach((item: any) => {
-                                if(item.id === allSearch.bookVersionId) {
-                                  ids.push(item.id)
+                                if (item.id === allSearch.bookVersionId) {
+                                  ids.push(item.id);
                                 }
-                              })
-                              if(ids.length <= 0) {
-                                ids = formatParentId(allSearch.bookVersionId, data.tags)
+                              });
+                              if (ids.length <= 0) {
+                                ids = formatParentId(
+                                  allSearch.bookVersionId,
+                                  data.tags
+                                );
                               }
                               // console.log(ids, 'ids', allSearch.bookVersionId)
-                              data.tagActiveId = ids[0]
+                              data.tagActiveId = ids[0];
 
-                              if(data.tagActiveId) {
-                                const item = data.tags.find((item) => item.id === ids[0])
-                                if(item) changeTag(item, ids[1])
+                              if (data.tagActiveId) {
+                                const item = data.tags.find(
+                                  item => item.id === ids[0]
+                                );
+                                if (item) changeTag(item, ids[1]);
                               }
                             } else {
-                              data.tagActiveId = ''
-                              data.childSelectId = null
+                              data.tagActiveId = '';
+                              data.childSelectId = null;
                               data.selectParents = {};
                             }
                           }
@@ -563,20 +572,11 @@ export default defineComponent({
 
           <MSearch
             v-model:modelValue={searchValue.value}
-            ref={mSearchRef}
             background={'transparent'}
             inputBackground="transparent"
             class={styles.mSearch11}
             onFocus={() => {
               state.searchPopup = false;
-              setTimeout(() => {
-                state.isFocus = true;
-              }, 300);
-            }}
-            onBlur={() => {
-              setTimeout(() => {
-                state.isFocus = false;
-              }, 300);
             }}
             onSearch={(val: any) => {
               if (state.tabActive === 'RECOMMEND') {
@@ -592,81 +592,92 @@ export default defineComponent({
               onSearch();
             }}></MSearch>
         </MSticky>
-        <List
-          loading={state.loading}
-          finished={state.finished}
-          finishedText=" "
-          onLoad={() => {
-            if(!state.tabActive) {
-              getMusicList()
-            }
-          }}
-          immediateCheck={false}>
-          {state.musics.length > 0 && (
-            <div class={styles.musicListSection}>
-              <div class={styles.musicList}>
-                {state.musics.map((item: any) => (
-                  <Cell
-                    class={styles.musicItem}
-                    border={false}
-                    center
-                    onClick={() => onDetail(item)}>
-                    {{
-                      icon: () => (
-                        <div class={styles.musicImg}>
-                          <i
-                            class={[
-                              styles.iconType,
-                              styles[item.paymentType]
-                            ]}></i>
-                          <Image class={styles.musicImg} src={item.titleImg} />
-                        </div>
-                      ),
-                      title: () => (
-                        <div class={styles.musicContnet}>
-                          <h2>{item.musicSheetName}</h2>
-                          <div class={styles.allStatus}>
-                            <span class={styles.hotNum}>
-                              <img src={iconFire} class={styles.iconFire} />
-                              {formatUsedNum(item.usedNum)}
-                            </span>
-                            {item.audioPlayTypes?.includes('SING') && (
-                              <span
-                                class={[styles.iconPlayType, styles.iconSing]}>
-                                演唱
-                              </span>
-                            )}
-                            {item.audioPlayTypes?.includes('PLAY') && (
-                              <span
-                                class={[styles.iconPlayType, styles.iconPlay]}>
-                                演奏
+        <div style="height: calc(100vh - var(--header-height)); overflow-x: hidden; overflow-y: auto;">
+          <List
+            loading={state.loading}
+            finished={state.finished}
+            finishedText=" "
+            onLoad={() => {
+              if (!state.tabActive) {
+                getMusicList();
+              }
+            }}
+            immediateCheck={false}>
+            {state.musics.length > 0 && (
+              <div class={styles.musicListSection}>
+                <div class={styles.musicList}>
+                  {state.musics.map((item: any) => (
+                    <Cell
+                      class={styles.musicItem}
+                      border={false}
+                      center
+                      onClick={() => onDetail(item)}>
+                      {{
+                        icon: () => (
+                          <div class={styles.musicImg}>
+                            <i
+                              class={[
+                                styles.iconType,
+                                styles[item.paymentType]
+                              ]}></i>
+                            <Image
+                              class={styles.musicImg}
+                              src={item.titleImg}
+                            />
+                          </div>
+                        ),
+                        title: () => (
+                          <div class={styles.musicContnet}>
+                            <h2>{item.musicSheetName}</h2>
+                            <div class={styles.allStatus}>
+                              <span class={styles.hotNum}>
+                                <img src={iconFire} class={styles.iconFire} />
+                                {formatUsedNum(item.usedNum)}
                               </span>
-                            )}
-
-                            {item.composer && (
-                              <p>
-                                {item.composer}
-                              </p>
-                            )}
+                              {item.audioPlayTypes?.includes('SING') && (
+                                <span
+                                  class={[
+                                    styles.iconPlayType,
+                                    styles.iconSing
+                                  ]}>
+                                  演唱
+                                </span>
+                              )}
+                              {item.audioPlayTypes?.includes('PLAY') && (
+                                <span
+                                  class={[
+                                    styles.iconPlayType,
+                                    styles.iconPlay
+                                  ]}>
+                                  演奏
+                                </span>
+                              )}
+
+                              {item.composer && <p>{item.composer}</p>}
+                            </div>
                           </div>
-                        </div>
-                      ),
-                      'right-icon': () => (
-                        <Image class={styles.musicPlayIcon} src={iconPlayer} />
-                      )
-                    }}
-                  </Cell>
-                ))}
+                        ),
+                        'right-icon': () => (
+                          <Image
+                            class={styles.musicPlayIcon}
+                            src={iconPlayer}
+                          />
+                        )
+                      }}
+                    </Cell>
+                  ))}
+                </div>
               </div>
-            </div>
-          )}
-        </List>
+            )}
+            {!state.loading && state.musics.length === 0 && (
+              <div class={styles.emptyGroup}>
+                <MEmpty description="暂无曲谱" />
+              </div>
+            )}
+          </List>
+        </div>
 
-        {!state.loading && state.musics.length === 0 && (
-          <div class={styles.emptyGroup}>
-            <MEmpty description="暂无曲谱" />
-          </div>
-        )}
+        
 
         <Teleport to={'body'}>
           <div class={[styles.searchBodySection]}>
@@ -755,8 +766,11 @@ export default defineComponent({
                             onClick={() => {
                               state.isTagExpand = true;
                               nextTick(() => {
-                                contentRef.value?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-                              })
+                                contentRef.value?.scrollIntoView({
+                                  behavior: 'smooth',
+                                  block: 'start'
+                                });
+                              });
                             }}>
                             更多 <Icon name="arrow-down" />
                           </div>