弹层问题
- 弹层遮罩层用固定定位
.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-->
showPopMask() {
var top = $(window).scrollTop();
this.tempScrollTop = top;
$('html,body').css({'overflow': 'hidden', 'width': '100%', 'position': 'fixed', 'top': -top + 'px'})
}
<!--弹层关闭是执行closePopMask-->
closePopMask() {
$('html,body').css({'overflow': 'auto', 'position': 'static'});
console.log('close', this.tempScrollTop)
$('html,body').scrollTop(this.tempScrollTop);
}
复制代码组件之间的通讯问题
-
1、父组件给子组件传值，传方法
- 在父组件中子组件的标签里动态绑定要传的值或者方法，然后在子组件里用props收
<!--父组件传值--> <div v-show = "goucheshow":style="aiStyle"> <gouche :close="handleClose" :top="aiStyle" :islogin="this.isLogin" :name="this.UserName" :phone="this.telephone" :goucheex1="this.goucheex1" :getstatus="getStatus" :blur="setAiStyle" :picture="this.picture" ></gouche> </div> 复制代码<!--子组件接收--> 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;
}
}
复制代码-
子传父的方法
- 第一步，在父组件中自定义一个事件，然后子组件中发射这个事件，并把需要传的值写入第二个参数里面
父组件写法
<login :close="handleClose" :top="aiStyle" :phone="this.telephone" @logins="loginStatus" :getstatus="getStatus" :blur="setAiStyle"></login> methods:{ loginStatus(p) { this.isLogin = p; } } 复制代码子组件写法
this.$emit("login",true); 复制代码
滑动的问题
-
有的手机无法左右滑动，那么如果遇到滑动可以使用iscroll或者swiper插件，但是正常的swiper也有问题，在ios低版本上不能轮播，vue项目可以使用vue-awesome-swiper 这个插件（依赖swiper4的插件）
-
教程：segmentfault.com/a/119000001…
- 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结构部分
<swiper class="carcontain2" :options="swiperOption" ref="bannerSwiper"> <swiper-slide v-for="(item,index) in oldcarArr2" class="adCar"> <img :src="item.MImageUrl" alt=""> <p class="p1">{{item.CarSerial}} {{item.CarName}}</p> <p class="p2"><em class="desc">{{item.CarYear}}</em><span>|</span><em class="desc">{{item.DrivingMileage}}</em><span>|</span> <em class="em3 desc">{{item.City}}</em></p> <p class="p3"><em class="zhidao">指导价:</em><em class="pri">{{item.CarPrice}}</em></p> <div class="buy" @click="goucheAlert(6,item.CarSerial,index+1,item.MImageUrl)">申请购车</div> <div class="change" @click="zhihuanAlert(6,item.CarSerial,index+1)">申请置换</div> <a :href="item.MUrl"> <div class="morecar">更多车型></div> </a> </swiper-slide> </swiper> 复制代码(4)在data里面定义要配置的参数：
data(){ return { swiperOption: { speed:800, //滑动方向 direction : 'horizontal' loop: true, autoplay:3500, autoplayDisableOnInteraction: false, slidesPerView: 3, slidesPerGroup: 1, }, } } 复制代码
转盘游戏
- 动态绑定样式(子集元素太多的话，一个个写class名太费劲就用:nth-child()),动态的有些时候需要借助计算属性来实现
<div class="bac6" id="m5">
<div class="dapan-contain" :class="this.giftClassName" ref="dapan">
<img src="./image/dapan.png" alt="" class="dapan">
<p v-for="item in gifts">{{item}}</p>
</div>
<p class="remaincount">剩余游戏次数{{remainCount}}次</p>
<span class="share" @click="handleShare"></span>
</div>
复制代码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(),不然看不见了
项目的线上地址：1111.m.daikuan.com