debug

package.json

@@ -14,6 +14,7 @@
     "gl-matrix": "3.4.3",
     "lodash": "4.17.21",
     "mitt": "3.0.0",
+    "lodash-es": "^4.17.21",
     "mockjs": "1.1.0",
     "pinia": "^2.1.7",
     "pinyin": "2.11.1",
@@ -26,6 +27,8 @@
     "vuex": "4.1.0"
   },
   "devDependencies": {
+    "@iconify/vue": "^4.1.1",
+    "@types/lodash-es": "^4.17.9",
     "@vitejs/plugin-vue": "4.0.0",
     "@vitejs/plugin-vue-jsx": "3.0.0",
     "less": "4.1.3",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   lodash:
     specifier: 4.17.21
     version: 4.17.21
+  lodash-es:
+    specifier: ^4.17.21
+    version: 4.17.21
   mitt:
     specifier: 3.0.0
     version: 3.0.0
@@ -58,6 +61,12 @@ dependencies:
     version: 4.1.0(vue@3.4.21)
 
 devDependencies:
+  '@iconify/vue':
+    specifier: ^4.1.1
+    version: 4.1.1(vue@3.4.21)
+  '@types/lodash-es':
+    specifier: ^4.17.9
+    version: 4.17.12
   '@vitejs/plugin-vue':
     specifier: 4.0.0
     version: 4.0.0(vite@5.1.4)(vue@3.4.21)
@@ -609,6 +618,19 @@ packages:
     dev: true
     optional: true
 
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
+  /@iconify/vue@4.1.1(vue@3.4.21):
+    resolution: {integrity: sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==}
+    peerDependencies:
+      vue: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.21
+    dev: true
+
   /@jambonn/vue-lazyload@1.0.9(vue@3.4.21):
     resolution: {integrity: sha512-V9AnxDTAS1+q5LpTWtvyEN2bo1skvSzPRbFfP7Z1qhfEQRQouSwReEkbEb5B5M4MDEM1UIE0kxlsvOcCkon8DQ==}
     engines: {node: '>=12.x'}
@@ -798,6 +820,16 @@ packages:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
     dev: true
 
+  /@types/lodash-es@4.17.12:
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+    dependencies:
+      '@types/lodash': 4.14.202
+    dev: true
+
+  /@types/lodash@4.14.202:
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
+    dev: true
+
   /@vitejs/plugin-vue-jsx@3.0.0(vite@5.1.4)(vue@3.4.21):
     resolution: {integrity: sha512-vurkuzgac5SYuxd2HUZqAFAWGTF10diKBwJNbCvnWijNZfXd+7jMtqjPFbGt7idOJUn584fP1Ar9j/GN2jQ3Ew==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1921,6 +1953,10 @@ packages:
       pkg-types: 1.0.3
     dev: true
 
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false

src/components/slide/BVideo.vue

@@ -12,7 +12,7 @@
            :autoplay="isPlay" loop>
       <p> 您的浏览器不支持 video 标签。</p>
     </video>
-    <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
+    <Icon icon="fluent:play-28-filled" class="pause"   v-if="!isPlaying"/>
     <div class="float" :style="{opacity: isUp?0:1}">
       <div :style="{opacity:isMove ? 0:1}" class="normal">
         <template v-if="!commentVisible">
@@ -68,20 +68,21 @@
 
 <script>
 import Utils from '../../utils'
-import Dom from "../../utils/dom";
 import Loading from "../Loading";
 import ItemToolbar from "./ItemToolbar";
 import ItemDesc from "./ItemDesc";
 import bus, {EVENT_KEY} from "../../utils/bus";
 import {SlideItemPlayStatus} from "../../utils/const_var";
 import {computed} from "vue";
+import {Icon} from "@iconify/vue";
 
 export default {
   name: "BVideo",
   components: {
     Loading,
     ItemToolbar,
-    ItemDesc
+    ItemDesc,
+    Icon
   },
   provide() {
     return {
@@ -373,15 +374,16 @@ export default {
   }
 
   .pause {
-    width: 100rem;
-    height: 100rem;
-    opacity: 0.5;
+    width: 60rem;
+    height: 60rem;
+    opacity: 0.3;
     position: absolute;
     margin: auto;
     left: 0;
     top: 0;
     bottom: 0;
     right: 0;
+    color: white;
     animation: pause-animation 1.1s linear;
 
     @scale: scale(1.2);
@@ -392,12 +394,12 @@ export default {
         transform: scale(2);
       }
       10% {
-        opacity: 0.5;
+        opacity: 0.3;
         transform: @scale;
       }
       100% {
         transform: @scale;
-        opacity: 0.5;
+        opacity: 0.3;
       }
     }
   }

src/components/slide/ItemToolbar.vue

@@ -3,6 +3,7 @@ import BaseMusic from "../BaseMusic";
 import Utils from "../../utils";
 import {reactive,} from "vue";
 import bus, {EVENT_KEY} from "@/utils/bus";
+import {Icon} from '@iconify/vue'
 
 const props = defineProps({
   item: {
@@ -71,13 +72,13 @@ function showComments() {
       <span>{{ Utils.formatNumber(props.item.digg_count) }}</span>
     </div>
     <div class="message mb2r" @click.stop="showComments">
-      <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
+      <Icon icon="mage:message-dots-round-fill" class="icon" style="color: white"/>
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
     <!--TODO     -->
     <div class="message mb2r" @click.stop="Utils.updateItem(props, 'isCollect', !props.item.isCollect, emit)">
-      <img v-if="props.item.isCollect" src="@/assets/img/icon/components/video/star-full.png" alt="" class="message-image">
-      <img v-else src="@/assets/img/icon/components/video/star.png" alt="" class="message-image">
+      <Icon v-if="props.item.isCollect" icon="ic:round-star" class="icon" style="color: yellow"/>
+      <Icon v-else icon="ic:round-star" class="icon" style="color: white"/>
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
     <div v-if="!props.isMy" class="share mb2r" @click.stop="bus.emit(EVENT_KEY.SHOW_SHARE)">
@@ -179,6 +180,10 @@ function showComments() {
     }
   }
 
+  .icon {
+    font-size: 40rem;
+  }
+
   .loved {
     background: red;
   }

src/components/slide/SlideVerticalInfinite.vue

@@ -77,11 +77,9 @@ watch(
         if (oldVal.length === 0) {
           insertContent()
         } else {
-          let end = oldVal.length + 3
-          if (end >= newVal) end = newVal
+          let endIndex = oldVal.length + 3
           let top = $(wrapperEl.value).find(`.${itemClassName}:last`).css('top')
-
-          newVal.slice(oldVal.length, end).map((item, index) => {
+          newVal.slice(oldVal.length, endIndex).map((item, index) => {
             let el = getInsEl(item, oldVal.length + index)
             //这里必须要设置个top值，不然会把前面的条目给覆盖掉
             //2022-3-27，这里不用计算，直接用已用slide-item最后一条的top值，
@@ -100,7 +98,7 @@ watch(
     () => props.index,
     (newVal, oldVal) => {
       if (!props.list.length) return
-      console.log('watch-index', newVal, oldVal)
+      // console.log('watch-index', newVal, oldVal)
       bus.emit(EVENT_KEY.CURRENT_ITEM, props.list[newVal])
       bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
         uniqueId: props.uniqueId,

src/components/slide/SlideVideo.vue

@@ -119,7 +119,6 @@ import globalMethods from '../../utils'
 import BaseMarquee from "../BaseMarquee";
 import Dom from "../../utils/dom";
 import BaseMusic from "../BaseMusic";
-import {mapState} from "vuex";
 import Loading from "../Loading";
 
 export default {
@@ -127,7 +126,7 @@ export default {
   components: {
     BaseMarquee,
     BaseMusic,
-    Loading
+    Loading,
   },
   props: {
     video: {

src/components/slide/common.js

@@ -2,13 +2,14 @@ import bus from "@/utils/bus";
 import Utils from '@/utils'
 import {SlideType} from "@/utils/const_var";
 import GM from "@/utils";
+import {sum} from "lodash-es";
 
 export function slideInit(el, state, type) {
   state.wrapper.width = GM.$getCss(el, 'width')
   state.wrapper.height = GM.$getCss(el, 'height')
   state.wrapper.childrenLength = el.children.length
 
-  let t = getSlideDistance(state, type)
+  let t = getSlideDistance(state, type, el)
   let dx1 = 0, dx2 = 0
   if (type === SlideType.HORIZONTAL) dx1 = t
   else dx2 = t
@@ -55,7 +56,7 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
       bus.emit(state.name + '-moveX', state.move.x)
     }
     Utils.$stopPropagation(e)
-    let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
+    let t = getSlideDistance(state, type, el) + (isNext ? judgeValue : -judgeValue)
     let dx1 = 0
     let dx2 = 0
     if (type === SlideType.HORIZONTAL) {
@@ -97,7 +98,7 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
 
 export function slideReset(el, state, type, emit) {
   Utils.$setCss(el, 'transition-duration', `300ms`)
-  let t = getSlideDistance(state, type)
+  let t = getSlideDistance(state, type, el)
   let dx1 = 0
   let dx2 = 0
   if (type === SlideType.HORIZONTAL) {
@@ -114,8 +115,16 @@ export function slideReset(el, state, type, emit) {
   emit?.('update:index', state.localIndex)
 }
 
-export function getSlideDistance(state, type = SlideType.HORIZONTAL) {
+export function getSlideDistance(state, type = SlideType.HORIZONTAL, el) {
   if (type === SlideType.HORIZONTAL) {
+    //TODO 统一
+    if (el) {
+      let widths = []
+      Array.from(el.children).map(v => {
+        widths.push(v.getBoundingClientRect().width)
+      })
+      return -sum(widths.splice(0, state.localIndex))
+    }
     return -state.localIndex * state.wrapper.width
   } else {
     return -state.localIndex * state.wrapper.height

src/mock/index.js

@@ -3,7 +3,7 @@ import globalMethods from '../utils'
 import resource from "../assets/data/resource.js";
 import users from '@/assets/data/users.json'
 import post from '@/assets/data/post.json'
-import {sample, shuffle} from "lodash";
+import {sample, shuffle, uniqueId} from "lodash";
 
 function getParams(options) {
   let params = globalMethods.$parseURL(options.url).params
@@ -27,14 +27,51 @@ let allRecommendVideos = resource.videos.map(v => {
   v.type = 'recommend-video'
   return v
 })
-
+let t = [
+  {
+    type: 'imgs',
+    src: `https://imgapi.cn/bing.php`,
+    author: {
+      unique_id: uniqueId('list_')
+    }
+  },
+  {
+    type: 'user',
+    src: `https://imgapi.cn/bing.php`,
+    author: {
+      unique_id: uniqueId('list_')
+    }
+  },
+  {
+    type: 'img',
+    src: `https://imgapi.cn/bing.php`,
+    author: {
+      unique_id: uniqueId('list_')
+    }
+  },
+]
+allRecommendVideos.unshift(...t)
+// {
+//   type: 'imgs',
+//   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
+//   author: {
+//     unique_id: uniqueId('list_')
+//   }
+// },
+// {
+//   type: 'user',
+//   src: `http://douyin.ttentau.top/0.mp4?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
+//   author: {
+//     unique_id: uniqueId('list_')
+//   }
+// },
 for (let i = 0; i < 50; i++) {
   allRecommendVideos = allRecommendVideos.concat(shuffle(resource.videos)
-      .slice(0, 10)
-      .map(v => {
-        v.type = 'recommend-video'
-        return v
-      }))
+    .slice(0, 10)
+    .map(v => {
+      v.type = 'recommend-video'
+      return v
+    }))
 }
 Mock.mock(/recommended/, options => {
   let page = getPage(options)

src/pages/home/components/IndicatorHome.vue

@@ -5,10 +5,11 @@
     </transition>
     <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
     <div class="toolbar" ref="toolbar" :style="toolbarStyle">
-      <img src="../../../assets/img/icon/scan.png"
-           class="search"
-           @click="$nav('/home/live')"
-           style="margin-top: .5rem;">
+      <Icon
+          icon="tabler:menu-deep"
+          class="search"
+          @click="$nav('/home/live')"
+          style="transform: rotateY(180deg)"/>
       <div class="tab-ctn">
         <div class="tabs" ref="tabs">
           <div class="tab" :class="tabOneClass" @click.stop="change(0)">
@@ -29,10 +30,10 @@
         </div>
         <div class="indicator" ref="indicator"></div>
       </div>
-      <img v-hide="loading" src="../../../assets/img/icon/search-light.png"
-           class="search"
-           @click="$nav('/home/search')"
-           style="margin-top: .5rem;">
+      <Icon v-hide="loading"
+            icon="ion:search"
+            class="search"
+            @click="$nav('/home/search')"/>
     </div>
     <div class="toggle-type" :class="{open}">
       <div class="l-button" :class="{active:type === 0}" @click="toggleType(0)">
@@ -194,7 +195,7 @@ export default {
 @import "@/assets/less/index";
 
 .indicator-home {
-  position: fixed;
+  position: absolute;
   font-size: 16rem;
   top: 0;
   left: 0;
@@ -218,8 +219,8 @@ export default {
 
   .loading {
     opacity: 0;
-    top: 13rem;
-    right: 15rem;
+    top: 7rem;
+    right: 7rem;
     position: absolute;
   }
 
@@ -290,7 +291,8 @@ export default {
     }
 
     .search {
-      width: 20rem;
+      color: white;
+      font-size: 24rem;
     }
   }
 

src/pages/home/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="test-slide-wrapper" id="home-index">
     <SlideHorizontal v-model:index="state.baseIndex">
+      <SlideItem class="sidebar">
+        <div class="sidebar1">
+
+        </div>
+      </SlideItem>
       <SlideItem>
         <IndicatorHome
             v-if="!state.fullScreen"
@@ -13,15 +18,15 @@
                            name="main"
                            :change-active-index-use-anim="false"
                            v-model:index="state.navIndex">
-            <Slide0 :active="state.navIndex === 0 && state.baseIndex === 0"/>
+            <Slide0 :active="state.navIndex === 0 && state.baseIndex === 1"/>
             <SlideItem>
               <Community/>
             </SlideItem>
-            <Slide2 :active="state.navIndex === 2 && state.baseIndex === 0"/>
+            <Slide2 :active="state.navIndex === 2 && state.baseIndex === 1"/>
             <SlideItem>
               <Shop/>
             </SlideItem>
-            <Slide4 :active="state.navIndex === 4 && state.baseIndex === 0"/>
+            <Slide4 :active="state.navIndex === 4 && state.baseIndex === 1"/>
           </SlideHorizontal>
         </div>
         <Footer v-bind:init-tab="1"/>
@@ -39,6 +44,7 @@
       </SlideItem>
     </SlideHorizontal>
 
+
     <Comment page-id="home-index" v-model="state.commentVisible"
              @close="closeComments"
     />
@@ -129,7 +135,7 @@ const bodyHeight = computed(() => store.state.bodyHeight)
 const bodyWidth = computed(() => store.state.bodyWidth)
 
 const state = reactive({
-  baseIndex: 0,
+  baseIndex: 1,
   navIndex: 4,
   test: '',
   recommendList: [
@@ -238,6 +244,13 @@ function dislike() {
   height: 100%;
   overflow: hidden;
 
+  .sidebar {
+    width: 70vw;
+    height: 100vh;
+    overflow: auto;
+    background: red;
+  }
+
   .slide-content {
     width: 100%;
     height: 100%;

src/utils/mixin.js

@@ -16,6 +16,7 @@ import CONST_VAR from "./const_var";
 import Dom from "./dom";
 import bus, {EVENT_KEY} from "./bus";
 import {random} from "lodash";
+import {Icon} from '@iconify/vue'
 
 export default {
   components: {
@@ -31,7 +32,8 @@ export default {
     NoMore,
     'dy-back': Back,
     Loading,
-    'dy-button': BaseButton
+    'dy-button': BaseButton,
+    Icon
   },
   data() {
     return {