pulltorefresh上拉加载 下拉刷新

package com.example.mypulltorefreshdemo;


import java.util.ArrayList;


import android.app.ListActivity;
import android.os.AsyncTask;
import android.os.Bundle;
import android.text.format.DateUtils;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;


import com.handmark.pulltorefresh.library.PullToRefreshBase;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnLastItemVisibleListener;
import com.handmark.pulltorefresh.library.PullToRefreshBase.OnRefreshListener;
import com.handmark.pulltorefresh.library.PullToRefreshListView;

//需要第三方lib包,


public class MainActivity extends ListActivity {
ArrayList<String> dataList = new ArrayList<String>();
private PullToRefreshListView pull_refresh_list;
private ArrayAdapter<String> arrayAdapter;
private int index = 0;
private int TIME_COUNT = 20;


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pull_refresh_list = (PullToRefreshListView) findViewById(R.id.pull_refresh_list);


// Set a listener to be invoked when the list should be refreshed.
pull_refresh_list
.setOnRefreshListener(new OnRefreshListener<ListView>() {
@Override
public void onRefresh(
PullToRefreshBase<ListView> refreshView) {
String label = DateUtils.formatDateTime(
getApplicationContext(),
System.currentTimeMillis(),
DateUtils.FORMAT_SHOW_TIME
| DateUtils.FORMAT_SHOW_DATE
| DateUtils.FORMAT_ABBREV_ALL);


// Update the LastUpdatedLabel
refreshView.getLoadingLayoutProxy()
.setLastUpdatedLabel(label);


// Do work to refresh the list here.
new GetDataTask().execute();
}
});


// Add an end-of-list listener
pull_refresh_list
.setOnLastItemVisibleListener(new OnLastItemVisibleListener() {


@Override
public void onLastItemVisible() {
if (index < 100) {
index = index + TIME_COUNT;
initData();
arrayAdapter.notifyDataSetChanged();
} else {
// 做上拉加载的操作
Toast.makeText(MainActivity.this, "End of List!",
Toast.LENGTH_SHORT).show();
}


}
});


initData();
ListView actualListView = pull_refresh_list.getRefreshableView();


arrayAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, android.R.id.text1,
dataList);
actualListView.setAdapter(arrayAdapter);


}


class GetDataTask extends AsyncTask<Void, Void, ArrayList<String>> {


@Override
protected ArrayList<String> doInBackground(Void... arg0) {
try {


Thread.sleep(4000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return dataList;
}


@Override
protected void onPostExecute(ArrayList<String> result) {
// mListItems.addFirst("Added after refresh...");
index = 0;
dataList.clear();
initData();
arrayAdapter.notifyDataSetChanged();
// Call onRefreshComplete when the list has been refreshed.
pull_refresh_list.onRefreshComplete();
super.onPostExecute(result);
}
}
private void initData() {
for (int i = index; i < index + TIME_COUNT; i++) {
dataList.add("我是第" + i + "条目");
}
}
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中实现上拉加载下拉刷新常用的库有`better-scroll`和`vue-pull-to`等。 ## 使用 better-scroll 实现上拉加载下拉刷新 1. 安装 better-scroll 库 ```bash npm install better-scroll -S ``` 2. 在需要实现滚动的组件内引入 better-scroll,并进行初始化配置 ```html <template> <div class="scroll-wrapper"> <div class="scroll-content"> <!-- 这里是滚动内容 --> </div> </div> </template> <script> import BScroll from 'better-scroll' export default { mounted() { this.scroll = new BScroll('.scroll-wrapper', { // better-scroll 的配置项 probeType: 3, // 实时派发scroll事件 pullUpLoad: true, // 开启上拉加载 pullDownRefresh: true // 开启下拉刷新 }) this.scroll.on('pullingUp', () => { // 触发上拉加载时的操作 }) this.scroll.on('pullingDown', () => { // 触发下拉刷新时的操作 }) }, destroyed() { this.scroll.destroy() // 销毁 better-scroll 实例 } } </script> ``` 3. 在 better-scroll 的配置项中开启上拉加载下拉刷新,并添加对应的事件监听 ```javascript this.scroll = new BScroll('.scroll-wrapper', { probeType: 3, pullUpLoad: true, // 开启上拉加载 pullDownRefresh: true // 开启下拉刷新 }) // 上拉加载事件 this.scroll.on('pullingUp', () => { // 执行上拉加载操作 }) // 下拉刷新事件 this.scroll.on('pullingDown', () => { // 执行下拉刷新操作 }) ``` ## 使用 vue-pull-to 实现上拉加载下拉刷新 1. 安装 vue-pull-to 库 ```bash npm install vue-pull-to -S ``` 2. 在需要实现滚动的组件内引入 vue-pull-to,并添加对应的事件监听 ```html <template> <vue-pull-to @refresh="onRefresh" @load-more="onLoadMore" :pullDownText="'下拉刷新'" :pullUpText="'上拉加载更多'" :pullingDownText="'释放立即刷新'" :pullingUpText="'释放立即加载'" > <!-- 这里是滚动内容 --> </vue-pull-to> </template> <script> export default { methods: { onRefresh() { // 触发下拉刷新时的操作 }, onLoadMore() { // 触发上拉加载时的操作 } } } </script> ``` 在 vue-pull-to 组件中,提供了`refresh`和`load-more`两个事件用于触发下拉刷新上拉加载操作。 3. 在 vue-pull-to 组件中设置相应的文字提示和样式等属性 ```html <vue-pull-to @refresh="onRefresh" @load-more="onLoadMore" :pullDownText="'下拉刷新'" :pullUpText="'上拉加载更多'" :pullingDownText="'释放立即刷新'" :pullingUpText="'释放立即加载'" > <!-- 这里是滚动内容 --> </vue-pull-to> ``` 在 vue-pull-to 组件中,可以通过`pullDownText`、`pullUpText`、`pullingDownText`和`pullingUpText`等属性来设置文字提示和样式等属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值