搜尋

首頁 >微信小程式 >小程式開發 >微信小程式 教程之wxapp視圖容器 scroll-view

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

高洛峰
高洛峰原創
2017-02-14 14:43:591690瀏覽

這篇文章主要介紹了微信小程式教程之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 ，Handlebindscroll
  滾動時觸發，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中文網！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：微信小程式 教程之wxapp視圖容器 swiper下一篇：微信小程式 教程之wxapp視圖容器 swiper

相關文章

看更多