在<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,
} })

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

微信小程序<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. IDEA 热部署设置(JRebel插件激活)

    参考原文链接:https://blog.csdn.net/feidi7783/article/details/80607374

  2. Git 爬坑路(从小白开始入门) ——(1)

    通过git管理项目之前,需要先注册一个GitHub账号,方便在远程仓库进行项目管理. Git之项目在本地仓库的管理(从小白开始): 一.push到远程项目 1.在个人的GitHub账号中,创建一个远程 ...

  3. ogg同步DDL时,源和目标端表空间名称不同的解决思路

    在OGG同步过程中,经常会碰上有创建表或表空间的同步,往往因为源和目标的平台不同,如aix->linux or linux->windows,这两个平台的表空间也经常不同,在目标端执行DD ...

  4. Oracle 12 Rman增量备份

    增量备份 增量备份主要作用是仅复制自上次备份以来已更改的数据块.您可以使用RMAN创建数据文件,表空间或整个数据库的增量备份. 将增量备份作为策略的一部分的主要原因是: 用于基于增量更新备份的策略,其 ...

  5. Linux环境——MySQL安装及配置(8.0版本)

    虚拟机环境是Linux  Red Hat Enterprlse Linux (64位),本次安装的是Mysql 8.0版本. 由于有经验了,所以又弄了台虚拟机练手,承接上一篇博客(https://ww ...

  6. php动态获取网页图片路径~

    <?phpheader("Content-type:text/html;charset=utf-8"); 请求的url $url = 'http://dsc.taobaocd ...

  7. SSH实现ajax

    (1)首先要引入需要pom文件 <!-- https://mvnrepository.com/artifact/org.apache.struts/struts2-json-plugin --& ...

  8. 简单理解epel源

    EPEL源-是什么全称   EPEL源   EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适 ...

  9. JAVA-类方法与实例方法

    1.实例方法:一个方法如果不加static关键字,那么这个方法是实例方法.意思是他属于类的某个实例,通过这个实例调用它,对类的其他实例不产生影响. 2.类方法:也称静态方法.在方法前加static关键 ...

  10. [大数据面试题]storm核心知识点

    1.storm基本架构 storm的主从分别为Nimbus.Supervisor,工作进程为Worker. 2.计算模型 Storm的计算模型分为Spout和Bolt,Spout作为管口.Bolt作为 ...