小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法

最新推荐文章于 2024-10-29 16:49:54 发布

原创

最新推荐文章于 2024-10-29 16:49:54 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#scroll-view左右滑动 #css左右滑动 #左右滑动超出部分背景颜色不显示 #css

本文介绍了解决小程序scroll-view在左右滑动时，超出部分背景颜色不显示的CSS技巧。通过示例代码展示如何调整元素宽度以确保背景完整显示，并提供免积分的代码包下载链接。

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

完整代码在最底部

解决前后的效果图：

共用部分js

  data: {
    arr: [
      [1, 2, 3, 4, 5, 6],
      [1, 2, 3, 4, 5, 6],
      [1, 2, 3, 4, 5, 6],
      [1, 2, 3, 4, 5, 6]
    ],

  },

1.scroll-view左右滑动

wxml

  <scroll-view class="scroll" scroll-x="{true}">
    <view>
      <view  wx:for="{
  
  {arr}}"   style="background: {
  
  {index%2==0?'#ccc':'#ff00ff'}}">
        <view class="flex">
          <view wx:for="{
  
  {item}}">
            <view class="center"&g