加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 20:18:10 所属栏目:资源 来源:网络整理
导读:轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。 废话少说,下面开始动手。 业务需求: 5个图片轮番播放,可以左右滑动,点击指示点可以切换图片 重点说明: 由于

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

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

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

业务需求:

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

重点说明:

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

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

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

index.wxml:

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

index.wxss:

index.js:

组件的current属性即可 this.setData({ swiperCurrent: e.detail.current }) },//点击指示点切换 chuangEvent: function(e){ this.setData({ swiperCurrent: e.currentTarget.id }) } })

utils.js:

module.exports = {
getRecommend: getRecommend
}

运行:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读