위 챗 애플 릿 의 좌우 레이아웃 구현 코드
개술
위 챗 애플 리 케 이 션 개발 에서 좌우 바(왼쪽 에 분 류 를 표시 하고 오른쪽 에 내 역 을 표시 한 다음 에 연동)는 흔히 볼 수 있 는 레이아웃 방식 으로 주로 주문,청량음료 점,배달,그리고 다른 유사 한 쇼핑 몰 에 사용 된다.
레이아웃 분석
레이아웃 분석 도 는 다음 과 같다.
지식 에 관련되다
4.567917.scroll-view 는 보기 영역 을 스크롤 할 수 있 습 니 다.세로 스크롤 을 사용 할 때 는
예시 효과 도 는 다음 과 같다.
핵심 코드
WXML 코드 는 다음 과 같 습 니 다:
<!--pages/show/show.wxml-->
<view class="show-info">
<scroll-view class='left' scroll-y>
<view class="jy-item" wx:for="{{jytype}}" wx:key="id" hover-class="jy-item-hover" wx:for-item="item" bindtap='showItem' data-id="{{item.id}}">
<image src="{{item.url}}"></image>
<label>{{item.name}}</label>
</view>
</scroll-view>
<scroll-view class='right' scroll-y scroll-into-view="{{viewId}}">
<view class="jy-detail" wx:for="{{jydetail}}" wx:key="id" id= "D-{{detail.typeid}}-{{detail.id}}" wx:for-item="detail" bindtap='showDetail' data-id="{{detail.id}}">
<image src="{{detail.url}}"></image>
<label>{{detail.name}}</label>
</view>
</scroll-view>
</view>
JS 코드 는 다음 과 같 습 니 다.
showItem: function(event) {
var that=this;
var viewId = "D-" + event.currentTarget.dataset.id + "-" + event.currentTarget.dataset.id+"00";
that.setData({
viewId: viewId
});
console.log(viewId);
},
WXSS 레이아웃 은 다음 과 같 습 니 다.여 기 는 주로 상자 레이아웃(display:flex;flex-direction: row;):
.show-info {
height: 100%;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 10rpx 0;
box-sizing: border-box;
}
.left {
width: 30%;
height: 100%;
display: flex;
flex-direction: column;
margin:2px;
}
.jy-item-hover{
border: none;
}
.right {
width: 70%;
height: 1200rpx;
display: flex;
flex-direction: column;
margin: 2px;
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.