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>
  • 相关阅读:
    SpringBoot整合redis
    maven dependency全局排除
    Spring Boot程序接收命令行参数
    MySQL8.0.20安装详解
    ITRS/GCRS/J2000坐标系的相互转换
    SpringBoot日记——日志框架篇
    SpringBoot集成log4j,解决log4j.properties不生效问题
    Office
    git下载
    WINDOWS上KAFKA运行环境安装
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/6943307.html
Copyright © 2011-2022 走看看