微信小程序scroll-view标签的用法

最新推荐文章于 2024-08-05 22:03:40 发布

怼怼爱吃瓜

最新推荐文章于 2024-08-05 22:03:40 发布

阅读量348

点赞数

文章标签：开发语言微信小程序 css

本文链接：https://blog.csdn.net/m0_59638475/article/details/130291557

版权

需求：横向滚动

1.首先在wxml页面书写标签

//注意 ：横向滚动必须要给一个宽度100% scroll-x属性：代表横向滚动  
<scroll-view class="scrollItem" scroll-x="true" style="width: 100%;">
  <view bindtap="clickEvent" class="item" wx:for="{{bgSrc}}" wx:key="index" data-index="{{index}}">
  <image mode="aspectFit" src="{{item.selectedSrc}}"></image>
  <text>{{item.title}}</text>
  </view>
  </scroll-view>

/* scrollItem 是scroll-view标签上的类名 item是他的子标签 */
.scrollItem{
  /* //强制一行  必写*/
  white-space: nowrap; 
  /* 溢出隐藏 必写 */
  overflow: hidden;
}
.item{
  /* 类是块级元素 转换为行内块元素才能在一行显示 必写 */
  display: inline-block; 
  padding: 0 16rpx;
}