위 챗 애플 릿 scroll-view 좌우 미끄럼 문제 해결 방법

최근 에 자신의 애플 릿 프로젝트 를 하고 있다.전문 적 인 전단 이 아니 기 때문이다.그래서 한 걸음 한 걸음 구덩이 에 빠 졌 다.여기 서 만난 문 제 를 정리 하려 고 한다.반복 해서 구덩이 에 들 어 가 는 것 을 피하 다.
질문:
    애플 릿 페이지 레이아웃 에 scroll-view 구성 요 소 를 사 용 했 는데 가로 이동 이 효과 가 없 음 을 발 견 했 습 니 다.인터넷 에서 자 료 를 찾 아 보 니 문제 의 소 재 를 발견 했다.
내 wxml 코드

<scroll-view scroll-x="true" class="scroll" bindscrolltolower="lower" bindscroll="scroll">
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg"></image>
          </view>
          <view class="username">  </view>
        </view>
       

      </scroll-view>

wxss 코드

.enroll_view .scroll_view .scroll{
  height:160rpx;
  width:750rpx;
  overflow: hidden;
}
.user_info{
  float:left;
  margin-top:10rpx;
  height:140rpx;
  width:140rpx;
}

생각 은 간단 합 니 다.float:left 를 사용 하고 싶 습 니 다.미끄럼 이 필요 한 원 소 를 가로로 배열 합 니 다.자 료 를 찾 아 보 니 미 끄 러 져 야 할 요 소 는 float 유동 을 사용 할 수 없습니다.이 효 과 를 실현 하기 위해 서 는 display:inline-block 을 사용 해 야 합 니 다.실현 하 다.
계속 고치 기(float:left 삭제;.display:inline-block 사용 하기;서브 요소 가로 배열 효과 구현)
wxss 스타일

.user_info{
  margin-top:10rpx;
  height:140rpx;
  width:140rpx;
  display: inline-block;
}

고 친 거 야,고 친 거 야?못 쓰 는 거 야,못 쓰 는 거 야?그리고 부분 집합 요소 가 폭 을 넘 으 면 줄 이 바 뀌 기 때 문 입 니 다.
그래서 scroll-view 에 white-space 를 추가 합 니 다. nowrap;내부 요 소 를 줄 바 꾸 지 못 하 게 합 니 다.경신최종 효 과 를 실현 하 다.개 삼 아.효과 도

최종 wxss

.enroll_view .scroll_view .scroll{
  height:160rpx;
  width:750rpx;
  overflow: hidden;
  white-space: nowrap;
}
.user_info{
  margin-top:10rpx;
  height:140rpx;
  width:140rpx;
  display: inline-block;
}

맺다.
　   1.scroll-view 에서 미 끄 러 져 야 할 요 소 는 가로 배열 효 과 를 실현 하기 위해 float 부동 을 사용 할 수 없습니다.display:inline-block 을 사용 할 수 있 습 니 다.줄 내 블록 요소 로 변경 하기;
2.scroll-view 의 소 포 는 미 끄 러 지 는 요소 의 큰 상 자 를 display:flex 로 사용 합 니 다.소 용이 없다.
3.scroll-view 를 감 싸 는 큰 상 자 는 명확 한 너비 와 스타일 white-space:nowrap 이 있 습 니 다.
scroll-view 주요 속성 첨부:

총결산
위 챗 애플 릿 scroll-view 가 좌우 로 미 끄 러 지지 않 는 문제 해결 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 애플 릿 scroll-view 좌우 로 미 끄 러 지 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!