aui下拉刷新不显示刷新的图标

Posted 2023-03-19

只有一个下拉的空白区域 但是没有自带的刷新图标 这个怎么搞啊

AUI 是Apicloud 的手机端UI第三方，需要引入Apicloud和AUI中的css样式和js框架

**首先：手机项目必须配置config.xml文件 Apicloud官网有详解

**
其次：程序会默认进入index.html页面，开始程序的加载显示

具体代码如下：

1、<meta charset="utf-8">和<meta http-equiv="content-type" content="text/html; charset="utf-8">

解释：在HTML5,他们是等价的。使用更短,更容易记住和类型。浏览器支持很好,因为它是设计用来向后兼容的。

2、<meta meta http-equiv="X-UA-Compatible" content="IE=edge">

详解： http://www.cnblogs.com/jinling/p/4719114.html

3、需要引入aui的css样式 在头文件中

例如：外联引入< link rel="stylesheet" type="text/css" href="../css/aui.css">

css 可以在head中引入 ：<style type="text/css">

4、修改aui中css的样式必须要!important

例如： .aui-iconfont

font-size: 22px !important;



5、设置手机的导航视图：使用盒子div包裹起来

例如：<div class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header"></div>

aui-bar:头部的样式

aui-bar-nav：导航样式

aui-header：js使用

6、引入js框架，调用对应的js方法，获取页面元素位置和内容等，打开和关闭窗口

例如：<script type="text/javascript" src="./script/api.js">

apiready = function() ：和js中ready（）方法意思差不多，等html加载完执行该方法

api.parseTapmode(); ：解析元素 tapmode 属性，优化点击事件处理 ，默认页面加载完成后，引擎会对 dom 里面的元素进行 tapmode 属性解析，若是之后用代码创建的 dom 元素，则需要调用该方法后 tapmode 属性才会生效 参考技术A

几分钟了呢？

小程序下拉刷新，上拉加载更多

// 下拉刷新  
 onPullDownRefresh: function () {  
   // 显示顶部刷新图标  
   wx.showNavigationBarLoading();  
   var that = this;  
   wx.request({  
     url: ‘https://xxx/?page=0‘,  
     method: "GET",  
     header: {  
       ‘content-type‘: ‘application/text‘  
     },  
     success: function (res) {  
       that.setData({  
         moment: res.data.data  
       });  
       // 设置数组元素  
       that.setData({  
         moment: that.data.moment  
       });  
       console.log(that.data.moment);  
       // 隐藏导航栏加载框  
       wx.hideNavigationBarLoading();  
       // 停止下拉动作  
       wx.stopPullDownRefresh();  
     }  
   })  
 },  

/** 
   * 页面上拉触底事件的处理函数 
   */  
  onReachBottom: function () {  
    var that = this;  
    // 显示加载图标  
    wx.showLoading({  
      title: ‘玩命加载中‘,  
    })  
    // 页数+1  
    page = page + 1;  
    wx.request({  
      url: ‘https://xxx/?page=‘ + page,  
      method: "GET",  
      // 请求头部  
      header: {  
        ‘content-type‘: ‘application/text‘  
      },  
      success: function (res) {  
        // 回调函数  
        var moment_list = that.data.moment;  
  
        for (var i = 0; i < res.data.data.length; i++) {  
          moment_list.push(res.data.data[i]);  
        }  
        // 设置数据  
        that.setData({  
          moment: that.data.moment  
        })  
        // 隐藏加载框  
        wx.hideLoading();  
      }  
    })  
  
  },  

注意在json文件里设置：

"enablePullDownRefresh": true,