Vue 公众号商城实现浏览足迹

一、HTML

<div class="product-page" v-if="product" @touchstart="touchstart()" @touchmove="touchmove()">
  <van-popup v-model="is_history" position="top" class="history-popup" v-if="viewLog.length > 0">
    <div class="history-tl">浏览足迹({{activeIndex}}/{{viewLog.length}})</div>
    <swiper :options="swiperOption" ref="mySwiper" @slideChange="slideChange">
  　　<swiper-slide v-for="(history, index) in viewLog" :key="index" class="history-item">
        <div @click.stop="goProduct(history)">
          <img :src="history.cover ? history.cover : '/static/images/avatar_default.jpg'"/>
          <div class="history-content">
            <div class="history-name two-nowrap">{{history.name}}</div>
            <div class="price">
              <span class="sale_price">￥{{history.sale_price}}</span>
              <span class="market_price">￥{{history.market_price}}</span>
            </div>
          </div>
        </div>
  　　</swiper-slide>
    </swiper>
  </van-popup>
</div>

二、js

data() {
	return {
		startX: 0,
	    startY: 0,
	    is_history: false,
	    viewLog: [],
	}
},
created() {
	this.getViewLog();
},
methods: {
 	/**
     * 计算初始滑动位置
     */
    touchstart() {
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    /**
     * 计算页面滑动距离
     */
    touchmove(e) {
      var moveEndX = event.changedTouches[0].pageX;
      var moveEndY = event.changedTouches[0].pageY;
      var X = moveEndX - this.startX;
      var Y = moveEndY - this.startY;
      if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        if (Math.abs(Y) - Math.abs(X) > 100) {
          this.is_history = true;
        }
      }
    },
    /**
     * 切换图片
     */
    slideChange() {
      this.activeIndex = this.$refs.mySwiper.$swiper.activeIndex + 1;
    },
    /**
     * 获取浏览记录
     */
    getViewLog() {
      this.$fn.get('viewLog', {}, res => {
        if (res.status === 'success') {
          this.viewLog = res.data;
        }
      });
    }
}

三、css

.history-popup {
  background-color: #f5f5f5;
  .history-tl {
    text-align: center;
    margin: 5px 0 15px;
  }
  .history-item {
    margin-bottom: 10px;
    img {
      width: 100%;
    }
    .history-content {
      .history-name {
        color: #333333;
        font-size: 12px;
        height: 34px;
      }
      .price {
        display: flex;
        align-items: baseline;
        .sale_price {
          color: #fa4847;
          font-size: 14px;
        }
        .market_price {
          color: #999999;
          font-size: 12px;
        }
      }
    }
  }
  .swiper-container {
    width: 100%;
    background: #f5f5f5;
    height: auto;
    padding-bottom: 10px;
  }
  .swiper-slide {
    transition: 300ms;
    background: #fff;
    padding: 2px;box-sizing: border-box;
    transform: scale(0.8)!important;
    opacity: .4;
  }
  .swiper-slide-active, .swiper-slide-duplicate-active{
    transform: scale(1)!important;
    opacity: 1;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.1);
  }
}

四、效果