微信小程序wx.pageScrollTo的替代方案

wx.pageScrollTo這個微信小程序的api功能如下：

簡而言之就是實現頁面滾動的。但是在實際應用當中顯得有些雞肋，為啥呢？使用中有明顯頁面有明顯的抖動，這無疑是極不好的用戶體驗。我用的華為6x手機。

那么怎么解決這個問題？答案是選擇利用scroll-view代替。上代碼

<scroll-view scroll-y style="height: 100%;position:absolute;" enable-back-to-top="true" bindscroll="memoryScrollTop" scroll-with-animation="true" scroll-top="{{scrollTop}}">
  <view class='wrap' style='position:absolute;'>
    <view id='general'>
      <image src='../../images/timg.jpg'></image>
      <view class='writing' wx:for="{{strategyGeneralObjArr}}" wx:key="{{index}}">
        <view class='audio-box' wx:if="{{item.myAudio.length}}">
          <view class='audio-box-logo' bindtap='playOrStopAudio'>
            <view class='play-icon-box {{audioPlayStatus?"play-icon":"playing-icon"}}'>

            </view>
            <audio id='myAudio' bindended="selfEndedPlay" bindtimeupdate="updatePlayTime" src='{{item.myAudio[0]}}' style='display:none;'></audio>
          </view>
          <view class='audio-box-progress'>
            <view class='line-default'>
            </view>
            <view class='line-play-box'>
              <view class='line-play' style='width:{{playPercenter}}'>
              </view>
              <view class='play-circle'></view>
            </view>

            <view class='play-ing'>

              <text>{{updateTime}}</text>
              <text>{{audioduration}}</text>
            </view>
          </view>
        </view>
        <view class='audio-title'>
          {{item.title}}
        </view>
        <view class='audio-intro'>
          {{item.desc}}
        </view>
        <view class='audio-tags skind'>
          <block wx:for="{{item.label}}" wx:for-item="sonItem" wx:key="{{index}}">
            <text>{{sonItem.name}}</text>
          </block>
        </view>
        <view class='audio-address'>
          <view class='audio-address-name'>
            {{item.locationInfo.address}}
          </view>
          <view class='audio-address-distance'>
            {{item.distance}}km
          </view>
        </view>
      </view>

    </view>
    <view id='intros'>
      <block wx:for="{{strategyContentObjArr}}" wx:key="{{index}}">
        <block wx:if="{{item.type==6}}">
          <view class='trip-line  unitItem {{"step"+index}}'>
            <view class='titleLine mainTitle'>
              <text class='left-line'></text>
              <text class='titleLine-title'>{{item.data}}</text>
              <text class='right-line'></text>
            </view>
          </view>
        </block>
        <block wx:if="{{item.type==7}}">
          <view class='sonTitle'>
            <text class='left-spot'></text>
            <text class='sonTitle-title'>{{item.data}}</text>
            <text class='right-spot'></text>
          </view>
        </block>
        <block wx:if="{{item.type==1}}">
          <view class='trip-line-instruct intro-writing'>
            {{item.data}}
          </view>
        </block>
        <block wx:if="{{item.type==2}}">
          <view class='image'>
            <image src='{{item.data}}' class='strategy-img'></image>
          </view>
        </block>
        <block wx:if="{{item.type==4}}">
          <view class='trip-mode-video video'>
            <video wx:if='{{playOpenCode}}' id='myVideo' bindended="playSelfOver" bindpause="stopVideo" bindtimeupdate="memoryTime" src="{{item.data}}">

            </video>
            <view class='trip-mode-video-cover' wx:if='{{!playOpenCode}}'>
              <image src='../../images/timg.jpg' class='cover'></image>
              <image bindtap='playVideo' src='../../images/play.png' class='tip'></image>
            </view>
          </view>
        </block>
      </block>
    </view>
    <view class='blank'></view>
  </view>
</scroll-view>

注意上述代碼，因為含有很多變量，所以復制之后不保證管用。

注意上述scroll-view還有一層view這一層view是內容的二級父元素，而scroll-view是最頂級父元素，並且兩者都需要使用絕對定位，還有scroll-view必須有一個固定高度。

這樣就可以通過動態改變scroll-top="{{scrollTop}}" 來改變指定的高度了。

關於上述這種設置，以前接觸並使用過h5移動端的滾動插件，比如BetterScroll 還有iscroll，在設置上面和上述一致。想到這點在看微信小程序或者里面也有類似的底層吧。