当前位置:首页 > 日记 > 正文

微信小程序 <swiper-item>标签传入数据

微信小程序 <swiper-item>标签传入数据

微信小程序 <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.webp', navtext:'掌上信息'},   { navimg:'/images/i02.webp', navtext:'商家'},   { navimg:'/images/i03.webp', navtext:'抢购'},   { navimg:'/images/i04.webp', navtext:'抢福利'},   { navimg:'/images/i05.webp', navtext:'五折卡'},   { navimg:'/images/i06.webp', navtext:'黑猫活动'},   { navimg:'/images/i07.webp', navtext:'本地圈'},   { navimg:'/images/i08.webp', navtext:'顺风车'},  ],  indicatorDots: true,  autoplay: true,  interval: 2000,  duration: 1000, } })

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

Word中表格内容全部居中的操作技巧

Word中表格内容全部居中的操作技巧

操作技巧,表格,内容,操作步骤,电脑软件,  编辑文档的时候有时需要插入表格,表格的文字常常会设置成居中。能不能将所有的表格一齐设置好呢?该如何操作呢?今天,小编就教大家在Word中表格内容全部居中的操作技巧。Word中表格内容全部居中的操…

浅谈Angular4中常用管道

浅谈Angular4中常用管道

浅谈,常用,电脑软件,通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道。一、大小写转换管道 uppercase将字符串转换为大写 lowercase将字符串转换为小写<p>将字符串转换为大写{{str | upp…

微信小程序 下拉菜单的实现

微信小程序 下拉菜单的实现

下拉菜单,程序,电脑软件,微信小,微信小程序 下拉菜单看下实现效果图:实例://wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; flo…

excel2013如何快速选中复制筛选出

excel2013如何快速选中复制筛选出

数据,筛选,方法,复制粘贴,快速,  我们在使用excel进行数据筛选的时候,我们对于筛选出来的数据要把它复制到另外一个表格中,对于数据少的时候我们可以通过托拽的形式进行选择,但是对于数据比较多的情况下,我们如何快速进行选择复制呢,今天小编…

详解Vue中添加过渡效果

详解Vue中添加过渡效果

过渡效果,详解,电脑软件,Vue,最近在学习Vue这个框架,发现新的版本中,官网的文档里面说的过渡效果,如果直接粘贴官方的例子中的代码,发现并没有过渡的效果,经过反复测试之后终于知道怎么搞了,把测试的过程总结一下,以便以后回顾。贴上成功的代码:htm…

JavaScript数组去重的多种方法 |

JavaScript数组去重的多种方法 |

方法,数组去重,四种,多种,电脑软件,数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 "1" 是不同的元素,1 和 new Number(1) 是不同…

bootstrap组件之按钮式下拉菜单小

bootstrap组件之按钮式下拉菜单小

下拉菜单,组件,按钮,电脑软件,bootstrap,1、单按钮下拉菜单基础的下拉菜单最外层是.dropdown的div现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单<div class="btn-group"> <button type="button" class="btn btn-default…

将angular-ui的分页组件封装成指令

将angular-ui的分页组件封装成指令

分页,组件,方法,封装,详解,准备工作:(1)一如既往的我还是使用了requireJS进行js代码的编译(2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....首先抛出几个问题:a):何时回用到分页 (当后端返回的数据过多,一页装不满时,我们必…

如何运用Excel来制作付款单

如何运用Excel来制作付款单

付款,电脑软件,Excel,  付款凭单,是一种授权付款的凭证,如果公司需要制作付款凭单,那么应该怎么利用Excel表格来完成呢?以下是小编为您带来的关于Excel制作付款单,希望对您有所帮助。Excel制作付款单1、选中第一行的前八个单元格,开始-对齐方…

excel2010无法合并单元格的解决方

excel2010无法合并单元格的解决方

合并单元格,解决方法,电脑软件,strong,  Excel中遇到单元格无法合并的问题该如何解决呢?下面是小编带来的关于excel2010无法合并单元格的解决方法,希望阅读过后对你有所启发!excel2010无法合并单元格的解决方法无法合并单元格步骤1:打开exc…

powerpoint无法放映下一页怎么办

powerpoint无法放映下一页怎么办

处理方法,下一页,幻灯片,不能播放,电脑软件,  制作完幻灯片在播放时出现问题,不能播放下一页幻灯片,遇到这种奇怪的问题该怎么办呢?有解决的方法吧?下面小编马上就告诉大家ppt不能播放下一页幻灯片的处理方法,希望看完本教程的朋友都能学会…

QQ空间说说新增定时发表功能

QQ空间说说新增定时发表功能

空间,功能,电脑软件,QQ,ldquo,  很多人都喜欢在QQ空间里面发说说,特别是别人生日的时候,但难免可能会忘记发,这时候就有一个定时发表功能,如何定时发表空间说说?下面是小编整理的一些关于QQ空间说说新增定时发表功能的相关资料,供您参考。QQ空…