首先是轮播图,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
})
},

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

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

index.js新增:

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

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

微信小程序bnner滚动的更多相关文章

  1. 微信小程序-通知滚动小提示

    代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. 微信小程序scroll-view滚动一次多次触发的问题解决方案

    最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...

  3. 微信小程序—picker(滚动选择器)

    官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...

  4. 微信小程序实现滚动视频自动播放(未优化)

    先看看大概效果 1.首先需要了解微信API:          wx.createIntersectionObserver(Object component, Object options) 创建并返 ...

  5. 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...

  6. 微信小程序——<scroll-view>滚动到最底部

    最近在做个直播间,有个这样的需要,就是进入到页面,<scroll-view>需要滚动到最底部,并且发送消息之后自动的滚动到底部. 开始想着计算里面内容的高度,然后通过设置 scroll-t ...

  7. 微信小程序左右滚动公告栏效果

    <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text c ...

  8. 微信小程序实现滚动分页加载更多

    参考网址:https://www.cnblogs.com/Smiled/p/8203306.html 1.wxml: <view class='myScroll' style='float:le ...

  9. 微信小程序组件 滚动导航

    JS data: { // 初始化滑动条数据 menuIndex:0, // 每个菜单的宽度 onlyWidth: 70, // 右侧的margin marginWidth:10, // 菜单总长 m ...

随机推荐

  1. centos7 分区满了,分析哪个目录或文件占用空间-小叶-51CTO博客

    原文:centos7 分区满了,分析哪个目录或文件占用空间-小叶-51CTO博客 du -sh 例如: [root@zabbix ~]# du -sh /var/* 0 /var/adm 132M / ...

  2. Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)

    前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...

  3. C#使用wkhtmltopdf.exe,HTML页面转化为PDF文档

    此文用来记录使用wkhtmltopdf.exe在C#代码中将html转换为PDF的过程: 1,在http://wkhtmltopdf.org/downloads.html 下载wkhtmltopdf. ...

  4. Oracle数据库(三)

    专题一:oracle查询 1.where查询 查询部门编号是1的部门信息 ; 查询姓名是kw的员工,字符串使用‘’,内容大小写敏感 select *from emp where name='kw' 查 ...

  5. C语言free函数的原理——————————【Badboy】

    今天在网上看到了这样一个问题,"假设malloc 了一块字符串的内存.然后,它改变了这个字符串的大小,问会不会有一部分内存没有被释放掉."这个问题,曾经的确没有细致想过. 当然.我 ...

  6. ASP.NET配置文件里经常使用到的节点信息

     web.config文件是一个XML文件,是以<confirguration>为根结点展开的. 上一面从宏观上解说了一下有关配置的文件的内容,以下是一些有关于配置文件经常使用的操作. ...

  7. [Swift] Add Scroll View

    import UIKit class AboutViewController : UIViewController @IBOutlet weak var scrollView: UIScrollVie ...

  8. swift学习:自定义Log

    import UIKit /* 总结:1:let file = (#file as NSString).lastPathComponent,#file获取的是打印所在的文件 的全路径,转成NSStri ...

  9. php面试题二--解决网站大流量高并发方案(从url到硬盘来解决高并发方案总结)

    php面试题二--解决网站大流量高并发方案(从url到硬盘来解决高并发方案总结) 一.总结 从外到内解决网站大流量高并发问题---从提交一个url开始(从用户按下搜索栏回车键开始) url最开始会到d ...

  10. Need ffmpeg exe. You can download it by calling: imageio.plugins.ffmpeg.download()

    该问题 Need ffmpeg exe. You can download it by calling: imageio.plugins.ffmpeg.download()往往出现在在调用 impor ...