优化搜索排行榜

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,34 +127,66 @@
           </SlideItem>
           <SlideItem>
             <div class="slide4">
-              <div class="brands">
-                <div class="brand"
-                     @click="toggleKey(key)"
-                     :class="{active:key === selectBrandKey}"
-                     v-for="key in Object.keys(brandRankList)">
-                  {{ key }}
-                </div>
-              </div>
-              <div class="l-row" v-for="(item,index) in selectBrandList">
-                <div class="rank-wrapper">
-                  <div class="rank" :class="{top:index < 3}">{{ index + 1 }}</div>
+              <div class="slide4-wrapper">
+                <div class="brands">
+                  <div class="brand"
+                       @click="toggleKey(key)"
+                       :class="{active:key === selectBrandKey}"
+                       v-for="key in Object.keys(brandRankList)">
+                    {{ key }}
+                  </div>
                 </div>
-                <div class="right">
-                  <div class="center">
-                    <div class="avatar-wrapper" :class="item.living ? 'living':''">
-                      <div class="avatar-out-line"></div>
-                      <img v-lazy="$imgPreview(item.logo)" alt="" class="avatar">
-                      <!--                      <img :src="item.logo" class="avatar">-->
-                    </div>
-                    <div class="desc">{{ item.name }}</div>
+                <div class="l-row" v-for="(item,index) in selectBrandList">
+                  <div class="rank-wrapper">
+                    <div class="rank" :class="{top:index < 3}">{{ index + 1 }}</div>
                   </div>
-                  <div class="count">
-                    <img src="../../assets/img/icon/home/hot-gray.png" alt="">
-                    <span>{{ $likeNum(item.hot_count) }}</span>
+                  <div class="right">
+                    <div class="center">
+                      <div class="avatar-wrapper" :class="item.living ? 'living':''">
+                        <div class="avatar-out-line"></div>
+                        <img v-lazy="$imgPreview(item.logo)" alt="" class="avatar">
+                        <!--                      <img :src="item.logo" class="avatar">-->
+                      </div>
+                      <div class="desc">{{ item.name }}</div>
+                    </div>
+                    <div class="count">
+                      <img src="../../assets/img/icon/home/hot-gray.png" alt="">
+                      <span>{{ $likeNum(item.hot_count) }}</span>
+                    </div>
                   </div>
                 </div>
+                <div class="more" @click="$no">查看完整品牌榜 ></div>
               </div>
