微信小程序<swiper-item>标签中传入多个数组型数据的方法(小程序交流群:604788754)
在<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)的更多相关文章
- PHP中把对象转数组的几个方法
PHP中把对象转数组的几个方法: 1. //PHP stdClass Object转array function object_array($array) { if(is_object($array) ...
- 小程序之取标签中内容 例如view,text
// index.wxml页面 data-url为自定义 {{}}中内容可为后台请求到的数据 也可为固定内容例如:data-text="哈哈哈" data-url="ht ...
- c++中创建二维数组的几种方法
一.用new申请内存空间 int **dp=new int*[n];//动态申请二维数组nxm ;i<n;++i){ dp[i]=new int[m]; } 二.用malloc申请内存空间 ; ...
- (转)Java程序利用main函数中args参数实现参数的传递
Java程序利用main函数中args参数实现参数的传递 1.运行Java程序的同时,可以通过输入参数给main函数中的接收参数数组args[],供程序内部使用!即当你在Java命令行后面带上参数,J ...
- Day8 面向对象反射 item方法 打印对象信息__str__ 构析方法__del__ 程序的异常处理
反射:通过字符串来访问到所对应的值(反射到真实的属性上). eg: class Foo: x=1 def __init__(self,name): self.name=name def f1(self ...
- IOS中获取各种文件的路径介绍及方法
IOS中获取各种文件的目录路径的方法 技术交流新QQ群:414971585 iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. docum ...
- 基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
- 微信小程序解析HTML标签带有<p>
小程序中默认是不支持html格式没有<p>标签,但是有些接口需要返回带有标签的,例如 : 隐私协议: 解决方法: 小程序中有一个富文本标签组件,前端可以解析H5标签就是 rich-text ...
- 微信小程序swiper实现 句子控app首页滑动卡片
微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...
随机推荐
- Linux笔记 #10# 用于支持Web应用开发&部署&配置的一些自定义脚本
索引 一.本地开发与测试相关脚本 1.startup.sh 2.shutdown.sh 3.catalina-out.sh 4.localhost_access_log.sh 5.上传本地文件到服务器 ...
- FL Studio中音频ASIO4ALL的设置
上期我们讲解了FL Studio中音频的相关设置,今天我们来进一步讲解音频设置中的ASIO4ALL的设置,FL Studio安装包括FL Studio ASIO和第三方ASIO驱动程序ASIO4ALL ...
- gitlab搭建
环境说明: 虚拟机 centos 7 64位 内存:4GB 存储:100GB CPU: CORE 版本: gitlab 10.0.3 配置系统基础环境 配置阿里巴巴 yum 源 wget -O /et ...
- Native App自动化测试及Appium框架介绍
一 自动化工具简介 1 Appium : 开源,跨平台的自动化测试工具,用于测试Native(原生)和Hybrid(混合)应用,支持IOS/Android/FirefoxOS 平台. 2 环境 : ...
- 《 动态规划_ 入门_最大连续子序列_HDU_1003 》
题目描述: Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- redis搭建主从复用-读写分离
1:安装redis5.0.3 2:解压到/usr/local/redis 3:在/opt/redis/下创建三个文件夹 data,存放数据的目录 log,存放日志的目录 conf,存放配置的目录 co ...
- Sitecore8.2 Solr5.1.0配置步骤
1.首先下载Solr安装包,官方提供了几种下载,我选的的solr的5.1.0版本zip包,下载链接:http://mirror.bit.edu.cn/apache/lucene/solr. 2.下载后 ...
- 渐变UI
1.h #import <UIKit/UIKit.h> @interface UIView (Gradient) /* The array of CGColorRef objects de ...
- 处理npm publish报错问题
上传项目到npm-->为社会做贡献 首先你得有一个项目 npm init 生成package.json 来设置相信息 注册登录npm:npm adduser 输入你的一些信息 查看当前npm登录 ...
- H5外包团队 技术分享 基于H5+的项目分享
项目截图: 有H5项目需求欢迎联系我们 我们提供免费的项目评估报价 QQ:372900288 WX:Liuxiang0884