기반 롤링 조립있는 ScrollView
있는 ScrollView 특성
| 속성 이름 | 효과 | 매개 변수 값 |
|---|---|---|
| 스크롤 X | 설정 수평 스크롤을 허용 | 참 / 거짓 기본값은 false입니다 |
| 스크롤 Y | 설정 세로 스크롤을 허용 | 참 / 거짓 기본값은 false입니다 |
| 스크롤 탑 | 슬라이더의 길이 방향의 위치가 제공된다 | 번호 |
| - 왼쪽으로 스크롤 | 수평 스크롤 바의 위치가 제공된다 | 번호 |
| 스크롤로 시청 | 컨트롤을 설정하기 위해 스크롤 전제는 제어 ID 내부 스크롤을 수득 설정된 | 전송 제어 ID |
| 수 백 - 투 - 맨 | 앤드류스는, 만 수직 지지대 상단 막대를 스크롤 할 때 아이폰 OS가 정상 상태 표시 줄을 클릭, 제목 표시 줄을 두 번 클릭 | 참 / 거짓 기본값은 false입니다 |
| 스크롤과 애니메이션 | 스크롤바의 위치를 설정할 때 애니메이션 전환을 사용하여 | 참 / 거짓 기본값은 false입니다 |
| bindscrolltoupper | 상단 / 왼쪽 트리거 이벤트 scrolltoupper로 스크롤 | |
| bindscrolltolower | 최종 단위로 롤링 / 우 트리거 이벤트 scrolltolower | |
| bindscroll | 스크롤 트리거에서는 event.detail = {scrollLeft에, scrollTop, scrollHeight, scrollWidth,위한 deltaX, deltaY에} |
있는 ScrollView 속성을 사용하여
먼저,도 10의 효과.
.gif 중요 렌더링
두, XXX.WXML 레이아웃
<view>scroll-view 横向</view>
<button class='button' type='primary' size='mini' bindtap='scrollToRed'>点我滚动到绿色</button> <button class='button' type='primary' size='mini' bindtap='scrollTo100'>点我滚动100rpx距离</button> <scroll-view scroll-x="true" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-left="{{scrollTop}}"> <view class="scroll-x"> <view wx:for-items="{{scrolls}}" wx:key="name"> <view id="{{item.tag}}" class="{{item.tag}}">{{item.name}}</view> </view> </view> </scroll-view> <view>scroll-view 纵向</view> <scroll-view scroll-y="true" style="height: 500rpx;"> <view class="scroll-y" > <view wx:for-items="{{scrolls}}" wx:key="name"> <view class="{{item.tag}}">{{item.name}}</view> </view> </view> </scroll-view> 내가 나중에 설명하는 것, 다른 독자는 중요하지 않습니다 읽을 수있는 ScrollView의 주요 특성을 설명 할 수 있었다
- 처음 두있는 ScrollView 비교 스크롤 상기 X / Y의 속성을 보면, 우리는 그 차이를 볼 수 있고, A는 가로 세로이며,이 속성의 효과도 함께 이해 될 수있다
- 사용자가 특정 코드 실행 로직 xxx.js에서 해당 코드를 실행하는 이벤트 트리거를 기록 할 때 일반적으로 개시 이벤트를 결합하는 결합되고
- 스크롤로 - 뷰 스크롤 ID에 제공되고,이 롤링 toView ID를 전달하는 데 사용
- 스크롤 왼쪽 압연 예 만연하므로 경우 수직 스크롤 정상 특성을 사용하는 스크롤 왼쪽 속성을 사용하고 있으므로이 경우, 등호 수평 이동 거리 (100) (100)를 나타내고, 값으로 전달된다
- 使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。
三、XXX.JS逻辑代码
Page({
data: {
toView: 'yellow',
scrollLeft: 0, //滚动的数组 scrolls: [ { name: '黄色', tag: 'yellow', }, { name: '绿色', tag: 'green', }, { name: '红色', tag: 'red', }, { name: '黄色', tag: 'yellow', }, { name: '绿色', tag: 'green', }, { name: '红色', tag: 'red', }, ], }, scrollToRed:function(e) { this.setData({ toView: 'green' }) }, scrollTo100: function (e) { this.setData({ scrollLeft: 100 }) }, upper: function (e) { console.log('滚动到顶部') }, lower: function (e) { console.log('滚动到底部') }, scroll: function (e) { console.log(e) }, }) js代码中需要讲解的地方
- data中的数据是给wxml控件赋值的
- toView设置跳转到那个控件ID上
- scrollLeft设置横向滚动的距离
- 所有的function方法都是执行触发事件所需要的逻辑
- this.setData({ })用于更新数据，每次更新都会刷新界面
-
我把滚动到顶部和底部的触发的事件用日志输出出来，目的是让读者看一下确实执行了相应的事件，我为了让读者看清楚，我注释掉滚动的输出日志，读者可以打开，会输出一系列滚动的位置
输出日志.png
四、XXX.WXSS样式
.button
{
margin: 20rpx;
}
.scroll-x {
display: flex; flex-direction: row; } .scroll-y { display: flex; flex-direction: column; } .green { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: green; } .red { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: red; } .yellow { display: flex; align-items: center; width: 400rpx; height: 400rpx; background: yellow; } 样式这边就先教大家几个常用的样式
- display属性
- none:此元素不会被显示
- block：两个元素自动换行
- inline：两个元素靠在一起
- inherit：继承父类
- flex：多栏多列
- flex-direction属性
- column 垂直分布
- row 水平分布
- align-items 设置item对齐方式
- center
- left
- right
上面三个属性在布局的时候一定会用到的，今天就先说这几个属性，请初学者一定要记住并学会运用到项目中