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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

wx.pageScrollTo这个微信小程序的api功能如下：

简而言之就是实现页面滚动的。但是在实际应用当中显得有些鸡肋，为啥呢？使用中有明显页面有明显的抖动，这无疑是极不好的用户体验。我用的华为6x手机。

那么怎么解决这个问题？答案是选择利用scroll-view代替。上代码

 1 <scroll-view scroll-y style="height: 100%;position:absolute;" enable-back-to-top="true" bindscroll="memoryScrollTop" scroll-with-animation="true" scroll-top="{{scrollTop}}">
 2   <view class='wrap' style='position:absolute;'>
 3     <view id='general'>
 4       <image src='../../images/timg.jpg'></image>
 5       <view class='writing' wx:for="{{strategyGeneralObjArr}}" wx:key="{{index}}">
 6         <view class='audio-box' wx:if="{{item.myAudio.length}}">
 7           <view class='audio-box-logo' bindtap='playOrStopAudio'>
 8             <view class='play-icon-box {{audioPlayStatus?"play-icon":"playing-icon"}}'>
 9 
10             </view>
11             <audio id='myAudio' bindended="selfEndedPlay" bindtimeupdate="updatePlayTime" src='{{item.myAudio[0]}}' style='display:none;'></audio>
12           </view>
13           <view class='audio-box-progress'>
14             <view class='line-default'>
15             </view>
16             <view class='line-play-box'>
17               <view class='line-play' style='width:{{playPercenter}}'>
18               </view>
19               <view class='play-circle'></view>
20             </view>
21 
22             <view class='play-ing'>
23 
24               <text>{{updateTime}}</text>
25               <text>{{audioduration}}</text>
26             </view>
27           </view>
28         </view>
29         <view class='audio-title'>
30           {{item.title}}
31         </view>
32         <view class='audio-intro'>
33           {{item.desc}}
34         </view>
35         <view class='audio-tags skind'>
36           <block wx:for="{{item.label}}" wx:for-item="sonItem" wx:key="{{index}}">
37             <text>{{sonItem.name}}</text>
38           </block>
39         </view>
40         <view class='audio-address'>
41           <view class='audio-address-name'>
42             {{item.locationInfo.address}}
43           </view>
44           <view class='audio-address-distance'>
45             {{item.distance}}km
46           </view>
47         </view>
48       </view>
49 
50     </view>
51     <view id='intros'>
52       <block wx:for="{{strategyContentObjArr}}" wx:key="{{index}}">
53         <block wx:if="{{item.type==6}}">
54           <view class='trip-line  unitItem {{"step"+index}}'>
55             <view class='titleLine mainTitle'>
56               <text class='left-line'></text>
57               <text class='titleLine-title'>{{item.data}}</text>
58               <text class='right-line'></text>
59             </view>
60           </view>
61         </block>
62         <block wx:if="{{item.type==7}}">
63           <view class='sonTitle'>
64             <text class='left-spot'></text>
65             <text class='sonTitle-title'>{{item.data}}</text>
66             <text class='right-spot'></text>
67           </view>
68         </block>
69         <block wx:if="{{item.type==1}}">
70           <view class='trip-line-instruct intro-writing'>
71             {{item.data}}
72           </view>
73         </block>
74         <block wx:if="{{item.type==2}}">
75           <view class='image'>
76             <image src='{{item.data}}' class='strategy-img'></image>
77           </view>
78         </block>
79         <block wx:if="{{item.type==4}}">
80           <view class='trip-mode-video video'>
81             <video wx:if='{{playOpenCode}}' id='myVideo' bindended="playSelfOver" bindpause="stopVideo" bindtimeupdate="memoryTime" src="{{item.data}}">
82 
83             </video>
84             <view class='trip-mode-video-cover' wx:if='{{!playOpenCode}}'>
85               <image src='../../images/timg.jpg' class='cover'></image>
86               <image bindtap='playVideo' src='../../images/play.png' class='tip'></image>
87             </view>
88           </view>
89         </block>
90       </block>
91     </view>
92     <view class='blank'></view>
93   </view>
94 </scroll-view>