小程序滾動組件scrollview

好久沒更新小程序的系列文章了，之前有出過小程序的實戰，但是，最近代碼君發現，代碼集中營的好多讀者都是小程序的初學者，所以我覺得有必要出一些基礎的教程給初學者學習和使用，因此代碼君決定每天講解小程序的一個基礎知識點，帶著初學者一起學習小程序，如果覺得簡單的讀者可以去看代碼君的小程序實戰篇，好，言歸正傳，今天我就先講一個基礎的滾動組件scrollview

屬性名作用參數值scroll-x設置是否允許橫向滾動true/false  默認是falsescroll-y設置是否允許縱向滾動true/false  默認是falsescroll-top設置縱向滾動條的位置numberscroll-left設置橫向滾動條的位置numberscroll-into-view設置滾動到那個控制項，前提要給scroll裡面設置控制項ID傳控制項IDenable-back-to-topiOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向true/false  默認是falsescroll-with-animation在設置滾動條位置時使用動畫過渡true/false  默認是falsebindscrolltoupper滾動到頂部/左邊，會觸發 scrolltoupper 事件
bindscrolltolower滾動到底部/右邊，會觸發 scrolltolower 事件
bindscroll滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

一、效果圖

二、XXX.WXML布局

這裡面要我主要講解scrollview的屬性，其他的讀者看不懂沒關係，後面我會陸續講解的，

首先看 scroll-x/y 屬性，對比上面兩個scrollview，就可以看出差別，一個是橫向一個縱向，結合效果圖就可以理解這個屬性了

bind一般以這個開頭的就是綁定某個事件，當用戶觸發某個事件的時候會執行相應的代碼，具體的代碼執行邏輯要寫在xxx.js上

scroll-into-view 設置滾動到那個id，toView是用來傳遞滾動的ID

scroll-left 因為例子中是橫行滾動，所以要用scroll-left屬性，如果是縱向要用scroll-Top屬性，等號後面是傳遞的值，如果是100代表橫向滾動100的距離

使用豎向滾動時，需要給<scroll-view/>一個固定高度，通過 WXSS 設置 height。

三、XXX.JS邏輯代碼

js代碼中需要講解的地方

data中的數據是給wxml控制項賦值的

toView設置跳轉到那個控制項ID上

scrollLeft設置橫向滾動的距離

所有的function方法都是執行觸發事件所需要的邏輯

this.setData({ })用於更新數據，每次更新都會刷新界面

我把滾動到頂部和底部的觸發的事件用日誌輸出出來，目的是讓讀者看一下確實執行了相應的事件，我為了讓讀者看清楚，我注釋掉滾動的輸出日誌，讀者可以打開，會輸出一系列滾動的位置

四、XXX.WXSS樣式

樣式這邊就先教大家幾個常用的樣式

display屬性

none:此元素不會被顯示

block：兩個元素自動換行

inline：兩個元素靠在一起

inherit：繼承父類

flex：多欄多列

flex-direction屬性

align-items 設置item對齊方式

上面三個屬性在布局的時候一定會用到的，今天就先說這幾個屬性，請初學者一定要記住並學會運用到項目中

這是小程序基礎教程的第一篇，如果真心想學習小程序的讀者，可以跟著代碼君，每天學習一點點，代碼君儘量保證每天出一篇小程序教程，讀者可以利用坐地鐵，坐公交的時間看一看，日積月累，相信以後大家都是小程序大神

如果覺得不錯，歡迎點讚轉發