微信小程序横向滑动列表

最新推荐文章于 2024-08-23 10:43:07 发布

原创最新推荐文章于 2024-08-23 10:43:07 发布 · 1.2w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#横向滑动 #列表 #微信小程序

微信小程序专栏收录该内容

6 篇文章

订阅专栏

wxml

<!-- 横向滑动列表 -->
<text style='font-size:15px;padding:10px;'>横向滑动列表>></text>
<scroll-view scroll-x class="scroll-x">
  <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent">
    <view class="view-item">{{item.txt}}</view>
  </view>
</scroll-view>

wxss

.scroll-x{
    height:80px;
    white-space:nowrap;
    display:flex;
}
/* 隐藏scrollbar */
::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}
.view-parent{
    display:inline-block;
}
.view-item{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-color:#222;
    background:#80CBC4;
    margin:10px;
}