關於小程序 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爲顯示進度的滑動條，之間經過百分比的數「鏈接」，具體代碼往下：

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

具體效果以下：

 

 

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