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


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表格行换色的三种实现方法
Jun 27 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javascript将浮点数转换成整数的三个方法
Jun 23 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
微信小程序点击控件修改样式实例详解
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读取数据库信息的几种方法
2008/05/24 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python Django 创建应用过程图示详解
2019/07/29 Python
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
高三学习决心书
2014/03/11 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
会计师事务所实习证明
2014/11/16 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
中学生运动会广播稿
2015/08/19 职场文书
高中班长竞选稿
2015/11/20 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python