优化搜索排行榜

src/components/slide/SlideRowList.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="base-slide-wrapper" ref="slideWrapper">
-    <div class="indicator-home" v-if="showIndicator ">
+    <div class="indicator-home" v-if="showIndicator">
       <div class="notice" :style="noticeStyle"><span>下拉刷新内容</span></div>
       <div class="toolbar" ref="toolbar" :style="toolbarStyle">
         <div class="left">直播</div>
@@ -23,6 +23,11 @@
       </div>
       <Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>
     </div>
+
+    <div class="indicator-bullets" v-if="indicatorType === 'bullets'">
+      <div class="bullet" :class="{active:currentSlideItemIndex === item}" v-for="item in slideItems.length-1"></div>
+    </div>
+
     <div id="base-slide-list" ref="slideList"
          :style="{'flex-direction':'row',marginTop:indicatorFixed?'5rem':'0'}"
          @touchstart="touchStart($event)"
@@ -47,6 +52,18 @@ export default {
       type: Boolean,
       default: () => true
     },
+    autoplay: {
+      type: Boolean,
+      default: () => false
+    },
+    indicatorType: {
+      type: String,
+      default: ''
+      //bullets
+      //fraction
+      //progressbar
+      //custom
+    },
     showIndicator: {
       type: Boolean,
       default: () => false
@@ -143,9 +160,20 @@ export default {
     await this.checkChildren(true)
     this.showIndicator && this.initTabs()
     this.changeIndex(true)
+
+    if (this.autoplay) {
+      setInterval(() => {
+        if (this.currentSlideItemIndex === this.slideItems.length - 1) {
+          this.currentSlideItemIndex = 0
+        } else {
+          this.currentSlideItemIndex++
+        }
+        this.changeIndex(false, this.currentSlideItemIndex)
+      }, 3000)
+    }
   },
   methods: {
-    changeIndex(init = false, index = null, e) {
+    changeIndex(init = false, index = null) {
       this.currentSlideItemIndex = index !== null ? index : this.activeIndex
       !init && this.$setCss(this.slideList, 'transition-duration', `300ms`)
       this.$setCss(this.slideList, 'transform', `translate3d(${-this.getWidth(this.currentSlideItemIndex) + this.moveXDistance}px, 0px, 0px)`)
@@ -324,6 +352,7 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  position: relative;
 
   #base-slide-list {
     display: flex;
@@ -404,6 +433,29 @@ export default {
       }
     }
   }
+
+  .indicator-bullets {
+    position: absolute;
+    bottom: 1rem;
+    z-index: 2;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    .bullet {
+      @width: .5rem;
+      width: @width;
+      height: @width;
+      margin: 0 .3rem;
+      border-radius: 50%;
+      background: @second-btn-color;
+
+      &.active {
+        background: white;
+      }
+    }
+  }
 }
 
 </style>

src/pages/home/Search.vue

@@ -105,7 +105,7 @@
           </SlideItem>
           <SlideItem>
             <div class="slide3">
-              <div class="l-row" v-for="(item,index) in musicRankList">
+              <div class="l-row" v-for="(item,index) in musicRankList" @click="$nav('/home/music-rank-list')">
                 <div class="rank-wrapper">
                   <div class="rank" :class="{top:index < 3}">{{ index + 1 }}</div>
                 </div>
@@ -127,6 +127,7 @@
           </SlideItem>
           <SlideItem>
             <div class="slide4">
+              <div class="slide4-wrapper">
                 <div class="brands">
                   <div class="brand"
                        @click="toggleKey(key)"
@@ -156,6 +157,37 @@
                 </div>
                 <div class="more" @click="$no">查看完整品牌榜 ></div>
               </div>
+
+              <SlideRowList
+                  :autoplay="true"
+                  indicatorType="bullets"
+              >
+                <SlideItem>
+                  <div class="ad">AD1</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD2</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD3</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD4</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD5</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD6</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD7</div>
+                </SlideItem>
+                <SlideItem>
+                  <div class="ad">AD8</div>
+                </SlideItem>
+              </SlideRowList>
+            </div>
           </SlideItem>
         </SlideRowList>
       </div>
@@ -550,7 +582,7 @@ export default {
       selectBrandKey: '汽车',
       selectBrandKeyIndex: 0,
       randomGuess: [],
-      slideIndex: 0,
+      slideIndex: 3,
       list1: [],
       list2: [],
       timer: null
@@ -1019,9 +1051,11 @@ export default {
 
       .slide4 {
         margin: 0 @padding-page 5rem @padding-page;
-        padding: .5rem @padding-page;
         border-radius: 1rem;
 
+        .slide4-wrapper {
+          padding: .5rem @padding-page;
+
           .brands {
             color: @second-text-color;
             font-size: 1.2rem;
@@ -1170,7 +1204,18 @@ export default {
           }
         }
 
+
+        .ad {
+          background: @second-btn-color-tran;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 10rem;
+        }
+      }
+
       .more {
+        margin-bottom: 2rem;
         font-size: 1.2rem;
         padding: 1rem 1rem 0 1rem;
         text-align: center;

src/pages/message/Message.vue

@@ -142,7 +142,7 @@ import Footer from '../../components/Footer.vue'
 import Search from "../../components/Search";
 import FromBottomDialog from '../../components/dialog/FromBottomDialog'
 import Check from "../../components/Check";
-import {mapState} from "_vuex@4.0.2@vuex";
+import {mapState} from "vuex";
 
 export default {
   name: "Message",