liwei

src/components/star/starRank.vue

@@ -37,19 +37,11 @@
         <span class="line"></span>
       </div>
     </div>
-    <van-swipe
-      :loop="false"
-      :show-indicators="false"
-      :touchable="true"
-      :initial-swipe="tabIndex-1"
-      :duration="1000"
-      class="scroll"
-      @change="swipeChange"
-    >
-      <van-swipe-item @click="swipeItemClick">
+    <swiper class="scroll" :options="swiperOption" ref="mySwiper">
+      <swiperSlide>
         <scroll
           :style="{maxHeight: height +'px'}"
-          v-if="starNum!=0&&tabIndex==1"
+          v-if="starNum!=0"
           ref="scrollItem"
           :data="starList"
           :bounce="false"
@@ -86,7 +78,7 @@
                     <img :src="starPage.star_prize2" alt>
                   </div>
                 </div>
-                <div class="addr" @click="goAddr($event)" v-if="!addressObj">
+                <div class="addr" @click="goAddr()" v-if="!addressObj">
                   点击这里，快去填写收货地址吧
                   <i class="iconfont icon-youjiantou"></i>
                 </div>
@@ -164,11 +156,11 @@
             </div>
           </div>
         </scroll>
-      </van-swipe-item>
-      <van-swipe-item>
+      </swiperSlide>
+      <swiperSlide>
         <scroll
           :style="{maxHeight: height +'px'}"
-          v-if="starNum!=0&&tabIndex==2"
+          v-if="starNum!=0"
           ref="scrollItem"
           :data="starList"
           :pullup="pullup"
@@ -190,12 +182,14 @@
             <div v-if="finished" class="none">没有更多了~</div>
           </div>
         </scroll>
-      </van-swipe-item>
-    </van-swipe>
+      </swiperSlide>
+    </swiper>
   </div>
 </template>
 
 <script>
+import "swiper/dist/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
 import rankBg from "../../assets/rankBg.png";
 import { starPage } from "../../util/imgUrl";
 import {
@@ -210,8 +204,8 @@ Vue.use(Swipe).use(SwipeItem);
 export default {
   name: "starRank",
   data() {
+    let that = this;
     return {
-      isClick: true,
       height: 0,
       pullup: true,
       rankBg: rankBg,
@@ -227,19 +221,24 @@ export default {
       addressObj: false,
       starInfo: {
         code: ""
+      },
+      swiperOption: {
+        on: {
+          slideChangeTransitionEnd: function() {
+            console.log(this.activeIndex);
+            that.tabIndex = this.activeIndex + 1;
+          }
+        }
       }
     };
   },
-  components: {},
+  components: { swiper, swiperSlide },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
   methods: {
-    swipeItemClick(e) {
-      console.log("swipeItemClick", e);
-      this.isClick = true;
-    },
-    swipeChange(index) {
-      this.tabIndex = index + 1;
-      this.isClick = false;
-    },
     goResult() {
       this.$router.push({
         name: "starResult",
@@ -247,38 +246,33 @@ export default {
       });
     },
     goAddr(e) {
-      if (this.isClick) {
-        if (this.addressObj) {
-          this.$router.push({
-            name: "activityAddr"
-          });
-        } else {
-          this.$router.push({
-            name: "addressEdit"
-          });
-        }
-      }
-    },
-    goDetail(index, e) {
-      console.log("goDetail", e);
-      if (this.isClick) {
-        let obj = {};
-        obj.index = index;
-        if (index == 1) {
-          obj.start_at = this.starInfo.start_at;
-          obj.first_over_at = this.starInfo.first_over_at;
-          obj.user_category_integral_last_ten = this.starInfo.user_category_integral_last_ten;
-        } else {
-          obj.start_at = this.starInfo.start_at;
-          obj.second_over_at = this.starInfo.second_over_at;
-          obj.user_category_integral_last_twenty = this.starInfo.user_category_integral_last_twenty;
-        }
+      if (this.addressObj) {
         this.$router.push({
-          name: "starDetail",
-          query: { starInfo: obj }
+          name: "activityAddr"
+        });
+      } else {
+        this.$router.push({
+          name: "addressEdit"
         });
       }
     },
+    goDetail(index) {
+      let obj = {};
+      obj.index = index;
+      if (index == 1) {
+        obj.start_at = this.starInfo.start_at;
+        obj.first_over_at = this.starInfo.first_over_at;
+        obj.user_category_integral_last_ten = this.starInfo.user_category_integral_last_ten;
+      } else {
+        obj.start_at = this.starInfo.start_at;
+        obj.second_over_at = this.starInfo.second_over_at;
+        obj.user_category_integral_last_twenty = this.starInfo.user_category_integral_last_twenty;
+      }
+      this.$router.push({
+        name: "starDetail",
+        query: { starInfo: obj }
+      });
+    },
     onReachBottom() {
       if (!this.finished && this.loading) {
         this.loading = false;
@@ -335,7 +329,6 @@ export default {
               getComputedStyle(this.$refs.floatBox).height.replace("px", "")
             )
           );
-          console.log(document.documentElement.clientHeight);
           let top =
             (document.documentElement.clientHeight -
               Number(
@@ -364,8 +357,13 @@ export default {
       });
     },
     tabChange(index) {
-      console.log(index);
       this.tabIndex = index;
+      if (index == 1) {
+        this.swiper.slidePrev();
+      } else if (index == 2) {
+        this.swiper.slideNext();
+      }
+
       // if(index==2){
       //   setTimeout(() => {
       //     this.$refs.scrollItem._initScroll()
@@ -380,7 +378,6 @@ export default {
     this.height =
       screen.height -
       Number(getComputedStyle(this.$refs.floatBox).height.replace("px", ""));
-
     this.initPage();
   }
 };