欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

微信小程序 bnner滚动实例详解

程序员文章站 2024-02-21 17:09:04
微信小程序 bnner滚动 首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加。 del...

微信小程序 bnner滚动

微信小程序 bnner滚动实例详解

首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加。

delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全屏显示才出来。

noclickimg 与 clickimg:切换全屏与非全屏轮播图,绑定了点击事件 changeclick 来切换,只是改变样式即可。

block:图片列表。

number_img:当前轮播 index(currentnumber),与图片 length 集合(cardnum)。其中 currentnumber:

//轮播图发生改变时改变数字

//初始化数据

data:{

currentnumber:1

}

slidechange:function(e){

var number = e.detail.current;

this.setdata({

currentnumber:number+1

})

},

微信小程序 bnner滚动实例详解

 图片你自己可以用vx:for,这个只实现静态滚动 ;

这里可以看到全屏状态下当关闭按钮被点击后 getbackstyle,把 changeclick 切换到 imgfullscrenn 待命。

index.js新增:

微信小程序 bnner滚动实例详解

详情页可以看到信息基本都是样式一样,可以使用微信提供的循环 block。

  上面写的不好的地方,请各位爱好者多多指导,有更好的效果请多多指导。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!