小程序模板网

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

发布时间:2018-04-17 11:59 所属栏目:小程序开发教程

一:上拉加载更多

分享者:小春,来自原文地址

 

  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. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23570.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询