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

拼搏现实的明天。 2021-07-24 13:46 682阅读 0赞

**完整代码在最底部**

解决前后的效果图：

![20210104154913540.gif][]     ![20210104155302623.gif][]

共用部分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">{
       {index}}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>

css

###  2.css左右滑动 ###

wxml

<view class="scroy_x">
        <view>
          <view wx:for="{
       {arr}}" style="background: {
       {index%2==0?'#ccc':'#ff00ff'}};">
            <view class="flex">
              <view wx:for="{
       {item}}">
                <view class="center">{
       {index}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>

css

.scroy_x{
      margin-top: 100rpx;
      width: 600rpx;
      border: 1rpx solid red;
      margin-left: 100rpx; 
      overflow-x: scroll;
      
    }
    .scroy_x::-webkit-scrollbar {
      display: none;
    }

效果图

![20210104154836668.gif][]

bug解决代码

<view>
      
      <scroll-view class="scroll" scroll-x="{true}">
        <view>
          <view  wx:for="{
       {arr}}" class="bg"  style=" width:{
       {item.length*200+2*(item.length-1)}}rpx;background: {
       {index%2==0?'#ccc':'#ff00ff'}}">
            
            <view class="flex">
              <view wx:for="{
       {item}}">
                <view class="center">{
       {index}}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="scroy_x">
        <view>
          <view wx:for="{
       {arr}}" style=" width:{
       {item.length*200+2*(item.length-1)}}rpx;background: {
       {index%2==0?'#ccc':'#ff00ff'}};">
            
            <view class="flex">
              <view wx:for="{
       {item}}">
                <view class="center">{
       {index}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    
    </view>

width:\{ \{item.length\*200+2\*(item.length-1)\}\}  小盒子的宽+小盒子边的宽度=实际大盒子的宽度

### 免积分代码包下载地址 [https://download.csdn.net/download/qq\_41241504/14021882][https_download.csdn.net_download_qq_41241504_14021882] ###

### 后期为大家分享更多开放性dome ###

## 完整代码 ##

wxml

<view>
      
      <scroll-view class="scroll" scroll-x="{true}">
        <view>
          <view  wx:for="{
       {arr}}" class="bg"  style=" width:{
       {item.length*200+2*(item.length-1)}}rpx;background: {
       {index%2==0?'#ccc':'#ff00ff'}}">
            
            <view class="flex">
              <view wx:for="{
       {item}}">
                <view class="center">{
       {index}}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="scroy_x">
        <view>
          <view wx:for="{
       {arr}}" style="  width:{
       {item.length*200+2*(item.length-1)}}rpx;background: {
       {index%2==0?'#ccc':'#ff00ff'}};">
            
            <view class="flex">
              <view wx:for="{
       {item}}">
                <view class="center">{
       {index}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    
    </view>

css

.scroll{
      width: 600rpx;
      border: 1rpx solid red;
      margin-left: 100rpx;
    }
    
    .bg2{
      background: #ff00ff;
    }
    .flex{
      display: flex;
      flex-direction: row;
    }
    .flex .center{
    width:200rpx;
    border: 1rpx solid #000;
    }
    
    .scroy_x{
      margin-top: 100rpx;
      width: 600rpx;
      border: 1rpx solid red;
      margin-left: 100rpx; 
      overflow-x: scroll;
      
    }
    .scroy_x::-webkit-scrollbar {
      display: none;
    }

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      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]
        ],
    
      },
    
      onLoad: function () {
    
      },
    
    })

[20210104154913540.gif]: https://img-blog.csdnimg.cn/20210104154913540.gif
[20210104155302623.gif]: /images/20210724/3fadfc52444247d5b448625c17912c0a.png
[20210104154836668.gif]: /images/20210724/8bf591b588f84c94858974913282d3a3.png
[https_download.csdn.net_download_qq_41241504_14021882]: https://download.csdn.net/download/qq_41241504/14021882