小程序-scroll-view之使用

今天在开发小程序的时候,产品需求是希望导航能够通过手指水平滑动屏幕,采用的是官网的scroll-view组件
代码如下:
wxml

<scroll-view class="scroll-ul" scroll-x>
    <view class='scroll-li' wx:for="{{process_list.list}}" wx:key="item.id" data-item="{{item}}" data-itemIndex="{{index}}" bindtap='tabNavClick'>
      <view class='c-com {{item.color}}'>{{item.stage_name}}</view>
    </view>
</scroll-view>

wxcs

.scroll-ul {
  width: 100%;
  overflow: hidden;
  white-space: nowrap; //坑之一
}

.scroll-ul .scroll-li {
  display: inline-block;//坑之二
  margin-right: 20rpx;
  font-size: 24rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容