uni-app中使用scroll-view滚到底部时多次触发scrolltolower

顺我者未必活 發表於 2019-12-8 20:39:00

uni-app中使用scroll-view滚到底部时多次触发scrolltolower

<h2>一、前言、scroll-view基本属性：</h2>
<h3>前言：</h3>
<p>　　前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示（在我这个页面中同时使用了三个scroll-view做数据展示），因为这几个展示的内容的数据都比较的多，因此为了页面的数据加载顺畅决定使用上拉加载（简单的说就是数据分页显示）。</p>
<p>页面组成如下图所示：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1336199/201912/1336199-20191208200910331-96250305.png" alt=""></p>
<h3>scroll-view属性说明：</h3>
<table style="height: 408px; width: 1241px">
<thead>
<tr><th>属性名</th><th>类型</th><th>默认值</th><th>说明</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>scroll-x</td>
<td>Boolean</td>
<td>false</td>
<td>允许横向滚动</td>
<td> </td>
</tr>
<tr>
<td>scroll-y</td>
<td>Boolean</td>
<td>false</td>
<td>允许纵向滚动</td>
<td> </td>
</tr>
<tr>
<td>upper-threshold</td>
<td>Number</td>
<td>50</td>
<td>距顶部/左边多远时（单位px），触发 scrolltoupper 事件</td>
<td> </td>
</tr>
<tr>
<td>lower-threshold</td>
<td>Number</td>
<td>50</td>
<td>距底部/右边多远时（单位px），触发 scrolltolower 事件</td>
<td> </td>
</tr>
<tr>
<td>scroll-top</td>
<td>Number</td>
<td> </td>
<td>设置竖向滚动条位置</td>
<td> </td>
</tr>
<tr>
<td>scroll-left</td>
<td>Number</td>
<td> </td>
<td>设置横向滚动条位置</td>
<td> </td>
</tr>
<tr>
<td>scroll-into-view</td>
<td>String</td>
<td> </td>
<td>值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</td>
<td> </td>
</tr>
<tr>
<td>scroll-with-animation</td>
<td>Boolean</td>
<td>false</td>
<td>在设置滚动条位置时使用动画过渡</td>
<td> </td>
</tr>
<tr>
<td>enable-back-to-top</td>
<td>Boolean</td>
<td>false</td>
<td>iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td>
<td>微信小程序</td>
</tr>
<tr>
<td>show-scrollbar</td>
<td>Boolean</td>
<td>false</td>
<td>控制是否出现滚动条</td>
<td>App-nvue 2.1.5+</td>
</tr>
<tr>
<td>@scrolltoupper</td>
<td>EventHandle</td>
<td> </td>
<td>滚动到顶部/左边，会触发 scrolltoupper 事件</td>
<td> </td>
</tr>
<tr>
<td>@scrolltolower</td>
<td>EventHandle</td>
<td> </td>
<td>滚动到底部/右边，会触发 scrolltolower 事件</td>
<td> </td>
</tr>
<tr>
<td>@scroll</td>
<td>EventHandle</td>
<td> </td>
<td>滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td>
<td> </td>
</tr>
</tbody>
</table>
<p> </p>
<h2>二、问题：</h2>
<p>       第一个考虑的上拉加载事件：onReachBottom页面滚动到底部的事件，常用于上拉加载下一页数据。但是如使用scroll-view导致页面级没有滚动，则触底事件不会被触发，所以这里存在的问题是有时候无法触发onReachBottom。</p>
<p>　　最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件，虽然这个事件确实能够实现上拉加载数据分页的功能，但是这个是事件存在两个问题。第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件，第二个问题是当页面由第一个scroll-view（该页面已经到了的最底部了）切换到第二个scroll-view时会自动滚动到页面的最底部（即第二个页面默认已经到了最底部）。</p>
<p>数据加载多次如下图所示：</p>
<p><img src="https://img2018.cnblogs.com/i-beta/1336199/201912/1336199-20191208200649758-1478320233.png" alt=""></p>
<p> </p>
<p> </p>
<h2> 三、解决方案：</h2>
<h3>关于页面到最底部多次触发scrolltolower事件解决：</h3>
<p>       在scrolltolower触发事件中设定一个定时器setTimeout(callback, delay, rest)，在指定的时间后执行注册的回调函数(简称防抖)。<br>代码如下所示（简单示例）：</p>
<div class="cnblogs_code">
<pre> <view>
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"<span style="color: rgba(0, 0, 0, 1)">
            @scroll</span>="scroll">
               <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
               <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
               <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
            </scroll-view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">滚动到最底部触发事件</span>
<span style="color: rgba(0, 0, 0, 1)">lower() {
</span><span style="color: rgba(0, 128, 0, 1)">//在</span><span style="color: rgba(0, 128, 0, 1)">1s后执行一次该函数</span>
setTimeout(() =><span style="color: rgba(0, 0, 0, 1)"> {

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">TODO这里填写你加载数据的方法</span>
<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.getData();

}, </span>1000<span style="color: rgba(0, 0, 0, 1)">)；
},</span></pre>
</div>
<h3>关于页面由第一个scroll-view切换到第二个scroll-view时会自动滚动到页面的最底部：</h3>
<p>　　设置一个scrollTop设置竖向滚动条的位置，首先默认为0，当页面向下滚动会触发scroll-top事件从而改变scrollTop的值，当切换到第二个scroll-view时在默认设置scrollTop为0，那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部，从而解决了默认滚动到最底部加载多次数据的问题。</p>
<p>代码如下所示（简单示例）：</p>
<div class="cnblogs_code">
<pre> <view>
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"<span style="color: rgba(0, 0, 0, 1)">
            @scroll</span>="scroll" @click="changeScrollView">
               <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
               <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
               <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
            </scroll-view>
</view></pre>
</div>
<div class="cnblogs_code">
<pre>export <span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> {
data() {
   </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
         scrollTop: </span>0<span style="color: rgba(0, 0, 0, 1)">
   }
},
methods: {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">滚动时触发事件</span>
scroll: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(e) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> console.log(e.detail.scrollTop);</span>
   <span style="color: rgba(0, 0, 255, 1)">this</span>.scrollTop =<span style="color: rgba(0, 0, 0, 1)"> e.detail.scrollTop;
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">切换scroll-view事件</span>
<span style="color: rgba(0, 0, 0, 1)"> changeScrollView(){
   </span><span style="color: rgba(0, 0, 255, 1)">this</span>.scrollTop=0;<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">回到最顶部</span>
<span style="color: rgba(0, 0, 0, 1)"> },
}
}</span></pre>
</div>
<p> </p>

</div>
<div id="MySignature" role="contentinfo">
<blockquote >
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者名称：</span>追逐时光者</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'><span style='font-size: 17px; '>作者简介：</span>一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。</p>
<p style='font-family:YouYuan;font-size: 16px;margin: 0 auto 0.01em auto;'>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【&hearts;推荐&hearts;】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。
</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/Can-daydayup/p/12006891.html

頁: [1]

琼殿技术论坛's Archiver

uni-app中使用scroll-view滚到底部时多次触发scrolltolower