關於小程序 scroll-view中設置scroll-top無效 和小說圖書閱讀進度條小案例

在最近的項目有做到關於小說閱讀的進度條功能，其中用到scroll-view和slider組件，發現scroll-view中的scroll-top在設置值后無效，出現這種情況大概是以下幾種問題：

1.scroll-view的高度需要設置固定的值，比如全屏可以設置：height:100vh;

2.不可以同時設置scroll-into-view和scroll-top（scroll-left）屬性，因為scroll-into-view的優先級別比scroll-top（scroll-left）屬性高（官方文檔提及過）;

3.scroll-top（scroll-left）屬性不可以帶單位，直接設置值就可以了，如：scroll-top="50";

 

以下是小說圖書閱讀進度條案例代碼，思路為：scroll-view作為文章滾動區域，slider為顯示進度的滑動條，之間通過百分比的數“連接”，具體代碼往下：

<view>
   <scroll-view scroll-y style="height:100vh" bindscroll="articelScroll" scroll-with-animation="true" scroll-top="{{textScroll}}">
     <text>起初，對於追風箏的人這樣的命題是難以理借解，至於其中所蘊含的深意， 縱使讀罷全書亦不知所言。姑且不論所謂書名的深度和廣度，就其故事本身而言，便給了我巨大的震撼。書中開篇所言，便是一種對曾經的畏懼和被永生鎖在夢魘中的悲傷。為你千千萬萬遍， 第一次這句話的出現，便讓我震撼莫名。我不知道這句話何時說出口，至於當時的氣氛和情態也一無所知，但就這句話的內容，為，你，千，千，萬，萬，遍。其中所包含的無悔與執着，縱使天荒地老也不改的初心。 頓時，我有些嫉妒書中的“我“，相比於往往獨行客的我，那些無悔的宣言，是我從未聽到過的傳說。
     </text>
   </scroll-view>
   <view> 
      <slider bindchange="slider1change" max="200" min="0" step="5" value="{{scrollValue}}"  activeColor="#333"/>
   </view> 
</view>

var app = getApp()
Page({
  data: {
    scrollHeight:0,
    scrollValue:0,
    textScroll:1
  },
   
  slider1change:function(e){
    var value=e.detail.value;                  //獲取slider滑動的當前值
    var scrollHeight = this.data.scrollHeight; //獲取scroll-view的scroll-height值
    value=value/295*100;                       //計算出slider滑動的百分比
    var textscroll = value/100 * scrollHeight; //計算出scroll-view對應的值

    this.setData({
      textScroll: textscroll
    })
  },
 
})    

具體效果如下：

 

 

總結：以上內容供學習總結分享，有什么不對的地方或可優化的地方，歡迎各位評論指教。