微信小程序 标签传入数据


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 getElementsByTagName的简写方式
Jun 27 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
BootStrap中
Dec 10 Javascript
jQuery选择器实例应用
Jan 05 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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判断文章里是否有图片的简单方法
2014/07/26 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python网站验证码识别
2016/01/25 Python
Python生成随机密码的方法
2017/06/16 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python实现彩票系统
2020/06/28 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
车辆维修工自我评价怎么写
2013/09/20 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
工作失误检讨书范文
2015/01/26 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL