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

效果如下:

遍历实现方法:wxss省略:

wxml中代码:

  1. <!--导航部分轮播图-->
  2. <swiper class="navban" indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}">
  3. <swiper-item>
  4. <block wx:for="{{navs}}">
  5. <view class="navbox">
  6. <image class="navimg" src="{{item.navimg}}"></image>
  7. <text class="navtext">{{item.navtext}}</text>
  8. </view>
  9. </block>
  10. </swiper-item>
  11. </swiper>

相对应js里面的代码:

  1. var app = getApp()
  2. Page({
  3. data: {
  4. navs:[
  5. { navimg:'/images/i01.png', navtext:'掌上信息'},
  6. { navimg:'/images/i02.png', navtext:'商家'},
  7. { navimg:'/images/i03.png', navtext:'抢购'},
  8. { navimg:'/images/i04.png', navtext:'抢福利'},
  9. { navimg:'/images/i05.png', navtext:'五折卡'},
  10. { navimg:'/images/i06.png', navtext:'黑猫活动'},
  11. { navimg:'/images/i07.png', navtext:'本地圈'},
  12. { navimg:'/images/i08.png', navtext:'顺风车'},
  13. ],
  14. indicatorDots: true,
  15. autoplay: true,
  16. interval: 2000,
  17. duration: 1000,
  18. }
  19.  
  20. })

本个实例不懂之处,加群请咨询群主。

微信小程序<swiper-item>标签中传入多个数组型数据的方法(小程序交流群:604788754)的更多相关文章

  1. PHP中把对象转数组的几个方法

    PHP中把对象转数组的几个方法: 1. //PHP stdClass Object转array function object_array($array) { if(is_object($array) ...

  2. 小程序之取标签中内容 例如view,text

    // index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="ht ...

  3. c++中创建二维数组的几种方法

    一.用new申请内存空间 int **dp=new int*[n];//动态申请二维数组nxm ;i<n;++i){ dp[i]=new int[m]; } 二.用malloc申请内存空间 ; ...

  4. (转)Java程序利用main函数中args参数实现参数的传递

    Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...

  5. Day8 面向对象反射 item方法 打印对象信息__str__ 构析方法__del__ 程序的异常处理

    反射:通过字符串来访问到所对应的值(反射到真实的属性上). eg: class Foo: x=1 def __init__(self,name): self.name=name def f1(self ...

  6. IOS中获取各种文件的路径介绍及方法

    IOS中获取各种文件的目录路径的方法 技术交流新QQ群:414971585 iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. docum ...

  7. 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...

  8. 微信小程序解析HTML标签带有<p>

    小程序中默认是不支持html格式没有<p>标签,但是有些接口需要返回带有标签的,例如 : 隐私协议: 解决方法: 小程序中有一个富文本标签组件,前端可以解析H5标签就是 rich-text ...

  9. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

随机推荐

  1. mySQL简单操作(三)

    1.事务 (1)ACID 原子性(不可分割性)automicity 一致性 consistency 隔离性 isolation 持久性 durability (2)事务控制语句 begin/start ...

  2. Thymeleaf的一些操作

    1. js取值 <script th:inline="javascript"> var message = [[${message}]]; console.log(me ...

  3. flutter packages.

    connectivity This plugin allows Flutter apps to discover network connectivity and configure themselv ...

  4. js之数组操作

    js之数组操作 前言 本文主要从应用来讲数组api的一些操作,如一行代码扁平化n维数组.数组去重.求数组最大值.数组求和.排序.对象和数组的转化等.(文章摘自:https://segmentfault ...

  5. EF框架和Ado.Net的使用比较

    1.性能上(运行效率) Ado.Net的性能更高些,直接使用SQLHelper的Command.Connection等命令通过写SQL语句对数据库进行操作.(EF的实体模型,性能上肯定要损失些!!) ...

  6. mysql 删除重复数据

    1在日常使用mysql中 前端页面点击次数过多 mysql就会容易产生冗余数据,那这些数据该怎么删除呢 说下思路 查询重复字段id 查询重复字段最小id 删除重复字段ID 保留最小ID 查询重复记录这 ...

  7. js备战春招の四のDOM

    通过js查找html元素的三种方法: 1.通过id找到html元素. 2.通过标签名找到html元素. 3.通过类名找到html元素. DOM HTML document.write(); 直接写入h ...

  8. code回顾

    Linq return Content("<script>alert('你想说的话');javascript:history.go(-1);</script>&quo ...

  9. [math]本博客已经支持书写数学公式

    本博客已经支持mathjax格式公式 使用方法 使用方法单美元符号加单行公式. 使用方法双美元符号加多行公式. 展示 单行公式:\(x^2+2x+1=0\) 多行公式:\[x=\frac{{-b}\p ...

  10. 网络流(dinic算法)

    网络最大流(dinic) 模型 在一张图中,给定一个源点s,给定汇点t,点之间有一些水管,每条水管有一个容量,经过此水管的水流最大不超过容量,问最大能有多少水从s流到t(s有无限多的水). 解法 di ...