弹层问题
- 弹层遮罩层用固定定位
.cover { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.8; z-index: 2; }复制代码 - 每次弹层出现要重新计算出top的值（在watch中监听）
setAiStyle() { const top = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight / 2; this.aiStyle = { top: `${top}px` } watch: { showOrHide(value) { if (value) { this.setAiStyle(); } }, 复制代码 -
在弹层中如果有input，那么要给他一个blur事件，再一次重新计算出top
-
给整个页面一个touchMove事件，当有弹层出现的时候，阻止默认事件(目的是当有弹层时候，底下的遮罩层不乱滚)
touchMove(e) { if (this.rule6 || this.rule7 || this.rule8 || this.loginShow || this.shijiashow || this.isShow || this.showOrHide || this.rule2 || this.rule3 || this.rule4 || this.rule5 || this.goucheshow || this.zhihuanshow) { e.preventDefault(); // e.stopPropagation(); } },复制代码 - 每次关闭弹层之后要让他定位到当前位置：
showPopMask() { var top = $(window).scrollTop(); this.tempScrollTop = top; $('html,body').css({ 'overflow': 'hidden', 'width': '100%', 'position': 'fixed', 'top': -top + 'px'}) } closePopMask() { $('html,body').css({ 'overflow': 'auto', 'position': 'static'}); console.log('close', this.tempScrollTop) $('html,body').scrollTop(this.tempScrollTop); }复制代码 组件之间的通讯问题
-
1、父组件给子组件传值，传方法
- 在父组件中子组件的标签里动态绑定要传的值或者方法，然后在子组件里用props收
复制代码props: { close: { type: Function, }, getstatus:{ type:Function, }, blur:{ type: Function, }, top: { type: Object, default:"" }, islogin:{ type:Boolean }, goucheex1:{ type:Number },复制代码- 子组件里面的值发生变化时，需要watch监听新值和老值才行
watch:{ phone: function (newvalue, oldvalue) { if(oldvalue===""&& oldvalue!==newvalue){ this.telephone=newvalue; } }, name:function (newvalue, oldvalue) { if(oldvalue===""&& oldvalue!==newvalue){ this.UserName=newvalue; } }复制代码 -
子传父的方法
- 第一步，在父组件中自定义一个事件，然后子组件中发射这个事件，并把需要传的值写入第二个参数里面
父组件写法
methods:{ loginStatus(p) { this.isLogin = p; } } 复制代码 子组件写法
this.$emit("login",true);复制代码
滑动的问题
-
有的手机无法左右滑动，那么如果遇到滑动可以使用iscroll或者swiper插件，但是正常的swiper也有问题，在ios低版本上不能轮播，vue项目可以使用vue-awesome-swiper 这个插件（依赖swiper4的插件）
-
教程：
- vue-awesome-swiper用法：
(1) 下载：npm install vue-awesome-swiper --save
(2) 引入： import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
(3)DOM结构部分
{
{item.CarSerial}} { {item.CarName}}{ {item.CarYear}}|{ {item.DrivingMileage}}| { {item.City}}
指导价:{ {item.CarPrice}}
申请购车申请置换更多车型>(4)在data里面定义要配置的参数：
data(){ return { swiperOption: { speed:800, //滑动方向 direction : 'horizontal' loop: true, autoplay:3500, autoplayDisableOnInteraction: false, slidesPerView: 3, slidesPerGroup: 1, }, } } 复制代码
转盘游戏
- 动态绑定样式(子集元素太多的话，一个个写class名太费劲就用:nth-child()),动态的有些时候需要借助计算属性来实现
复制代码
{
{item}}剩余游戏次数{
{remainCount}}次
computed:{ giftClassName: function () { if (this.giftName === "¥1111北现购车券") { return 'prize0'; } if (this.giftName === "宝马5系混动购车券") { return 'prize1' } if (this.giftName === "谢谢参与") { return 'prize2' || 'prize7' } if (this.giftName === "JBL Pulse2 小音箱") { return 'prize3' } if (this.giftName === "索尼便携迷你音响") { return 'prize4' } if (this.giftName === "小米无线蓝牙耳机") { return 'prize5' } if (this.giftName === "¥111元购车券") { return 'prize6' } return ''; } } 复制代码 - 2、CSS旋转动画
&.rotate { -webkit-animation: roll 0.5s linear infinite; animation: roll 0.5s linear infinite; } @-webkit-keyframes roll { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @keyframes roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 复制代码 翻牌动画
- 3D 翻转
翻转的块(li){ -webkit-perspective:1500 }正面的块{ .bac3 .fanpai-contain li .box { display: block; width: px2rem(213); height: px2rem(131); backface-visibility: hidden; transition: all 1s; }反面的块{ .bac3 .fanpai-contain li .back position: relative; display: block; width: px2rem(213); height: px2rem(131); transform: rotateY(-180deg) }按照Y轴旋转： transform: rotateY(180deg); 复制代码 1、后台返回的数据一定要判断是否存在，如果存在在做操作,不然会报错
2、在后台返回数据之前,要禁止用户点击，省的发送太多次请求，在点击事件上加一个flag
3、苹果手机的输入框直接用px写，不用px2rem(),不然看不见了
项目的线上地址：