好久沒更新小程序的系列文章了瓦侮，之前有出過小程序的實戰(zhàn)异旧，但是意述，最近代碼君發(fā)現(xiàn)，代碼集中營的好多讀者都是小程序的初學者吮蛹，所以我覺得有必要出一些基礎(chǔ)的教程給初學者學習和使用荤崇，因此代碼君決定每天講解小程序的一個基礎(chǔ)知識點，帶著初學者一起學習小程序匹涮，如果覺得簡單的讀者可以去看代碼君的小程序?qū)崙?zhàn)篇天试，好，言歸正傳然低，今天我就先講一個基礎(chǔ)的滾動組件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的屬性无畔，其他的讀者看不懂沒關(guān)系，后面我會陸續(xù)講解的吠冤，

1. 首先看 scroll-x/y 屬性浑彰，對比上面兩個scrollview，就可以看出差別拯辙，一個是橫向一個縱向郭变，結(jié)合效果圖就可以理解這個屬性了
2. bind一般以這個開頭的就是綁定某個事件，當用戶觸發(fā)某個事件的時候會執(zhí)行相應(yīng)的代碼涯保，具體的代碼執(zhí)行邏輯要寫在xxx.js上
3. scroll-into-view 設(shè)置滾動到那個id诉濒，toView是用來傳遞滾動的ID
4. scroll-left 因為例子中是橫行滾動，所以要用scroll-left屬性夕春，如果是縱向要用scroll-Top屬性未荒，等號后面是傳遞的值，如果是100代表橫向滾動100的距離
5. 使用豎向滾動時及志，需要給<scroll-view/>一個固定高度茄猫，通過 WXSS 設(shè)置 height狈蚤。

三、XXX.JS邏輯代碼

Page({
  data: {
    toView: 'yellow',
    scrollLeft: 0,
    //滾動的數(shù)組
    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中的數(shù)據(jù)是給wxml控件賦值的
2. toView設(shè)置跳轉(zhuǎn)到那個控件ID上
3. scrollLeft設(shè)置橫向滾動的距離
4. 所有的function方法都是執(zhí)行觸發(fā)事件所需要的邏輯
5. this.setData({ })用于更新數(shù)據(jù)划纽，每次更新都會刷新界面

6. 我把滾動到頂部和底部的觸發(fā)的事件用日志輸出出來脆侮，目的是讓讀者看一下確實執(zhí)行了相應(yīng)的事件，我為了讓讀者看清楚勇劣，我注釋掉滾動的輸出日志靖避，讀者可以打開，會輸出一系列滾動的位置

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

樣式這邊就先教大家?guī)讉€常用的樣式

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

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

總結(jié)

這是小程序基礎(chǔ)教程的第一篇命咐，如果真心想學習小程序的讀者篡九，可以跟著代碼君，每天學習一點點醋奠，代碼君盡量保證每天出一篇小程序教程榛臼，讀者可以利用坐地鐵，坐公交的時間看一看窜司，日積月累沛善，相信以后大家都是小程序大神

相關(guān)文章推薦：微信小程序?qū)崙?zhàn)篇-購物車

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

書名：【小程序+巧應(yīng)用-微信小程序開發(fā)實戰(zhàn)】 下載鏈接