这个下拉刷新的效果怎么这么另类呢

  • • 发表于 8年前
  • • 作者 Thefighter
  • • 1978 人浏览
  • • 4 条评论
  • • 最后编辑时间 8年前
  • • 来自 [问 答]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

@小木 @Michael 我这里有一个项目需求:我的下拉刷新的效果怎么这么另类呢
直接上代码
wxml:

<view class="container" style="padding:0rpx">
    <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
        class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad"  bindscroll="scroll">
            <!--内容-->
            <view class="item" wx:for="{{list}}" wx:key="listid">
                  <view class="text">
                      <text class="username">{{item.order_goodstitle}}</text>
                      <text class="phone">{{item.order_sjmoney}}</text>
                  </view>
            </view>
            <view class="loading" hidden="{{searchLoading}}">正在载入更多...</view>
            <view class="loading complete" hidden="{{searchLoadingComplete}}">已加载全部</view> 
    </scroll-view>
    <view class="body-view">
      <loading hidden="{{hidden}}" bindchange="loadingChange">
        加载中...
      </loading>
    </view>
</view>

js:

var page = 0;
var loadMore = function(that){
    that.setData({
      hidden: false
    });
    //发送请求
    wx.request({
      url: 'http://localhost:80/work/bbs/index.php/Home/Show/showlist',
      data:{
        pageindex:page,
      },
      header: {
        'content-type': 'application/json'
      },
      success:function(res){
         console.log(res.data);
         var list = res.data;
         if (res.data != ''){
           that.setData({
              searchLoading: false,
              list: list,
              searchLoading:true
           });
         }else{
           that.setData({
             searchLoadingComplete:false,
             searchLoading: true
           })
         }
       page++;
       that.setData({
         hidden: true
       });
      }
    })
}
Page({
  /**
   * 页面的初始数据
   */
  data: {  
     //searchPageNum: 1,   // 设置加载的第几次,默认是第一次 
     searchLoading: true, //"上拉加载"的变量,
     searchLoadingComplete: true , //“没有数据”的变量
     hidden: true,
     list: [], //放置返回数据的数组
     scrollTop: 0,
     scrollHeight: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    //这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
     var that = this;
     wx.getSystemInfo({
     success: function (res) {
         that.setData({
           scrollHeight: res.windowHeight
         });
       }
     });
     loadMore(that);
   },
   //滑动到底部的时候
  bindDownLoad:function(res){
    var that = this;
    loadMore(that);
  },
  scroll: function (event) {
    //   该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
    this.setData({
      scrollTop: event.detail.scrollTop
    });
  },

后端php(TP3.2):
```php
namespace HomeController;
use ThinkController;
class ShowController extends Controller{
public function showlist(){
//传递过来的页数
$pageindex = $_GET[‘pageindex’];
$page_size = 10;
$obj = M(‘goodstj_mon_copy’);
$count = $obj->count();
$Page = new ThinkPage($count, $page_size);
$list = $obj->limit($pageindex,$page_size)->select();
//dump($Page);die;
if($list){
$this->ajaxReturn($list,’JSON’);
}else{
echo “失败”;
}

}

}
时间比较急,希望大神帮忙看下.

分享到:
4条评论
Ctrl+Enter
作者

Thefighter

Thefighter

APP:2 帖子:18 回复:62 积分:2795

已加入社区[2836]天

越努力,越幸运

作者详情》
Top