微信小程序实战之轮播图(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 相关文章推荐
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
微信小程序三级联动选择器使用方法
May 19 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
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
浅谈PHP的反射API
2017/02/26 PHP
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
javascript中常用编程知识
2013/04/08 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
详解创建自定义的Angular Schematics
2018/06/06 Javascript
Vue中props的使用详解
2018/06/15 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python中装饰器级连的使用方法示例
2017/09/29 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
奶茶专卖店创业计划书
2014/01/18 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015双创工作总结
2015/07/24 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python