這邊博客主要是對微信小程序文檔的的使用心得

官網地址

demo效果

?

一些屬性

?

scroll-top 和屬性,設置豎向滾動條的位置,就是第一次進來的時候,還沒有滑動的時候view的位置

假如不設置默認在第一位置,如果想顯示中間的或者其他的位置,就可以使用此屬性

scroll-into-view 這個就是可以滾動到指定item的地方

其他的屬性就不用說了,這2個是自己看文檔第一次不清楚的地方,

?

demo參考

<!--垂直滾動，這里必須設置高度-->

<text bindtap='click'>垂直方向</text>

<scroll-view scroll-y="true" style="height: 300px" scroll-top="30px"

bindscrolltoupper="upper"

bindscrolltolower="lower"

scroll-into-view="{{toView}}"

scroll-top="{{scrollTop}}"

bindscroll="scroll">

<view id='test' class="item"></view>

<view id='test1' class="item1"></view>

<view id='test2' class="item2"></view>

<view id='test3' class="item3"></view>

<view id='test4' class="item4"></view>

<view id='test5' class="item5"></view>

</scroll-view>

<!--水平滾動-->

<text>水平方向</text>

<scroll-view scroll-x="true" style=" white-space: nowrap">

<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a2.jpg?raw=true' class='img1'></image>

?

<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a1.jpg?raw=true' class='img1'></image>

?

<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/a3.jpg?raw=true' class='img1'></image>

?

<image src='https://github.com/leon5458/my_use_image/blob/master/my_use_image/1.jpg?raw=true' class='img1'></image>

?

</scroll-view>

?

注意垂直方向的時候高度記得寫一個固定值,不然一些屬性無法是會用,,,

?

?

注意

Bug & Tip

1. tip: 請勿在?scroll-view?中使用?textarea、map、canvas、video?組件
2. tip:?scroll-into-view?的優先級高于?scroll-top
3. tip: 在滾動?scroll-view?時會阻止頁面回彈，所以在?scroll-view?中滾動，是無法觸發?onPullDownRefresh
4. tip: 若要使用下拉刷新，請使用頁面的滾動，而不是?scroll-view?，這樣也能通過點擊頂部狀態欄回到頁面頂部

給出的demo吧 雖然麻煩了點

demo地址如果幫助了您,希望給一個star

?

總結

以上是生活随笔為你收集整理的微信小程序scroll-view的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。