欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序实践(十四):横向滚动列表

程序员文章站 2023-10-18 22:43:40
wxss文件样式 .item-image{ width: 80px; height: 80px; margin-right: 2px; } .item-image{ width: 80px; height: 80px; margin-right: 2px; } wxml 布局 ......

wxss文件样式

/*内层横向滚动列表*/
.rowitem {
    display: inline-block;
}
.scroll-x{
    white-space:nowrap;
    display:flex;
}
 .item-image{
   width: 80px;
   height: 80px;
   margin-right: 2px;
  }
 

wxml 布局

<scroll-view class="scroll-x" scroll-x="true" scroll-x>
        <view wx:for="{{pictures}}" class="rowitem">
            
            <image class="item-image" src="../../../image/icon_product.png" mode="aspectfill">
            </image>
        </view>
</scroll-view>

 

 

小程序实践(十四):横向滚动列表

 

上一篇: 吃花生

下一篇: Mybatis架构与原理