微信小程序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='{{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，在设置上面和上述一致。想到这点在看微信小程序或者里面也有类似的底层吧。