微信小程序导航栏加载动画

- 日理万妓 2021-07-24 11:51 631阅读 0赞

api->界面->导航栏
    
    顶部加载数据时,转圈的动画
    //开始动画 
     wx.showNavigationBarLoading()
    //停止动画
     wx.hideNavigationBarLoading();
    
    在接收网络请求的时候开始动画,当数据设置完成后停止动画

代码示例:

// pages/movie/movie-more/movie-more.js
    var app=getApp();
    var tools=require("../../tools/tools.js")
    
    Page({ 
    
      data: { 
        movies:[]
      },
    
      onLoad: function (options) { 
        var mname=options.mname;
        this.setData({ 
          mname:mname
        })
        var url=app.globalUrl.douban;
        var apikey=app.globalUrl.apikey;
        var sear='';
        switch(mname)
        { 
          case '即将上映':
            sear ='/v2/movie/coming_soon';
            break;
          case "正在热映":
            sear ='/v2/movie/in_theaters';
            break;
          case "Top250":
            sear ='/v2/movie/top250';
            break;
    
        }
        var dataUrl=url+sear+'?'+apikey;
        tools.http(dataUrl,this.callback);
    
        //开始网络请求,设置导航栏加载动画
        wx.showNavigationBarLoading()
    
      },
      callback:function(res)
      { 
          console.log(res);
        var movies = [];
        for (var idx in res.subjects) { 
          var subject = res.subjects[idx];
          var title = subject.title;
          //名字过长处理
          if (title.length >= 6) { 
            title = title.substring(0, 6) + "...";
          }
          var temp = { 
            title: title,
            coverUrl: subject.images.large,
            star: tools.cut(subject.rating.stars),
            average: subject.rating.average,
            movieid: subject.id,
            flag:false
    
          }
          movies.push(temp);
    
        }
        console.log(movies);
        this.setData({ 
          movies:movies
        })
        //在数据设置完成后停止加载动画
        wx.hideNavigationBarLoading();
    
      },
      //在页面渲染生命函数中设置导航栏信息
      onReady:function()
      { 
        wx.setNavigationBarTitle({ 
          title: this.data.mname
        })
      }
    
    
    })