小程序 局部頁面 自定義滾動條

 

基礎的滾動組件scrollview

scrollview屬性

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

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

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