XlistView 上拉加载,下拉刷新

XlistView会使我们工作中经常用到的自定义控件,所以今天简单的来学习一下它的用法

首先去github下载下来,倒入自己的工程,这个Demo里面用到了Xutils请求数据,pull解析XML数据等。

然后代码如下:记得找到XlistView控件之后要打开他刷新的开关才可以正常使用!同时记得在androidmanifest.xml中开启联网权限

public class MainActivity extends Activity implements IXListViewListener {

	private XListView xListView;
	private String uul = "http://www.oschina.net/action/api/tweet_list";
	private News news;
	private int down = 0;
	private int pageIndex = 0;
	private int pageSize = 20;
	private int count = 0;
	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {

			int count = msg.what;

			switch (count) {
			// 第一次进入程序时加载的数据
			case 0:
				ArrayList
   
   
    
     list0 = (ArrayList
    
    
     
     ) msg.obj;
				xListView.setAdapter(new MyAdapter(MainActivity.this, list0));
				break;
			// 下拉加载的数据
			case 1:

				ArrayList
     
     
      
       list1 = (ArrayList
      
      
       
       ) msg.obj;

				arr.addAll(list1);
				xListView.setAdapter(new MyAdapter(MainActivity.this, arr));
				// 停止刷新
				xListView.stopRefresh();

				break;
			// 上拉加载的数据
			case 2:
				count++;
				// 判断是否达到信息的总条数
				int index = pageSize * count;
				if (count <= 500) {
					ArrayList
       
       
         list2 = (ArrayList 
        
          ) msg.obj; arr.addAll(list2); xListView.setAdapter(new MyAdapter(MainActivity.this, arr)); // 停止刷新 xListView.stopLoadMore(); } break; default: break; } }; }; private ArrayList 
         
           list; private ArrayList 
          
            arr; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 实例化一个空集合用来存加载的数据 arr = new ArrayList 
           
             (); // 找到控件 xListView = (XListView) findViewById(R.id.xlistView); // 设置xlistView的下拉上拉开关为true,才能刷新数据 xListView.setPullLoadEnable(true); xListView.setPullRefreshEnable(true); // 设置刷新监听 xListView.setXListViewListener(this); // 请求数据的方法 getDataFromNet(uul, 0); } private void getDataFromNet(String uul, final int i) { HttpUtils utils = new HttpUtils(); utils.send(HttpMethod.GET, uul, new RequestCallBack 
            
              () { @Override public void onFailure(HttpException arg0, String arg1) { // TODO Auto-generated method stub } @Override public void onSuccess(ResponseInfo 
             
               arg0) { // 将请求结果取出 String result = arg0.result; // 因为是XML,要用pull解析,所以要把字符串转换成输入流 InputStream is = new ByteArrayInputStream(result.getBytes()); // XML解析 ArrayList 
              
                list = parseXml(is); Message msg = new Message(); msg.what = i; msg.obj = list; handler.sendMessage(msg); } }); } private ArrayList 
               
                 parseXml(InputStream result) { // 获取解析者 XmlPullParser pullParser = Xml.newPullParser(); try { pullParser.setInput(result, "utf-8"); list = new ArrayList 
                
                  (); // 获取事件类型 int eventType = pullParser.getEventType(); // 判断事件类型 while (eventType != pullParser.END_DOCUMENT) { switch (eventType) { // 判断节点名字 case XmlPullParser.START_TAG: // 获取节点名字 String startName = pullParser.getName(); if (startName.equals("tweet")) { news = new News(); } else if (startName.equals("id")) { news.setId(pullParser.nextText()); } else if (startName.equals("portrait")) { news.setPortrait(pullParser.nextText()); } else if (startName.equals("author")) { news.setAuthor(pullParser.nextText()); } else if (startName.equals("body")) { news.setBody(pullParser.nextText()); } else if (startName.equals("imgSmall")) { news.setImgSmall(pullParser.nextText()); } break; case XmlPullParser.END_TAG: String endName = pullParser.getName(); if (endName.equals("tweet")) { list.add(news); } break; default: break; } eventType = pullParser.next(); } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return list; } // 下拉刷新 @Override public void onRefresh() { // 请求数据的方法 getDataFromNet(uul, 1); } // 上拉加载 @Override public void onLoadMore() { pageIndex++; // 重新传递一个网址 String uul2 = "http://www.oschina.net/action/api/tweet_list?pageIndex=" + pageIndex; // 请求数据的方法 getDataFromNet(uul2, 2); } } 
                 
                
               
              
             
            
           
          
         
       
      
      
     
     
    
    
   
   

  • 0
    点赞
  • 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、付费专栏及课程。

余额充值