-              <div class="more" @click="$no">查看完整品牌榜 ></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>
@@ -550,7 +582,7 @@ export default {
       selectBrandKey: '汽车',
       selectBrandKeyIndex: 0,
       randomGuess: [],
-      slideIndex: 0,
+      slideIndex: 3,
       list1: [],
       list2: [],
       timer: null
@@ -1019,158 +1051,171 @@ export default {
 
       .slide4 {
         margin: 0 @padding-page 5rem @padding-page;
-        padding: .5rem @padding-page;
         border-radius: 1rem;
 
-        .brands {
-          color: @second-text-color;
-          font-size: 1.2rem;
-          margin-bottom: 1.5rem;
-          display: flex;
-
-          .brand {
-            border-radius: .2rem;
-            margin-right: 1rem;
-            padding: .5rem 1rem;
-            background: @second-btn-color-tran;
+        .slide4-wrapper {
+          padding: .5rem @padding-page;
 
-            &.active {
-              color: white;
-              background: @second-btn-color;
-            }
-          }
-        }
+          .brands {
+            color: @second-text-color;
+            font-size: 1.2rem;
+            margin-bottom: 1.5rem;
+            display: flex;
 
-        .l-row {
-          font-size: 1.4rem;
-          display: flex;
-          margin-bottom: 1rem;
-          align-items: center;
-          color: @second-text-color;
+            .brand {
+              border-radius: .2rem;
+              margin-right: 1rem;
+              padding: .5rem 1rem;
+              background: @second-btn-color-tran;
 
-          &:active {
-            opacity: .5;
+              &.active {
+                color: white;
+                background: @second-btn-color;
+              }
+            }
           }
 
-          .rank-wrapper {
+          .l-row {
+            font-size: 1.4rem;
             display: flex;
+            margin-bottom: 1rem;
             align-items: center;
+            color: @second-text-color;
 
-            .rank {
-              width: 1.8rem;
-              height: 1.8rem;
-              line-height: 1.8rem;
-              text-align: center;
-              margin-right: 1.5rem;
+            &:active {
+              opacity: .5;
+            }
 
-              &.top {
-                color: yellow;
+            .rank-wrapper {
+              display: flex;
+              align-items: center;
+
+              .rank {
+                width: 1.8rem;
+                height: 1.8rem;
+                line-height: 1.8rem;
+                text-align: center;
+                margin-right: 1.5rem;
+
+                &.top {
+                  color: yellow;
+                }
               }
             }
-          }
-
-          .right {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
 
-            .center {
-              width: calc(100vw - 15rem);
-              box-sizing: border-box;
-              //padding: 0 1rem;
-              //flex: 1;
+            .right {
+              flex: 1;
               display: flex;
               align-items: center;
-              font-size: 1.4rem;
-              color: white;
+              justify-content: space-between;
 
-              .avatar-wrapper {
-                @width: 3.5rem;
-                margin-right: 1rem;
+              .center {
+                width: calc(100vw - 15rem);
+                box-sizing: border-box;
+                //padding: 0 1rem;
+                //flex: 1;
+                display: flex;
+                align-items: center;
+                font-size: 1.4rem;
+                color: white;
 
-                &.living {
-                  position: relative;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  width: @width;
-                  height: @width;
-                  border-radius: 50%;
-                  background: @primary-btn-color;
+                .avatar-wrapper {
+                  @width: 3.5rem;
+                  margin-right: 1rem;
 
-                  .avatar-out-line {
+                  &.living {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
                     width: @width;
                     height: @width;
-                    position: absolute;
-                    background: transparent;
                     border-radius: 50%;
-                    border: .2rem solid @primary-btn-color;
-                    animation: avatar-out-line 1s infinite;
+                    background: @primary-btn-color;
+
+                    .avatar-out-line {
+                      width: @width;
+                      height: @width;
+                      position: absolute;
+                      background: transparent;
+                      border-radius: 50%;
+                      border: .2rem solid @primary-btn-color;
+                      animation: avatar-out-line 1s infinite;
+
+                      @keyframes avatar-out-line {
+                        from {
+                          padding: 0;
+                        }
+                        to {
+                          opacity: 0;
+                          padding: .2rem;
+                        }
+                      }
+                    }
+
+                    .avatar {
+                      padding: .1rem;
+                      animation: avatar 1s infinite alternate;
+                    }
+                  }
+
+                  .avatar {
+                    position: relative;
+                    z-index: 2;
+                    width: @width - 0.3;
+                    height: @width - 0.3;
+                    border-radius: 50%;
+                    background: black;
+                    box-sizing: border-box;
 
-                    @keyframes avatar-out-line {
+                    @keyframes avatar {
                       from {
-                        padding: 0;
+                        padding: .1rem;
                       }
                       to {
-                        opacity: 0;
                         padding: .2rem;
                       }
                     }
                   }
-
-                  .avatar {
-                    padding: .1rem;
-                    animation: avatar 1s infinite alternate;
-                  }
                 }
 
-                .avatar {
-                  position: relative;
-                  z-index: 2;
-                  width: @width - 0.3;
-                  height: @width - 0.3;
-                  border-radius: 50%;
-                  background: black;
-                  box-sizing: border-box;
-
-                  @keyframes avatar {
-                    from {
-                      padding: .1rem;
-                    }
-                    to {
-                      padding: .2rem;
-                    }
-                  }
+                .desc {
+                  max-width: 95%;
+                  font-size: 1.4rem;
+                  white-space: nowrap;
+                  text-overflow: ellipsis;
+                  overflow: hidden;
                 }
-              }
 
-              .desc {
-                max-width: 95%;
-                font-size: 1.4rem;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
               }
 
-            }
-
-            .count {
-              display: flex;
-              align-items: center;
-              font-size: 1.2rem;
+              .count {
+                display: flex;
+                align-items: center;
+                font-size: 1.2rem;
 
-              img {
-                margin-right: .2rem;
-                width: 1.5rem;
-                height: 1.5rem;
+                img {
+                  margin-right: .2rem;
+                  width: 1.5rem;
+                  height: 1.5rem;
+                }
               }
             }
           }
         }
+
+
+        .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",