微信小程序联网请求的轮播图

前端之家收集整理的这篇文章主要介绍了微信小程序联网请求的轮播图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

微信小程序的轮播图和Android的轮播图一点不一样 ,这里我们看一下我们需要用到的控件介绍

这里我们用到了swiper这个组件,上边的图片已经把这个组件的属性 都列出来了 我们用的时候直接用就可以了 接下来,再看一下网络请求的API,这里我们用到的是GET 请求,我们开一下微信小程序官方给我们的API

接下来就是开启我们小程序轮播图之旅了,附上一张效果

首先,我们看一下我们的index.wxml文件

  1. <swiper class="swiper_Box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
  2.  <block wx:for="{{images}}">

index.js文件

  1. var app = getApp()
  2. Page({
  3.  
  4.  /**
  5.  * 页面的初始数据
  6.  */
  7.  data: {
  8.  //是否显示指示点 true 显示 false 不显示
  9.  indicatorDots: true,//控制方向
  10.  vertical: false,//是否自动切换
  11.  autoplay: true,//自动切换时间间隔
  12.  interval: 3000,//滑动动画时长
  13.  duration: 1000,},/**
  14.  * 生命周期函数--监听页面加载
  15.  */
  16.  onLoad: function (options) {
  17.  var that = this
  18.  //调用应用实例的方法获取全局数据
  19.  app.getUserInfo(function (userInfo) {
  20.   //更新数据
  21.   that.setData({
  22.   userInfo: userInfo
  23.   })
  24.  })
  25.  //网络请求 GET方法
  26.  wx.request({
  27.   url: 'http://huanqiuxiaozhen.com/wemall/slider/list',method: 'GET',data: {},header: {
  28.   'Accept': 'application/json'
  29.   },//成功后的回调
  30.   success: function (res) {
  31.   console.log('11111' + res),that.setData({
  32.    images: res.data
  33.    })
  34.   }
  35.  })
  36.  }
  37. })

index.wxss 这里就是简单的控制了一下显示的样式

  1. .swiper_Box {
  2.  width: 100%;
  3. }
  4.  
  5. swiper-item image {
  6.  width: 100%;
  7.  display: inline-block;
  8.  overflow: hidden;
  9. }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持

猜你在找的微信小程序相关文章