由於業務需求，需要乙個移動端上下滑動的輪播圖功能；
由於沒找到合適的輪子，所以自行寫了乙個；
沒有寫定時器，有需要自行加個就行了；
設計思路很簡單，利用了css的動畫來實現；
先看看效果
注意事項：
<
!-- 上下滑動輪播檢視 --
>
="collection-preview"
>
="img-list"
>
class
="left-prev"
@click=
"onprev"
:style=
"">
="el-icon-arrow-left"
>
<
/i>
<
/div>
class
="right-next"
@click=
"onnext"
:style=
"">
="el-icon-arrow-right"
>
<
/i>
<
/div>
="img-container" ref=
"imgcontainer"
>
v-for=
"(item1, index) in imglist"
:key=
"index"
:class
="[imgindex === index ? 'active' : '']"
:style="`,
transform:
`translatey(
$px) scale($)`
, top: imgindex === index ? eltop +
'px'
:'0px',}"
@touchstart=
"(e) => ontouchstart(e, index)"
@touchmove=
"ontouchmove"
@touchend=
"ontouchend"
>
"item1" v-show=
"index < 3" alt=""/
>
<
/li>
"imglist.length === 0"
>暫無資料<
/li>
<
/ul>
<
/div>
<
/div>
<
/template>
export
default,}
,data()
;}, watch:
this
.imglist =
[...newvalue]
;this
.setpositionlist()
;},}
,},created()
,mounted()
, methods:;}
);},
// 上乙個
onprev()
,// 下乙個
onnext()
,// 拖拽開始
ontouchstart
(e, index)
,// 拖拽移動
ontouchmove
(e)else
if(otop >=
this
.touchmax)
// 減小一倍拖動阻力
this
.eltop = otop *2;
document.
addeventlistener
('touchmove'
,this
.defaultevent,
false);
},// 拖拽移動事件移除
ontouchend()
elseif(
this
.eltop >
this
.touchmax)
this
.eltop =0;
document.
removeeventlistener
('touchmove'
,this
.defaultevent);}
,//阻止預設事件
defaultevent
(e),},
};<
/script>
使用Vue寫乙個登入頁面
為了不浪費大家時間，所以我把這段話放在了開頭。上一部落格講到構建了乙個vue專案，現在在那個專案之上實現乙個登入頁面。因為用到了element ui元件，所以需要先安裝element ui元件，進入專案根目錄後 執行cnpm i element ui構建專案的目錄 自己寫的樣式 import sty...
使用Vue寫乙個登入頁面
上一部落格講到構建了乙個vue專案，現在在那個專案之上實現乙個登入頁面。因為用到了element ui元件，所以需要先安裝element ui元件，進入專案根目錄後 執行cnpm i element ui構建專案的目錄 自己寫的樣式 import style theme.css import sty...
vue實現乙個移動端遮蔽滑動的遮罩層
在扯廢話浪費大家的時間之前，先上個 好了，使用vue實現起來很簡單 對，就是這麼簡單，加上 touchmove.prevent就可以遮蔽滑動頁面了，然後再和普通的遮罩層一樣，加點樣式 遮罩層 overlayer如此，便可以了 vue真是好用啊 如果彈窗不在遮罩層內部，那麼冒泡就不會經過遮罩層，也就無...