微信小程序 标签传入数据


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 相关文章推荐
Jquery插件 easyUI属性汇总
Jan 19 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
webpack3+React 的配置全解
Aug 21 Javascript
详解VUE 数组更新
Dec 16 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
JavaScript实现区块链
Mar 14 Javascript
浅析vue-router原理
Oct 19 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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生成短网址示例
2014/05/05 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
使用django实现一个代码发布系统
2019/07/18 Python
python3 re返回形式总结
2020/11/20 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android