需求：手機可以左右滑動，顯示商品或者div信息

原理：建立兩個盒子，一個是可以看到的手機屏幕盒子，一個是自己設定好的盒子，左右滑動，只顯示與手機屏幕盒子交集的部分

代碼：

<div id="good-style"><div id="close-icon" @click="show = false">X</div><div id="good-li"><div id="good-img"></div><p>商品1</p></div><div id="good-li"><div id="good-img"></div><p>商品2</p></div><div id="good-li"><div id="good-img"></div><p>商品3</p></div><div id="good-li"><div id="good-img"></div><p>商品4</p></div><div id="good-li"><div id="good-img"></div><p>商品5</p></div><div id="good-li"><div id="good-img"></div><p>商品6</p></div><div id="good-li"><div id="good-img"></div><p>商品7</p></div></div>

樣式：

#close-icon {position: fixed;font-size: 2vh;padding-left: 96vw;margin-top: 1vw;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 0.8); }#good-style {position: fixed;top: 72vh;width: 100%;height: 28vh;background-color: rgba(24, 24, 24, 0.8);white-space: nowrap; //不換行overflow-y: scroll; // -webkit-overflow-scrolling: touch;#good-li {width: 30vw;height: 24vh;// float: left;margin-top: 2vh;margin-left: 2vw;display: inline-block;#good-img {width: 26vw;height: 18vh;float: left;margin-top: 2vh;margin-left: 2vw;background-color: blanchedalmond;}p {text-align: center;padding-top: 19vh;font-family: PingFang SC;font-weight: 500;color: rgba(255, 255, 255, 1);}} }#good-style::-webkit-scrollbar {//去除滾動條width: 0;height: 0;display: none; }

實現效果：

總結

以上是生活随笔為你收集整理的前端：实现手机左右滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。