diff --git a/src/components/star/starRank.vue b/src/components/star/starRank.vue index 83a20949926f7c7c7abe5a8e12efd66d8c788fd8..d3c9ff2409e6dfb8525dc1d2d117b5507dc02f1d 100644 --- a/src/components/star/starRank.vue +++ b/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(); } };