美文网首页
水平横向滑动

水平横向滑动

作者: 冰点雨 | 来源:发表于2023-03-14 14:07 被阅读0次
 <div  class="slide-box">
            <div class="slide-item" style="display: flex;flex-direction: column;">
              <van-icon name="smile-o" size="30"/>
              <span>天天免邮</span>
            </div>
            <div class="slide-item" style="display: flex;flex-direction: column;">
              <van-icon name="smile-o" size="30"/>
              <span>折上95折</span>
            </div>
            <div class="slide-item" style="display: flex;flex-direction: column;">
              <van-icon name="smile-o" size="30"/>
              <span>退换免运费</span>
            </div>
            <div class="slide-item" style="display: flex;flex-direction: column;">
              <van-icon name="smile-o" size="30"/>
              <span>生活特权</span>
            </div>
            <div class="slide-item" style="display: flex;flex-direction: column;">
              <van-icon name="smile-o" size="30"/>
              <span>专属客服</span>
            </div>
            <div class="slide-item" style="display: flex;flex-direction: column;">
              <van-icon name="smile-o" size="30"/>
              <span>极速售后</span>
            </div>
        </div>
.slide-box {
  margin-top: 20px;
  display: -webkit-box;
  white-space: nowrap;
  overflow-x: auto;
  /* 解决ios手机页面滑动卡顿问题 */
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
}

::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}

.slide-item {
  width: 120px;
  height: 130px;
  margin-right: 30px;
}

相关文章

网友评论

      本文标题:水平横向滑动

      本文链接:https://www.haomeiwen.com/subject/sjfkrdtx.html