uni-app今天写了一个mui下拉刷新的ajax实现

通过给后台传递last和amount两个参数，获取json数组数据。

mui.init({  
    swipeBack: false,  
    pullRefresh: {  
        container: '#pullrefresh',  
        down: {  
            callback: pulldownRefresh  
        }  
    }  
});  
/**  
 * 下拉刷新具体业务实现  
 */  
var last=-5,amount=5;  
function pulldownRefresh() {  
        last =last+amount;  

        var table = document.body.querySelector('.mui-table-view');  
        var cells = document.body.querySelectorAll('.mui-table-view-cell');  
        mui.ajax({  
        type: "post",  
        dataType: "json",  
        url: "http://localhost/amazeui/data.php?action=item",  
        data: "last="+last+"&amp;amount="+amount,  
        complete :function(){$("#load").hide();},  
        success: function(msg){  
            var data = msg;  
            var tmp='';  

            $.each(data, function(i, n){  

                    var li = document.createElement('li');  
                    li.className = 'mui-table-view-cell';  
                    li.innerHTML = '<a class="mui-navigate-right">' + n.itemname + '</a>';  
            //下拉刷新，新纪录插到最前面；  
            table.insertBefore(li, table.firstChild);  
                 });    

            }  
        });    

        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  

}  

if (mui.os.plus) {  
    mui.plusReady(function() {  
        setTimeout(function() {  
            mui('#pullrefresh').pullRefresh().pullupLoading();  
        }, 1000);  

    });  
} else {  
    mui.ready(function() {  
        mui('#pullrefresh').pullRefresh().pullupLoading();  
    });  
}

用户名	头像
DCloud_heavensoft
shaten
多串君
xiaohai83
微信应用开发
demoniu
LuckyJohn
Native_O
Trust
碌卡
h***@163.com

sinazl 1楼•16 小时前作者

在uni-app中实现mui下拉刷新的Ajax请求，可以结合uni.refresh组件与uni.request来完成。以下是一个简单的代码案例，展示了如何实现这一功能。

首先，确保你的uni-app项目中已经引入了mui框架（虽然uni-app自带了很多UI组件，但mui的一些特性可能仍然有用，这里假设你出于某些原因需要用到mui的下拉刷新）。

1. 页面结构

在页面的.vue文件中，设置下拉刷新组件：

<template>
  <view>
    <mui-pull-to-refresh @refresh="handleRefresh">
      <scroll-view scroll-y="true" style="height: 100vh;">
        <view v-for="(item, index) in list" :key="index">
          {{ item }}
        </view>
      </scroll-view>
    </mui-pull-to-refresh>
  </view>
</template>

注意：mui-pull-to-refresh是假设的mui组件，实际使用时你可能需要替换为uni-app的uni.refresh组件或者其他下拉刷新组件。uni-app自带的下拉刷新组件使用方法如下：

<scroll-view scroll-y="true" style="height: 100vh;" @scrolltolower="loadMore" enable-back-to-top>
  <refresh :show="isRefreshing" @refresh="handleRefresh">
    <view v-for="(item, index) in list" :key="index">
      {{ item }}
    </view>
  </refresh>
</scroll-view>

2. 数据绑定与Ajax请求

在页面的<script>部分，定义数据和方法：

<script>
export default {
  data() {
    return {
      list: [], // 数据列表
      isRefreshing: false // 下拉刷新状态
    };
  },
  methods: {
    async handleRefresh() {
      this.isRefreshing = true; // 开始刷新
      try {
        const response = await uni.request({
          url: 'https://api.example.com/data', // 替换为你的API地址
          method: 'GET'
        });
        this.list = response.data; // 更新数据列表
      } catch (error) {
        console.error('请求失败:', error);
      } finally {
        this.isRefreshing = false; // 结束刷新
      }
    }
  },
  mounted() {
    this.handleRefresh(); // 页面加载时自动刷新一次
  }
};
</script>

3. 样式（可选）

你可以根据需要添加一些样式来美化下拉刷新组件和列表项。

<style scoped>
/* 添加你的样式 */
</style>

以上代码展示了如何在uni-app中实现一个基本的下拉刷新功能，并通过Ajax请求更新数据。请根据你的实际需求和mui或uni-app的文档进行适当调整。