简单的说一下实现我的实现思路:
布局
- <scroll-view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad" >
- <navigator url="../newDetail/newDetail?id={{item.menuId}}" redirect="false" wx:for="{{caiItems}}" hover-class="navigator-hover">
- <view class="test_item">
- <image class="item_img" src="{{item.thumbnail}}" mode="scaleToFill"></image>
- <text class="item_content">{{item.name}}</text>
- </view>
- </navigator>
- </scroll-view>
核心就是:
JS中实现相对应的方法
源码下载:https://pan.baidu.com/s/1eTP0xkm - ```
- style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad"
JS中实现相对应的方法
- <font face="微软雅黑"> onShow: function( e ) {
- wx.getSystemInfo( {
- success: ( res ) => {
- this.setData( {
- windowHeight: res.windowHeight,
- windowWidth: res.windowWidth
- })
- }
- })
- },
- pullDownRefresh: function( e ) {
- console.log( "下拉刷新...." )
- this.onLoad()
- },
- pullUpLoad: function( e ) {
- this.setData( {
- page: this.data.page + 1
- })
- console.log( "上拉拉加载更多...." + this.data.page )
- this.getDataFromServer( this.data.page )
- },
- }</font>