首先是轮播图,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. Keepalived + Mysql 双主

    VIP 192.168.1.41 Master 192.168.1.42 Slave 192.168.1.43 .配置 yum -y install mysql-server chkconfig -- ...

  2. spring接收对象数组实例

    JS var param= new Array(); var one= new Object; one.id = '1'; one.name= 'simba1'; param.push(one); v ...

  3. HDU 5372 线段树

    给出两种操作: 第i个0:在x位置插入一个长度为i的线段,并输出该线段共覆盖了多少之前增加的线段 1:删除第i次插入的线段 官方题解:对于新插入的线段,查询有多少个线段左端点大于等于该线段的左端点. ...

  4. Unity3d 布娃娃系统

    选中带骨骼的3d模型 GameObject->Create Other->Ragdoll... 点开发现弹出了一个Create Ragdoll的窗体 前面的基础transform把骨骼拖进 ...

  5. POJ 1679 The Unique 次最小生成树 MST

    http://poj.org/problem?id=1679 题目大意: 给你一些点,判断MST(最小生成树)是否唯一. 思路: 以前做过这题,不过写的是O(n^3)的,今天学了一招O(n^2)的,哈 ...

  6. LA 3882 - And Then There Was One(约瑟夫 递归)

    看题传送门 题目大意: N个数排成一圈,第一次删除m,以后每k个数删除一次,求最后一被删除的数. 如果这题用链表或者数组模拟整个过程的话,时间复杂度都将高达O(nk),而n<=10000,k&l ...

  7. 9.2 Binder系统_驱动情景分析_服务注册过程

    1. 几个重要结构体的引入给test_server添加一个goodbye服务, 由此引入以下概念: 进程间通信其实质也是需要三要素:源.目的.数据,源是自己,目的用handle表示:通讯的过程是源向实 ...

  8. Summary Day30

    1.内存管理 1.1 进程中的内存区域划分 代码区   仅仅读常理区    全局区    BSS     堆   栈 1.2 字符串存储形式之间的比較 字符指针,字符数组.字符动态内存 1.3 虚拟内 ...

  9. CComboBox自动匹配

    void CLoadPhotoDlg::OnCbnEditchangeCombo1() {  // TODO: 在此添加控件通知处理程序代码  UpdateData(TRUE);  CComboBox ...

  10. Java随机验证吗

    <span style="font-size:18px;">package com.java.process.jsp; import java.awt.Color; i ...