• 微信小程序<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,
      }
      
    })

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

  • 相关阅读:
    数据汇总计算和分析的反思
    排名算法计算
    仿Spring读取配置文件实现方案
    xml 配置文件规范 校验
    批量插入数据(基于Mybatis的实现-Oracle)
    shallow copy 和 deep copy 的示例
    引用对象的使用和易产生bug的示例
    codis安装手册
    Redis安装手册
    map和list遍历基础
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/6814270.html
Copyright © 2020-2023  润新知