Based rolling assembly scrollview
scrollview property
| Property name | effect | Parameter Value |
|---|---|---|
| scroll-x | Settings allow horizontal scrolling | true / false Default is false |
| scroll-y | Settings allow vertical scroll | true / false Default is false |
| scroll-top | The longitudinal position of the slider is provided | number |
| scroll-left | The position of the horizontal scroll bar is provided | number |
| scroll-into-view | Scroll to set the controls, the premise is set to give the scroll inside the control ID | Transfer control ID |
| enable-back-to-top | iOS click on the top status bar, double-click the title bar when Andrews, scroll bars Top, only the vertical support | true / false Default is false |
| scroll-with-animation | Use animated transitions when setting the position of the scrollbar | true / false Default is false |
| bindscrolltoupper | Scroll to the top / left trigger event scrolltoupper | |
| bindscrolltolower | Rolling in the end unit / right trigger event scrolltolower | |
| bindscroll | Scroll trigger, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
Use scrollview property
First, the effect of FIG.
Renderings .gif
Two, XXX.WXML layout
<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> I was there to explain the main properties of scrollview, other readers can not read does not matter, I will continue to explain later,
- First look scroll-x / y attributes, two ScrollView above comparison, we can see the difference, a is a transverse vertical, can be understood in conjunction with FIG effect of this property
- This is generally bind to bind an event that begins when the user triggers an event will execute the corresponding code, the specific code execution logic will write on xxx.js
- scroll-into-view is provided to the scroll id, toView ID is used to pass rolling
- Because scroll-left rolling example is rampant, so use the scroll-left property, if it is to use the vertical scroll-Top properties, the equal sign are passed by value, if it is horizontal scrolling distance 100 represents 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
上面三个属性在布局的时候一定会用到的，今天就先说这几个属性，请初学者一定要记住并学会运用到项目中