微信小程序-scroll-view左右滑动

最新推荐文章于 2024-05-15 16:18:50 发布

原创

最新推荐文章于 2024-05-15 16:18:50 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何使用微信小程序的scroll-view组件实现页面内容的左右滑动。通过示例代码展示了wxml、wxss和JS的具体配置，帮助开发者理解并实现这一功能。

效果：

wxml页面：

  <view class="section section_gap">
    <scroll-view class="scroll-view_H" scroll-x="true">
      <view class="scroll-view-item_H" wx:for="{
  
  {hotList}}" wx:key="{
  
  {item}}">
        <image src="{
  
  {item.pic}}"class="scroll-image"/>     
      </view> 
    </scroll-view>
  </view>

对应的wxss:

.section{
  width: 100%;
  margin-top:10px;
}

.scroll-view_H{
  height:210rpx;
  display: flex;
  width: 100%;
  white-space: nowrap;

}
.scroll-view-item_H{
  width:300rpx;
  height:210rpx;
  margin-right:5rpx;
  display: inline-block;

}
.scroll-image{
  width:300rpx;
  height:210rpx;
  display: block;
  border-radius: 10px
}

对应的JS：在data中定义对象