零基础也能学会的微信小程序制作横向滚动布局

怼烎@ 2024-03-31 11:17 27阅读 0赞

零基础也能学会的微信小程序制作横向滚动布局  
准备工作：

微信开发者工具  
APPID或测试号  
创建一个JavaScript基本框架（如下图）  
![在这里插入图片描述][a475b7575cbc4dc0aa3da92d423df6df.png]动手做起来吧~

**`index.wxml`**

最终效果：  
![在这里插入图片描述][98f4aacb326d411381dd77fcd1796146.png]

<view class="container">
    <view class="body">
    <view class="Hot">我的推荐</view>
      
            <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
              <view class="scroll-view-item_H">
              <image style="margin-left: 15px;" src=""></image>
              </view>
              <view class="scroll-view-item_H">
              <image src=""></image>
              </view>
              <view class="scroll-view-item_H">
              <image src=""></image>
              </view>
              <view class="scroll-view-item_H">
              
              <image src=""></image>
              </view>
              <view class="scroll-view-item_H">
              <image src=""></image>
              </view>
              <view class="scroll-view-item_H">
              <image style="margin-right: 15px;" src=""></image>
              </view>
            </scroll-view>
      </view>
    </view>

**`index.wxss`**

/**index.wxss**/
    .body {
        
      width: 100%;
      height: 100px;
      padding-top: 45rpx;
      border-radius: 15px;
      /* background-color: rgb(228, 190, 190); */
    }
    
    .Hot {
        
      padding-bottom: 20px;
      margin-left: 10px;
      font-size: 15px;
      
      color: #818181;
    }
    
    .body image {
        
      width: 80px;
      height: 80px;
      border-radius: 20px;
      margin-left: 5px;
      margin-right: 10px;
      /* margin-top: 10px; */
      /* margin-bottom: 5px; */
    }
    
    .scroll-view_H {
        
      white-space: nowrap;
      /* background-color: rgb(226, 226, 226); */
      width: 100%;
    }
    
    .scroll-view-item {
        
      height: 150px;
    }
    
    .scroll-view-item_H {
        
      /* 设置横向 */
      display: inline-block;
      /* 间隔宽度 */
      /* width: 50%; */
      /* 高度 */
      height: 80%;
    }
    
    .usermotto {
        
      margin-top: 200px;
    }

快来实现您的视觉效果吧~

[a475b7575cbc4dc0aa3da92d423df6df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/21bb4293ace04a9293ee35c4eeb911e2.png
[98f4aacb326d411381dd77fcd1796146.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/287b7a1c2af544378f11c8cab500688c.png