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);}
}

四、效果

Vue 公众号商城实现浏览足迹相关推荐

用vue开发一个公众号商城SPA——1.前期准备和写页面
使用vue开发公众号商城第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很 ...
【开源】小程序And公众号商城，外加后台，功能齐全！
前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目,后台是基于WeiPHP5.0开发的,WeiPHP是一个简洁而强大的开源微信公众平台开发框架,微信功能插件化开发,多公众号管理,配置简单. ...
如何提高公众号商城的客户体验度？
公众号商城作为新零售时代下的产物,伴随移动网络的发展,正在逐渐改变着人们的消费习惯,人们不再局限于大众平台,而是走向小众私圈,更直接精准对接自己的需求,而如何满足客户并转化客户就是商家所要思考的,除了 ...
公众号商城开发和微信小程序商城开发有什么区别？
小程序和公众号商城都属于微商城,但是有很多朋友也不知道这两者之间有什么区别.对于选择做公众号商城还是小程序商城时,出现了选择困难症.既然微信小程序商城和微信公众号商城都是微信内的产品aigao0607 ...
微信公众号商城怎么搭建和如何运营
现在智能手机已经普及到每一个人,微信作为频繁使用的APP之一,拥有大量的用户群体,这可以给创业者带来巨大的商机.那么没有经验的人怎么搭建微信公众号商场,该如何搭建,从那里开始,怎么运营微信公众号商城. ...
weiit-saas第六篇《如何快速制作与搭建微信公众号商城》
上一篇文章讲到了如何用weiit-saas开源产品搭建微信小程序,今天我们就来讲解一下如何通过公众号授权一键生成公众号商城.其实也跟小程序制作大同小异,有兴趣的小伙伴赶紧来试一下吧! 首先,打开蜗 ...
公众号商城系统让电商更简单！
微商城是基于当前很受欢迎的微信的一种传媒方式中的一种商业运用,微信当前的火热是一个商机,基于微信的传播速度,及其简便等优点,为商家提供一个平台,在这个更简便的.方便的平台里进行更为现代的电子商务. 搭 ...
公众号商城、小程序商城、APP商城哪个更好？
用户体验好:app商城.小程序商城.公众号商城就商城而言,我个人觉得都没什么区别,现在网速都很快,公众号商城用户体验也不会差太多. 建设成本低:公众号商城.小程序商城.APP商城这个随便找几个开发 ...
如何打造护肤品公众号商城？这几点很重要！
护肤品是众所皆知的有较大利润空间的行业,但线下市场长期被大牌占领,国内小众品牌很难在实体门店中获取优势,而传统微商的方式去做护肤品也已经不适合当下的社会环境,消费者对于微商已经存在防范意识,所以单纯的 ...

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

Vue 公众号商城实现浏览足迹相关推荐

最新文章

热门文章