어떻게 위 챗 애플 릿 에서 골조 스크린 을 사용 합 니까?

본 고 는 위 챗 애플 릿 에서 골조 스크린 을 사용 하여 여러분 에 게 공유 하 는 것 을 소 개 했 습 니 다.구체 적 으로 다음 과 같 습 니 다.
선행 효과 도
​
골조 스크린 은 주로 위 치 를 차지 하 는 역할 을 하고 사용자 에 게 이 지역 에 내용 이 있 고 일정한 심리 적 준비 가 있다 는 것 을 설명 한다.
대화 배경:방금 출시 된 작은 프로그램 입 니 다.올 라 가 는 물건 이 점점 많아 지면 서 위 챗 애플 릿 의 로드 가 점점 느 려 지고 한 동안 의 흰색 화면(약 2-3s)이 나타 납 니 다.이것 은 사용자 체험 에 있어 특히 우호 적 이지 않 습 니 다.그래서 인터넷 에서 이 분야 의 자 료 를 찾기 시 작 했 고 골조 스크린 은 주로 두 가지 방안 으로 나 뉘 었 다.다음은 이 두 가지 방안 을 살 펴 보 자.
1.골조 스크린 을 사용 해 야 하 는 모든 페이지 에 정적 페이지 를 맞 춥 니 다.이런 방법 은 단점 이 뚜렷 하기 때문에 각 페이지 를 위해 단독으로 맞 춤 형 제작 을 해 야 한다.레이아웃 이 수정 되면 두 페이지 를 동시에 수정 해 야 하기 때문에 유지 보수 비용 을 증가 시 켰 다.그러나 이 는 특히 긴 목록 에 적용 되 며 사용자 가 볼 수 있 는 부분 만 하면 어느 정도 응답 속 도 를 높 일 수 있다.
2.도구 렌 더 링 페이지 를 이용 하여 지정 한 DOM 노드 와 대응 하 는 스타일 을 가 져 오고 회색 블록 을 생 성하 여 원래 의 스타일 구조 에 덮어 골조 화면 을 실현 합 니 다.이런 방식 은 간단 하고 유지 하기 쉬 워 서 개인 적 으로 긴 목록 페이지 에 적합 하지 않다 고 느낀다https://github.com/jayZOU/skeleton이 골조 스크린 구성 요 소 는 가 볍 고 편리 하 며 빠 르 며 안에 튜 토리 얼 이 있어 서 강력 추천 합 니 다.
어떤 방안 을 사용 할 지 는 자신의 프로젝트 상황 에 따라 선택해 야 한다.내 가 사용 한 것 은 첫 번 째 이다.왜냐하면 이 페이지 에 불 러 온 DOM 노드 가 너무 많 기 때문이다.데 이 터 를 가 져 온 후 페이지 로 렌 더 링 할 때 까지 골조 스크린 이 버퍼 링 되 어 효과 가 좋 습 니 다.
실현 방법:
1.기 존 페이지 의 구조 에 따라 정적 페이지 를 다시 쓰 고 그림,문 자 를 표시 하 는 곳 을 회색 배경 색 의 블록 으로 교체 합 니 다.

<!--    -->

<view class="sort" wx:if="{{showSkeleton}}">

<scroll-view scroll-y="true" class="sortlist" style="height:{{contentHeight-170}}rpx">

<view class="sort-l" >

<view class="sort-lgj"></view>

</view>

<view class="sort-l" >

<view class="sort-lgj"></view>

</view>

<view class="sort-l" >

<view class="sort-lgj"></view>

</view>

<view class="sort-l" >

<view class="sort-lgj"></view>

</view>

<view class="sort-l" >

<view class="sort-lgj"></view>

</view>

<view class="sort-l" >

<view class="sort-lgj"></view>

</view>

</scroll-view>

</view >

<view class="sort" wx:else>

          

</view >

2.하나의 변 수 를 사용 하여 골조 스크린 의 표시 나 숨 김 을 제어 합 니 다.

onLoad: function(options) {

  var that = this

  wx.request({

    url:'xxxx', //    

    data: { //        

      xxxx: xxxx

    },

    header: { //   

    "Content-Type": "applciation/json"

    },

    method: "GET",

    success: function(res) {

      that.setData({

        goodslist: data

      })

      that.setData({

        //      

        showSkeleton: false

      })

    },

    fail: function(err) {    

    }

  })
}

요약:데이터 가 많은 페이지 는 골조 스크린 을 사용 하면 사용자 체험 을 크게 향상 시 킬 수 있다.위 에서 언급 한 골조 스크린 구성 요소 도 매우 사용 하기 좋아 서 몇 분 이면 손 에 넣 을 수 있다.
골조 스크린 을 처음 접 했 는데 이해 가 안 되 는 부분 이 있 으 면 많이 지적 해 주세요.
위 챗 애플 릿 에서 골조 스크린 을 어떻게 사용 하 는 지 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 애플 릿 이 골조 스크린 을 사용 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!