微信小程序接收后端数据并显示轮播图_微信小程序轮播图后端-程序员宅基地

技术标签: 微信小程序  

轮播图、是否自动轮播autoplay、修改轮播速度slider部分代码:
index.wxml

<view class="container" style="">
    <!--轮播图-->
  <swiper class="home-swiper" indicator-dots="true" autoplay="{
    {autoplay}}" interval="{
    {interval}}" duration="{
    {duration}}">
    <block wx:for-items="{
    {lunboData}}">
      <swiper-item>
        
        <image src="{
    {item.imgurl}}" class="slide-image" data-tourl='{
    {item.link}}'bindtap="changeurl" />
      
      </swiper-item>
    </block>
  </swiper>
  <button bindtap="changeAutoplay">
  change autoplay
  </button>
</view>
<view>
  <slider bindchange="changeInterval" show-value step="100" min="600" max="1800"/>
</view>


index.js

Page({
    
  /**
 * 页面的初始数据
 */
  data: {
    
    src: '/images/girl.png',
    name: 'Hello World',
  //轮播图配置
    autoplay:true,
    interval: 3000,
    duration: 1200
  },
  /**
 * 自定义函数--获取微信用户信息
	   */
  getMyInfo: function (e) {
    
    let info = e.detail.userInfo;
    this.setData({
    
      src: info.avatarUrl, //更新图片来源
      name: info.nickName  //更新昵称
    })
    console.log(info);

  },
  /*onLoad: function () {
    
    var that = this;
    var data = {
    
      "datas": [{
    "id": 1,"imgurl": "http://news.jiangnan.edu.cn/__local/9/F9/7C/EFECC58D5C9BD5AAB242A846E8C_6321FDE4_44A01.jpg"
        },
        {
    
          "id": 2,
          "imgurl": "http://news.jiangnan.edu.cn/__local/8/A5/D5/AD4930674E67DD550218B76192D_C5B38DBA_4B294.jpg"
        },
        {
    
          "id": 3,
          "imgurl": "../../images/51cp.jpg"
        },
        {
    
          "id": 4,
          "imgurl": "../../images/91cp.jpg"
        }
      ]
    };
    that.setData({
    
      lunboData: data.datas
    })
  },*/
 onLoad:function(options){
    
    var that = this;
    wx.request({
    
      url: 'http://localhost:8080/weixinlunbo',
      data: {
    },
      method: 'GET', 
      // header: {
    }, // 设置请求的 header 默认是application/json
      success: function (res) {
    
        var data = {
    
          "datas": [{
    
            "id": 1, 
            "imgurl": "",
            "link":""
          },
          {
    
            "id": 2,
            "imgurl": "",
            "link": ""
          },
          {
    
            "id": 3,
            "imgurl": "",
            "link": ""
          },
          {
    
            "id": 4,
            "imgurl": "",
            "link": ""
          }
          ]
        };
        data.datas[0].imgurl = res.data[0].img;
        data.datas[1].imgurl = res.data[1].img;
        data.datas[2].imgurl = res.data[2].img;
        data.datas[3].imgurl = res.data[3].img;
        data.datas[0].link = "image1";
        data.datas[1].link = "image2";
        data.datas[2].link = "image3";
        data.datas[3].link = "image4";
        console.log("autoplay:"+res.data[4].autoplay)
        that.setData({
    
          lunboData: data.datas,
          autoplay:res.data[4].autoplay
        })
      },
      fail: function () {
    
        // fail
      },
      complete: function () {
    
        // complete
      }
    })
  },
  changeAutoplay:function(){
    
      var that=this;
      if(that.data.autoplay==true){
    
        that.setData({
    
          autoplay: false
        })
      }
      else{
    
        that.setData({
    
          autoplay: true
        })
      }
    console.log("后"+that.data.autoplay)
  },
  changeInterval:function(e){
    
    var that=this;
    that.setData({
    
      interval: e.detail.value
    })
    console.log("轮播速度:"+e.detail.value+"ms")
  },
  changeurl:function(e){
    
    var url = e.currentTarget.dataset.tourl
    console.log( e.currentTarget.dataset.tourl)
    wx.navigateTo({
    
      url: url,
    })
  }
})

index.wxss

