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

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

相關文章：

1. 微信小程式教程之wwiappapp

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

3. 微信小程式教程之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 = [&#39;red&#39;, &#39;yellow&#39;, &#39;blue&#39;, &#39;green&#39;, &#39;red&#39;] Page({ data: { toView: &#39;red&#39;, 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

rrreee

rrreee

！

更多微信小程式 教程之wxapp視圖容器 scroll-view相關文章請關注PHP中文網！