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

scrollview屬性

scrollview屬性的使用

一、效果圖

效果圖.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的屬性，其他的讀者看不懂沒關系，后面我會陸續講解的，

1. 首先看 scroll-x/y 屬性，對比上面兩個scrollview，就可以看出差別，一個是橫向一個縱向，結合效果圖就可以理解這個屬性了
2. bind一般以這個開頭的就是綁定某個事件，當用戶觸發某個事件的時候會執行相應的代碼，具體的代碼執行邏輯要寫在xxx.js上
3. scroll-into-view 設置滾動到那個id，toView是用來傳遞滾動的ID
4. scroll-left 因為例子中是橫行滾動，所以要用scroll-left屬性，如果是縱向要用scroll-Top屬性，等號后面是傳遞的值，如果是100代表橫向滾動100的距離
5. 使用豎向滾動時，需要給<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代碼中需要講解的地方

1. data中的數據是給wxml控件賦值的
2. toView設置跳轉到那個控件ID上
3. scrollLeft設置橫向滾動的距離
4. 所有的function方法都是執行觸發事件所需要的邏輯
5. this.setData({ })用于更新數據，每次更新都會刷新界面

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

   
   
   輸出日志.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;
}

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

1. display屬性
   • none:此元素不會被顯示
   • block：兩個元素自動換行
   • inline：兩個元素靠在一起
   • inherit：繼承父類
   • flex：多欄多列
2. flex-direction屬性
   • column 垂直分布
   • row 水平分布
3. align-items 設置item對齊方式
   • center
   • left
   • right

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

總結

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

相關文章推薦：微信小程序實戰篇-購物車

推薦一本好書，適合新手小白

書名：【小程序+巧應用-微信小程序開發實戰】 下載鏈接