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


Posted in Javascript onJuly 07, 2017

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

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

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

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

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

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

<view>
 <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
 <block wx:for="{{images}}">
  <swiper-item>
  <image src="{{item.picurl}}" class="slide-image" />
  </swiper-item>
 </block>
 </swiper>
</view>

index.js文件

var app = getApp()
Page({

 /**
 * 页面的初始数据
 */
 data: {
 //是否显示指示点 true 显示 false 不显示
 indicatorDots: true,
 //控制方向
 vertical: false,
 //是否自动切换
 autoplay: true,
 //自动切换时间间隔
 interval: 3000,
 //滑动动画时长
 duration: 1000,
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this
 //调用应用实例的方法获取全局数据
 app.getUserInfo(function (userInfo) {
  //更新数据
  that.setData({
  userInfo: userInfo
  })
 })
 //网络请求 GET方法
 wx.request({
  url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
  method: 'GET',
  data: {},
  header: {
  'Accept': 'application/json'
  },
  //成功后的回调
  success: function (res) {
  console.log('11111' + res),
   that.setData({
   images: res.data
   })
  }
 })
 }
})

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

.swiper_box {
 width: 100%;
}

swiper-item image {
 width: 100%;
 display: inline-block;
 overflow: hidden;
}

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

Javascript 相关文章推荐
jQuery使用技巧简单汇总
Apr 18 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
微信小程序点击控件修改样式实例详解
Jul 07 #Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 #Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 #Javascript
protractor的安装与基本使用教程
Jul 07 #Javascript
vue.js实例todoList项目
Jul 07 #Javascript
微信JSAPI Ticket接口签名详解
Jun 28 #Javascript
Angular.js自动化测试之protractor详解
Jul 07 #Javascript
You might like
php中var_export与var_dump的区别分析
2010/08/21 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python translator使用实例
2008/09/06 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
自定义django admin model表单提交的例子
2019/08/23 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python对一个数向上取整的实例方法
2020/06/18 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
实习生自我鉴定范文
2013/12/05 职场文书
生日寄语大全
2014/04/08 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
反四风对照检查材料
2014/09/22 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Golang 遍历二叉树
2022/04/19 Golang