需求：手机可以左右滑动，显示商品或者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;
}

实现效果：