微信小程序左右滑动

最新推荐文章于 2025-04-12 14:31:28 发布

少女彤

最新推荐文章于 2025-04-12 14:31:28 发布

阅读量753

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_43244655/article/details/85626785

版权

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

3 篇文章

订阅专栏

本文展示了一段WXML代码，用于在小程序中创建滚动视图，包含品牌推荐、美妆和豪车推荐等标签，以及多个图片展示项。通过分析代码结构，我们可以了解WXML在布局设计、元素显示和样式设置上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<view class="container">
    <scroll-view scroll-x="true">
        <view class="uploadWrap" scroll-x="true">
          <text class="upload">品牌推荐</text>
          <text class="upload">美妆</text>
          <text class="upload">豪车推荐</text>
          <text class="upload">品牌推荐</text>
          <text class="upload">美妆</text>
          <text class="upload">豪车推荐</text>
          <text class="upload">品牌推荐</text>
          <text class="upload">美妆</text>
          <text class="upload">豪车推荐</text>
         
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
          <view class="upload_Item">
            <image class="upload_Item_img"  src="../../image/test1.jpg"></image>
          </view>
 
        </view>
        </scroll-view>
   </view>



.uploadWrap{
  height:160rpx; 
  width:100%; 
  display: flex; 
  display: -webkit-box; 
  flex-direction: column;
  }
.upload_Item{ 
  width: 160rpx;
   height: 160rpx; 
   padding:0rpx 15rpx;
    flex: 1;
  }
  .upload{
    padding:0rpx 15rpx;
    display:flex;
  }
.upload_Item_img{ 
  width: 160rpx; 
  height: 160rpx;
  }


          ```