彈層問題
- 彈層遮罩層用固定定位
.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