微信小程序 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

})

},

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

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

index.js新增:

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

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

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

时间: 2017-01-16

微信小程序 for 循环详解

1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

微信小程序 WXML、WXSS 和JS介绍及详解

前几天折腾了下.然后列出一些实验结果,供大家参考. 0. 使用开发工具模拟的和真机差异还是比较大的.也建议大家还是真机调试比较靠谱. 1. WXML(HTML) 1.1 小程序的WXML没有HTML的宽容度​那么高,单标签必需是 /> 结尾的.不然会报错. 1.2 ​官方推荐使用的基础标签<view>是块标签,给了<text>作为文本标签,但是使用其他标签比如div也是可以使用的,并且都是inline标签.并且wxml的parser会把标签上的不在白名单上的属性都去掉,cla

微信小程序 实战小程序实例

微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎start. 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳转传值使用 等等等.... app.json全局配置文件 { "pages":[ "page

微信小程序 数据访问实例详解

先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

微信小程序 获取微信OpenId详解及实例代码

获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc

微信小程序 (三)tabBar底部导航详细介绍

tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp                     icon组件 Window                            text组件        

微信小程序 实现列表刷新的实例详解

微信小程序 列表刷新: 微信小程序,最近自己学习微信小程序的知识,就想实现现在APP 那种列表刷新,下拉刷新,上拉加载等功能. 先开看一下界面 1.wx.request (获取远程服务器的数据,可以理解成$.ajax) 2. scroll-view的两个事件 2.1 bindscrolltolower(滑到页面底部时) 2.2 bindscroll (页面滑动时) 2.3 bindscrolltoupper (滑倒页面顶部时) 然后我们看代码,详细描述. index.js var url = "

微信小程序 (十七)input 组件详细介绍

input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"

微信小程序 参数传递详解

微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即可明白一切. 微信小程序-参数传递 这里我找到两种小程序上的参数传递方式,为了方便,我单独拿出来和大家分享下. 一.通过事件进行参数传递 先来看眼小程序对事件的定义: #什么是事件? 这里是列表文本事件是视图层到逻辑层的通讯方式. 这里是列表文本事件可以将用户的行为反馈到逻辑层进行处理. 这里是列表文本事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

微信小程序(应用号)简单实例应用及实例详解

Demo 预览 演示视频(流量预警 2.64MB) GitHub Repo 地址 仓库地址:https://github.com/zce/weapp-demo 使用步骤 将仓库克隆到本地: bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban 打开微信Web开放者工具(注意:必须是0.9.092300版本) 必须是0.9.092300版本,之前的版本不能保证正

微信小程序 wx:key详细介绍

微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某

微信小程序 http请求详细介绍

在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

微信小程序 闭包写法详细介绍

微信小程序 闭包写法 在入口处的 app.js 中定义了一个获取用户 OpenId 的函数,在微信的登录接口 wx.login 中发起网络请求.这个函数传入一个回调函数 cb getOpenIdData: function(cb) { var that = this //调用登录接口 wx.login({ success: function(res) { wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data:

微信 小程序Demo导入详细介绍

微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入? Demo源代码(来自网络) 百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky) 360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327) demo导入方式: 打开"微信web开发者工具" -->添加项目-->填写AppID(随便填).项目名称(随便填),选择本地开发目录(Demo

微信小程序 Mustache语法详细介绍

微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

微信小程序 自定义创建详细介绍

微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

微信小程序 modal组件详细介绍

modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button> <!--弹出框--> <modal title="退出应用" hidden="{{hiddenModal

微信小程序 toast组件详细介绍

toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--toast消息框显示3秒,并绑定事件-->

微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法

前言: 微信小程序的循环实现,通过wx:for 与 wx:for-items 与 wx:key,那么他的主要使用特点是什么呢? 1 wx:for 从目前的例子看,wx:for 的使用确实是对数组来做的,参考微信icon示例程序. 示例里面都是对数组进行条件判断,比如iconsizejius就是一个典型的数组. 2 wx:for-items 与wx:for-item 2.1 wx:for-items 现在看wx:for-items, 和wx:for比,wx:for-items有什么不同呢? [案]

微信小程序 wx:for的使用实例详解

微信小程序 wx:for的使用实例详解 在小程序的开发过程中,经常会用到在前端页面循环打印一个数组或者对象的数据,这样的话就需要用wx:for来实现. 一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据,这些在上一篇博客中有详细介绍.我们最后说到写好的本地数据可以另一个页面读取: var fileData = require('../../utils/data.js') Page({ data: { showData: