解決小程序scroll-into-view無效果的問題

scroll-view的scroll-into-view無效,在支付寶小程序裏scroll-into-view隨着點擊事件而改變,但是就是不會滾動,代碼如下:
<scroll-view scroll-y="true" style="height:100%;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true" enable-back-to-top="true">
查了好久,終於找到一篇有用的文章,是style中的height設置了100%導致的。由於微信小程序是用mpvue寫的,height設置了100%還能滾動,所以一直沒想到原生的會有不一樣的效果。

以下內容轉自http://blog.sina.com.cn/s/blo...

實際上,這裏需要一些注意的地方:
scroll-view默認跟view是一樣的,只是一個view容器,默認會隨着內容大小自動改變大小。只有當你的scroll-view的大小,小於其內的內容時,纔有機會實現真正的滾動。所以,你必須設置固定的寬高,如果不設置,那與滾動相關的功能都不會有。看似可以滾動,那個不是scroll-view的,而是window本身的滾動。造成了錯覺。

既然如此,很多人設置了100%的高度,依然不行,這裏必須設置固定的高度如400rpx之類的。不支持%單位。
不信你試試!

還有一些其他問題會導致scroll-into-view失效的情況,比如:

下面是顯示list和滾動到list同時setdata,不會成功

this.setData({ showtype:
1, catlistHidden:true,toView: "defaultlist"});

你必須改成,先顯示,然後再滾動,分兩次折行setData

this.setData({ showtype:
1, catlistHidden:true});

this.setData({ toView:
"defaultlist"});//要先顯示才能scroll-into,否則不會發生

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章