zoukankan      html  css  js  c++  java
  • 微信小程序调用后台接口+热点新闻滚动展示

    1、微信JS文件,发送请求调用:  //将返回接口数据,写入Page({data})里面

    //获取热点新闻,这个也是写在onload:function(){//code)里面的
               wx.request({
                 url: 'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/activity?is_hot=1',//热点新闻
                 data: {},
                 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT   
                 header: {
                   'Content-Type': 'application/json'
                 },
                 success: function (res) {
                   console.log(res.data)
                   that.setData({
                     notices: res.data   //一维数组,只取两条数据
                   })
                 },
                 fail: function () {
                   // fail  
                 },
                 complete: function () {
                   // complete  
                 }
               })

    2、后台php处理:

    使用curl调用即可,记得传参和token(key)标识

    3、JS文件里面【热点新闻滚动展示】:

    onLoad: function (res) {
     startNotice: function() {
              var me = this;
                  var notices = me.data.notices || [];
              //console.log(this.data.notices)    //就是这里有问题,数据还没从接口返回就跑到这里了 xzz-6.2
                  if( notices.length == 0 ) {
                    //return;     //是这里的问题,数据没加载过来,导致程序return;
                  }
    
                  var animation = me.animation;
                  //animation.translateY( -12 ).opacity( 0 ).step();
                  // animation.translateY( 0 ).opacity( 1 ).step( { duration: 0 });
                  // me.setData( { animationNotice: animation.export() });
    
                  var noticeIdx = me.data.noticeIdx + 1;
              console.log(notices.length);
                  if( noticeIdx == notices.length ) {
                    noticeIdx = 0;
                  }
              
                  // 更换数据
                  setTimeout( function() {
                    me.setData( {
                      noticeIdx: noticeIdx
                    });
                  }, 400 );
    
                  // 启动下一次动画
                  setTimeout( function() {
                    me.startNotice();
                  }, 5000 );
    },
          
    onShow: function() {
             this.startNotice();
    },

    4、wxml的前段代码:

    <span style="color:#999999">热门活动</span><span style="color:#3273c3">{{notices[noticeIdx]}}</span>
  • 相关阅读:
    15.Mysql之undo 日志浅谈02
    14.Mysql之redo log -checkpoint浅谈01
    13. Mysql之二进制日志(binlog)
    [C]使用argv的5种方法
    [Python]sys.stdin.readline(), sys.stdout.write(), sys.stdin.write()
    temporadas[i][2]三种等价形式
    time.h中time(NULL),stdlib.h中srand(), rand()
    strstr函数的使用
    [C]toupper, tolower
    [Python]List Comprehension
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/6943307.html
Copyright © 2011-2022 走看看