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

网友投稿 437 2023-05-23


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

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

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

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

业务需求:

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

重点说明:

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

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

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

index.wxml:

这里使用小程序提供的组件

autoplay:自动播放

interval:自动切换时间

duration:滑动动画的时长

current:当前所在的页面

bindchange:current 改变时会触发 change 事件

由于组件提供的指示点样式比较单一,另外再自定义指示点的样式

{{index+1}}

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传给组件的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

}

运行:


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:mybatis高级映射一对多查询实现代码
下一篇:Java使用RandomAccessFile类对文件进行读写
相关文章

 发表评论

暂时没有评论,来抢沙发吧~