微信小程序 标签传入数据


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 相关文章推荐
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Pytorch之Variable的用法
2019/12/31 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
为什么说python适合写爬虫
2020/06/11 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
女子职高个人自荐书
2014/02/01 职场文书
主管会计岗位职责
2014/03/13 职场文书
水电站项目建议书
2014/05/12 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
给老婆道歉的话
2015/01/20 职场文书
优秀志愿者感言
2015/08/01 职场文书