一:上拉加载更多
分享者:小春,来自原文地址
- //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,
- })
- //以下内容摘自
- // https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
- //tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
- //tip: scroll-into-view 的优先级高于 scroll-top
- //tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
- //tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部
二:点击按钮 弹出底部上拉菜单
分享者:山水之间,来自原文地址 //index.wxml
- <button type="default" bindtap="actionSheetTap">弹出action sheet</button>
- <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
- <block wx:for-items="{{actionSheetItems}}">
- <action-sheet-item bindtap="bind{{item.bindtap}}">{{item.txt}}</action-sheet-item>
- </block>
- <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
- </action-sheet>
- <view>
- 提示:您选择了菜单{{menu}}
- </view>
//index.js
- Page({
- data:{
- // text:"这是一个页面"
- actionSheetHidden:true,
- actionSheetItems:[
- {bindtap:'Menu1',txt:'菜单1'},
- {bindtap:'Menu2',txt:'菜单2'},
- {bindtap:'Menu3',txt:'菜单3'}
- ],
- menu:''
- },
- actionSheetTap:function(){
- this.setData({
- actionSheetHidden:!this.data.actionSheetHidden
- })
- },
- actionSheetbindchange:function(){
- this.setData({
- actionSheetHidden:!this.data.actionSheetHidden
- })
- },
- bindMenu1:function(){
- this.setData({
- menu:1,
- actionSheetHidden:!this.data.actionSheetHidden
- })
- },
- bindMenu2:function(){
- this.setData({
- menu:2,
- actionSheetHidden:!this.data.actionSheetHidden
- })
- },
- bindMenu3:function(){
- this.setData({
- menu:3,
- actionSheetHidden:!this.data.actionSheetHidden
- })
- }
- })