/* pages/index/index.wxss */
.container {
    
  height: 80vh; /*高100视窗,这里写100%无效*/
  display: flex; /*flex布局模式*/
  flex-direction: column; /*垂直布局*/
  align-items: center; /*水平方向居中*/
   /*justify-content: space-around;垂直方向分散布局*/
	}
/*	image {
    
    margin-top: 50rpx;
    margin-bottom: 50rpx;
	  width: 300rpx; 
    border-radius: 50%;
}*/
text {
    
  font-size: 50rpx; /*字体大小*/
  }
.home-swiper {
    
  width: 100%;
  height: 40%;
}

.slide-image {
    
  width: 100%;
  height: 100%;
}

后端部分代码:

 @RequestMapping("/weixinlunbo")
    public void weixinlunbo(HttpServletResponse response) throws Exception{
    
        JSONArray lunbo =new JSONArray();
        for(int i=0;i<4;i++){
    
            JSONObject lunbo1=new JSONObject();
            lunbo1.put("id",i);
            if(i==0){
    
                lunbo1.put("img","http://news.jiangnan.edu.cn/__local/9/F9/7C/EFECC58D5C9BD5AAB242A846E8C_6321FDE4_44A01.jpg");
            }
            if(i==1){
    
                lunbo1.put("img","http://news.jiangnan.edu.cn/__local/8/A5/D5/AD4930674E67DD550218B76192D_C5B38DBA_4B294.jpg");
            }
            if(i==2){
    
                lunbo1.put("img","../../images/51cp.jpg");
            }
            if(i==3){
    
                lunbo1.put("img","../../images/91cp.jpg");
            }
            lunbo.add(lunbo1);
        }
        JSONObject attr=new JSONObject();
        attr.put("autoplay",false);
        lunbo.add(attr);
    response.getWriter().write(lunbo.toString());
    }
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_45128278/article/details/105999299

智能推荐

SVD矩阵分解_svd分解-程序员宅基地

文章浏览阅读2.5k次。SVD矩阵在信息科学中的应用_svd分解

jsp java方法调用_jsp怎么调用java方法-程序员宅基地

文章浏览阅读4k次。jsp调用java的方法:首先在JSP页面中引入Java方法所在的包;然后在页面中编写【】并保存运行即可。其实非常简单,因为在jsp中可以直接进行Java程序的编写,所以调用Java的方法只需一点点改动即可。推荐课程:Java教程。下面让我们来看下例子:用JAVA编写的方法package doc; //定义一个包public class Dy { ..._jsp调用java方法

如何配置DNS服务的正反向解析_dns反向解析-程序员宅基地

文章浏览阅读3k次,点赞3次,收藏13次。root@server ~]# vim /etc/named.rfc1912.zones #添加如下内容,也可直接更改模板。[root@server ~]# vim /etc/named.conf #打开主配置文件,将如下两处地方修改为。注意:ip地址必须反向书写,这里文件名需要和反向解析数据文件名相同。新建或者拷贝一份进行修改。nslookup命令。_dns反向解析

设置PWM占空比中TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4分别对应引脚和ADC通道对应引脚-程序员宅基地

文章浏览阅读2.5w次,点赞16次,收藏103次。这个函数TIM_SetCompare1,这个函数有四个,分别是TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4。位于CH1那一行的GPIO口使用TIM_SetCompare1这个函数,位于CH2那一行的GPIO口使用TIM_SetCompare2这个函数。使用stm32f103的除了tim6和tim7没有PWM..._tim_setcompare1

多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例-程序员宅基地

文章浏览阅读950次,点赞33次,收藏19次。多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例

在 Linux 系统的用户目录下安装 ifort 和 MKL 库并配置_在linux系统的用户目录下安装ifort和mkl库并配置-程序员宅基地

文章浏览阅读2.9k次。ifort 编译器的安装ifort 编译器可以在 intel 官网上下载。打开https://software.intel.com/content/www/us/en/develop/tools/oneapi/components/fortran-compiler.html#gs.7iqrsm点击网页中下方处的 Download, 选择 Intel Fortran Compiler Classic and Intel Fortran Compiler(Beta) 下方对应的版本。我选择的是 l_在linux系统的用户目录下安装ifort和mkl库并配置

随便推点

操作系统精选习题——第四章_系统抖动现象的发生由什么引起的-程序员宅基地

