微信小程序上拉加载更多，点击按钮 弹出底部上拉菜单

一：上拉加载更多

分享者：小春，来自原文地址

1. //wxml
2. //1.scroll-y="true" 必须要指定允许纵向滚动或横向滚动
3. //2.bindscrolltolower （bindscrolltolower/bindscrolltoupper）绑定滚动事件
4. //3.竖向滚动时，必须要设置scroll-view的高度，而且不能是百分比数值。
5. <scroll-view class="news" scroll-y="true" bindscrolltolower="scrollLoadNews" style="height:500px;">
6. <view wx:for="{{newsList}}" wx:key="{{item.ClientID}}" class="news_list">
7. <navigator url="../detail/detail?clippingsId={{item.ClippingsID}}&listIndex={{index}}&listCount={{newsList.length}}">
8.  
9. <text class="news_title news_text">{{item.ClipTitle}}</text>
10. </navigator>
11.  
12. </view>
13. </scroll-view>

1. //js
2. //一开始很疑惑，在我将newsList渲染到前端以后，如何将从新加载的数据拼接到现有的新闻后面，
3. //后来通过学习，将新加载的新闻集合通过遍历，用push方法，拼接在现有新闻集合的后面，之后再将新闻集合赋值到前台
4.  
5. for (var i = 0; i < requestRes.data.data.length; i++) {
6. app.getNews.newsList.push(requestRes.data.data[i])
7. }
8.  
9. that.setData({
10. newsList: app.getNews.newsList,
11. })

1. //以下内容摘自
2. // https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
3. //tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
4. //tip: scroll-into-view 的优先级高于 scroll-top
5. //tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
6. //tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

二：点击按钮 弹出底部上拉菜单

分享者：山水之间，来自原文地址  //index.wxml

1. <button type="default" bindtap="actionSheetTap">弹出action sheet</button>
2. <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
3. <block wx:for-items="{{actionSheetItems}}">
4. <action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item>
5. </block>
6. <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
7. </action-sheet>
8. <view>
9. 提示：您选择了菜单{{menu}}
10. </view>

//index.js

1. Page({
2. data:{
3. // text:"这是一个页面"
4. actionSheetHidden:true,
5. actionSheetItems:[
6. {bindtap:'Menu1',txt:'菜单1'},
7. {bindtap:'Menu2',txt:'菜单2'},
8. {bindtap:'Menu3',txt:'菜单3'}
9. ],
10. menu:''
11. },
12. actionSheetTap:function(){
13. this.setData({
14. actionSheetHidden:!this.data.actionSheetHidden
15. })
16. },
17. actionSheetbindchange:function(){
18. this.setData({
19. actionSheetHidden:!this.data.actionSheetHidden
20. })
21. },
22. bindMenu1:function(){
23. this.setData({
24. menu:1,
25. actionSheetHidden:!this.data.actionSheetHidden
26. })
27. },
28. bindMenu2:function(){
29. this.setData({
30. menu:2,
31. actionSheetHidden:!this.data.actionSheetHidden
32. })
33. },
34. bindMenu3:function(){
35. this.setData({
36. menu:3,
37. actionSheetHidden:!this.data.actionSheetHidden
38. })
39. }
40. })