首页 > 教程 > 微信小程序 > 微信小程序上拉加载更多

微信小程序上拉加载更多

2017-09-21 14:10:29侠客源码 复制链接

//wxml  

//1.scroll-y="true" 必须要指定允许纵向滚动或横向滚动  

//2.bindscrolltolower (bindscrolltolower/bindscrolltoupper)绑定滚动事件  

//3.竖向滚动时,必须要设置scroll-view的高度,而且不能是百分比数值。

<scroll-view class="news" scroll-y="true" bindscrolltolower="scrollLoadNews" style="height:500px;">  
   <view wx:for="{{newsList}}" wx:key="{{item.ClientID}}" class="news_list">  
       <navigator url="../detail/detail?clippingsId={{item.ClippingsID}}&listIndex={{index}}&listCount={{newsList.length}}">  
         <text class="news_title news_text">{{item.ClipTitle}}</text>  
       </navigator>  
 </view>  
</scroll-view>

 

//js  

//一开始很疑惑,在我将newsList渲染到前端以后,如何将从新加载的数据拼接到现有的新闻后面,  

//后来通过学习,将新加载的新闻集合通过遍历,用push方法,拼接在现有新闻集合的后面,之后再将新闻集合赋值到前台  

for (var i = 0; i < requestRes.data.data.length; i++) {  
        app.getNews.newsList.push(requestRes.data.data[i])  
}  
that.setData({  
       newsList: app.getNews.newsList,  
})

//tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件  

//tip: scroll-into-view 的优先级高于 scroll-top  

//tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh  

//tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部


  • 上一篇:微信小程序点击按钮弹出底部上拉菜单
  • 下一篇:微信小程序循环执行解决异步请求问题
  • 猜你喜欢

      无相关信息