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


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中$.each使用详解
Jan 29 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
Windows下的PHP5.0详解
2006/11/18 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
深入解析contentWindow, contentDocument
2013/07/04 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
python微信公众号开发简单流程
2018/03/23 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python redis 删除key脚本的实例
2019/02/19 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
django 自定义过滤器的实现
2019/02/26 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
你对IPv6了解程度
2016/02/09 面试题
委托书模板
2014/04/04 职场文书
创先争优标语
2014/06/27 职场文书
白酒营销策划方案
2014/08/17 职场文书
公务员个人考察材料
2014/12/23 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS