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