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


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 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
纯javascript制作日历控件
Jul 17 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
详解React之key的使用和实践
Sep 29 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 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/10/03 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
jQuery实现轮播图源码
2019/10/23 jQuery
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python3调用R的示例代码
2018/02/23 Python
详解爬虫被封的问题
2019/04/23 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
财产保全担保书范文
2014/04/01 职场文书
美术教师个人总结
2015/02/06 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
Python实现照片卡通化
2021/12/06 Python