微信小程式教程之wxapp視圖容器 scroll-view-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式教程之wxapp視圖容器 scroll-view

高洛峰

Feb 14, 2017 pm 02:43 PM

這篇文章主要介紹了微信小程式教程之wxapp視圖容器scroll-view的相關資料,需要的朋友可以參考下

微信小程式教程之wwiappapp
微信小程式教程之wxapp視圖容器scroll-view
微信小程式教程之wxapp 視圖容器view

scroll-view容器view

視圖。

屬性名類型預設值說明允許橫向捲動scroll-y Booleanfalse允許縱向滾動upper-thresholdNumber50距頂部/左邊多遠時（單位Number50距底部/右邊多遠時（單位px），觸發scrolltolower 事件scroll-topNumber 設定橫向滾動條位置scroll-into-viewString 值應為某子元素，則在頂部捲動到該元素，捲動到頂部/左邊，會觸發scrolltoupper 事件7 EventHandle使用垂直滾動時，需要給予一個固定高度，透過固定高度，透過固定高度設定。範例程式碼：rrreee



			），觸發事件（單位單位」


		EventHandle
	bindscrolltolower	，Handle	bindscroll
	滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
			<view class="section"> <view class="section__title">vertical scroll</view> <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me to scroll</button> </view> </view> <view class="section section_gap"> <view class="section__title">horizontal scroll</view> <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"> <view id="green" class="scroll-view-item_H bc_green"></view> <view id="red" class="scroll-view-item_H bc_red"></view> <view id="yellow" class="scroll-view-item_H bc_yellow"></view> <view id="blue" class="scroll-view-item_H bc_blue"></view> </scroll-view> </view> 登入後複製
var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) }, tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) } }) scroll-view 登入後複製			rrreee
	rrreee