微信小程序实战之轮播图(3)


Posted in Javascript onApril 17, 2017

轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。

漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。

废话少说,下面开始动手。

业务需求:

5个图片轮番播放,可以左右滑动,点击指示点可以切换图片 

重点说明:

由于微信小程序,整个项目编译后的大小不能超过1M

查看做轮播图功能的一张图片大小都已经有100+k了

那么我们可以把图片放在服务器上,发送请求来获取。

index.wxml:

这里使用小程序提供的<swiper>组件
autoplay:自动播放
interval:自动切换时间
duration:滑动动画的时长
current:当前所在的页面
bindchange:current 改变时会触发 change 事件
由于<swiper>组件提供的指示点样式比较单一,另外再自定义指示点的样式

<view class="recommend" > 
 <view class="swiper-container"> 
  <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper"> 
   <block wx:for="{{slider}}" wx:key="unique"> 
    <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}"> 
     <image src="{{item.picUrl}}" class="img"></image> 
    </swiper-item> 
   </block> 
  </swiper> 
  <view class="dots"> 
   <block wx:for="{{slider}}" wx:key="unique"> 
    <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view> 
   </block> 
  </view> 
 </view> 
</view>

index.wxss:

.swiper-container{ 
 position: relative; 
} 
.swiper-container .swiper{ 
 height: 300rpx; 
} 
.swiper-container .swiper .img{ 
 width: 100%; 
 height: 100%; 
} 
.swiper-container .dots{ 
 position: absolute; 
 right: 40rpx; 
 bottom: 20rpx; 
 display: flex; 
 justify-content: center; 
} 
.swiper-container .dots .dot{ 
 margin: 0 10rpx; 
 width: 28rpx; 
 height: 28rpx; 
 background: #fff; 
 border-radius: 50%; 
 transition: all .6s; 
 font: 300 18rpx/28rpx "microsoft yahei"; 
 text-align: center; 
} 
.swiper-container .dots .dot.active{ 
 background: #f80; 
 color:#fff; 
}

 index.js:

//导入js 
var util = require('../../utils/util.js') 
Page({ 
 data: { 
  slider: [], 
  swiperCurrent: 0 
 }, 
 onLoad: function () { 
  var that = this; 
//网络访问,获取轮播图的图片 
  util.getRecommend(function(data){ 
   that.setData({ 
    slider: data.data.slider 
   }) 
  });  
 }, 
 //轮播图的切换事件 
 swiperChange: function(e){ 
//只要把切换后当前的index传给<swiper>组件的current属性即可 
  this.setData({ 
   swiperCurrent: e.detail.current 
  }) 
 }, 
 //点击指示点切换 
 chuangEvent: function(e){ 
  this.setData({ 
   swiperCurrent: e.currentTarget.id 
  }) 
 } 
})

utils.js:

//网络访问 
function getRecommend(callback) { 
 wx.request({ 
  url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg', 
  data: { 
   g_tk: 5381, 
   uin: 0, 
   format: 'json', 
   inCharset: 'utf-8', 
   outCharset: 'utf-8', 
   notice: 0, 
   platform: 'h5', 
   needNewCode: 1, 
   _: Date.now() 
  }, 
  method: 'GET', 
  header: {'content-Type': 'application/json'}, 
  success: function(res){ 
   if(res.statusCode == 200){ 
    callback(res.data); 
   } 
  } 
 }) 
} 
 
module.exports = { 
 getRecommend: getRecommend 
}

运行:

微信小程序实战之轮播图(3)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
React组件的三种写法总结
Jan 12 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 #Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
You might like
浅谈thinkphp的实例化模型
2015/01/04 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
lib.utf.js
2007/08/21 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
js date 格式化
2017/02/15 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
javascript实现评分功能
2020/06/24 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
快速查找Python安装路径方法
2020/02/06 Python
python集合删除多种方法详解
2020/02/10 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
赔偿协议书范本
2014/04/15 职场文书
关于安全演讲稿
2014/05/09 职场文书
英语求职信范文
2014/05/23 职场文书
公司离职证明标准样本
2014/10/05 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
个人简历求职信范文
2015/03/20 职场文书
社区党支部承诺书
2015/04/29 职场文书
安全教育主题班会教案
2015/08/12 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android