文章浏览阅读3.4k次,点赞3次,收藏29次。一.单选题二.填空题三.判断题一.单选题静态链接是在( )进行的。A、编译某段程序时B、装入某段程序时C、紧凑时D、装入程序之前Pentium处理器(32位)最大可寻址的虚拟存储器地址空间为( )。A、由内存的容量而定B、4GC、2GD、1G分页系统中,主存分配的单位是( )。A、字节B、物理块C、作业D、段在段页式存储管理中,当执行一段程序时,至少访问()次内存。A、1B、2C、3D、4在分段管理中,( )。A、以段为单位分配,每._系统抖动现象的发生由什么引起的

UG NX 12零件工程图基础_ug-nx工程图-程序员宅基地

文章浏览阅读2.4k次。在实际的工作生产中,零件的加工制造一般都需要二维工程图来辅助设计。UG NX 的工程图主要是为了满足二维出图需要。在绘制工程图时,需要先确定所绘制图形要表达的内容,然后根据需要并按照视图的选择原则,绘制工程图的主视图、其他视图以及某些特殊视图,最后标注图形的尺寸、技术说明等信息,即可完成工程图的绘制。1.视图选择原则工程图合理的表达方案要综合运用各种表达方法,清晰完整地表达出零件的结构形状,并便于看图。确定工程图表达方案的一般步骤如下:口分析零件结构形状由于零件的结构形状以及加工位置或工作位置的不._ug-nx工程图

智能制造数字化工厂智慧供应链大数据解决方案(PPT)-程序员宅基地

文章浏览阅读920次,点赞29次,收藏18次。原文《智能制造数字化工厂智慧供应链大数据解决方案》PPT格式主要从智能制造数字化工厂智慧供应链大数据解决方案框架图、销量预测+S&OP大数据解决方案、计划统筹大数据解决方案、订单履约大数据解决方案、库存周转大数据解决方案、采购及供应商管理大数据模块、智慧工厂大数据解决方案、设备管理大数据解决方案、质量管理大数据解决方案、仓储物流与网络优化大数据解决方案、供应链决策分析大数据解决方案进行建设。适用于售前项目汇报、项目规划、领导汇报。

网络编程socket accept函数的理解_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. con-程序员宅基地

文章浏览阅读2w次,点赞38次,收藏102次。在服务器端,socket()返回的套接字用于监听(listen)和接受(accept)客户端的连接请求。这个套接字不能用于与客户端之间发送和接收数据。 accept()接受一个客户端的连接请求,并返回一个新的套接字。所谓“新的”就是说这个套接字与socket()返回的用于监听和接受客户端的连接请求的套接字不是同一个套接字。与本次接受的客户端的通信是通过在这个新的套接字上发送和接收数_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. connection request fa

C#对象销毁_c# 销毁对象及其所有引用-程序员宅基地

文章浏览阅读4.3k次。对象销毁对象销毁的标准语法Close和Stop何时销毁对象销毁对象时清除字段对象销毁的标准语法Framework在销毁对象的逻辑方面遵循一套规则,这些规则并不限用于.NET Framework或C#语言;这些规则的目的是定义一套便于使用的协议。这些协议如下:一旦销毁,对象不可恢复。对象不能被再次激活,调用对象的方法或者属性抛出ObjectDisposedException异常重复地调用对象的Disposal方法会导致错误如果一个可销毁对象x 包含或包装或处理另外一个可销毁对象y,那么x的Disp_c# 销毁对象及其所有引用

笔记-中项/高项学习期间的错题笔记1_大型设备可靠性测试可否拆解为几个部分进行测试-程序员宅基地

文章浏览阅读1.1w次。这是记录,在中项、高项过程中的错题笔记;https://www.zenwu.site/post/2b6d.html1. 信息系统的规划工具在制订计划时,可以利用PERT图和甘特图;访谈时,可以应用各种调查表和调查提纲;在确定各部门、各层管理人员的需求,梳理流程时,可以采用会谈和正式会议的方法。为把企业组织结构与企业过程联系起来,说明每个过程与组织的联系,指出过程决策人,可以采用建立过程/组织(Process/Organization,P/O)矩阵的方法。例如,一个简单的P/O矩阵示例,其中._大型设备可靠性测试可否拆解为几个部分进行测试