微信小程序 标签传入数据


Posted in Javascript onMay 08, 2017

微信小程序 <swiper-item>标签传入数据

在<swiper-item>中用for循环传入多个成对不同数据时的实现方法。

看下效果图:

微信小程序 标签传入数据

遍历实现方法:wxss省略:

wxml中代码:

<!--导航部分轮播图-->
<swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}">
    <swiper-item>
      <block wx:for="{{navs}}">
        <view class="navbox">
          <image class="navimg" src="{{item.navimg}}"></image>
          <text class="navtext">{{item.navtext}}</text>
        </view>
       </block>
    </swiper-item>  
</swiper>

相对应js里面的代码:

var app = getApp()
Page({
 data: {
  navs:[
   { navimg:'/images/i01.png', navtext:'掌上信息'},
   { navimg:'/images/i02.png', navtext:'商家'},
   { navimg:'/images/i03.png', navtext:'抢购'},
   { navimg:'/images/i04.png', navtext:'抢福利'},
   { navimg:'/images/i05.png', navtext:'五折卡'},
   { navimg:'/images/i06.png', navtext:'黑猫活动'},
   { navimg:'/images/i07.png', navtext:'本地圈'},
   { navimg:'/images/i08.png', navtext:'顺风车'},
  ],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
 }
 
})

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

Javascript 相关文章推荐
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
js实现延迟加载的方法
Jun 24 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 #Javascript
JS正则表达式验证中文字符
May 08 #Javascript
bootstrap table表格插件使用详解
May 08 #Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 #Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 #Javascript
jquery平滑滚动到顶部插件使用详解
May 08 #jQuery
H5上传本地图片并预览功能
May 08 #Javascript
You might like
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
详解JavaScript的变量
2019/04/04 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
项目建议书范文
2014/05/12 职场文书
考试保密承诺书
2014/08/30 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
捐资助学感谢信
2015/01/21 职场文书
通知的写法
2015/04/23 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书