微信小程序实战之轮播图(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关于导航条背景切换效果实现示例
Sep 04 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
js实现微信聊天效果
Aug 09 Javascript
微信小程序调用后台service教程详解
Nov 06 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
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php全角字符转换为半角函数
2014/02/07 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
python实现简单的socket server实例
2015/04/29 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
Python 切分数组实例解析
2019/11/07 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
哈理工毕业生的求职信
2013/12/22 职场文书
财产公证书
2014/04/10 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书