前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序框架mpx中 多层嵌套循环 绑定class

小程序框架mpx中 多层嵌套循环 绑定class

作者头像
yangdongnan
发布2019-03-28 15:47:23
1.1K0
发布2019-03-28 15:47:23
举报
文章被收录于专栏:日常记录

先看一下想要实现的效果图 如下 1 首先渲染一个循环创建两个图片 2 每个图片下有是一个循环创建一个时间轴 3 时间轴分两部分 第一部分只展示时间 第二部分要根据字段中 true 和 false(自定义) 来绑定选中的状态 【红色背景】

在这里插入图片描述
在这里插入图片描述

代码目录

在这里插入图片描述
在这里插入图片描述
  • meetins-item index.mpx 父组件中
代码语言:javascript
复制
<template>
	<view
		bind:tap="handleClick(item)"
		wx:for="{{rData}}"
		wx:for-index="index"
		wx:for-item="item"
		wx:key="index"
	>
		<view class="meeting-item">
			<image class="meeting-item-image" src="{{item.img}}"></image>
			<view class="meeting-item-content">
				<view class="meeting-item-left">{{item.name}}</view>
				<view class="meeting-item-right">
					<text class="text--price">{{item.price}}</text>
					<text class="text--price-">券/时</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-x="{{true}}" scroll-left="{{scrollLeft}}" class="meeting-item-scroll">
			<view class="meeting-item-scroll-box">
				<block-item
					wx:if="{{item.time}}"
					wx:for="{{item.time}}"
					wx:for-index="indexs"
					wx:for-item="items"
					wx:key="indexs" items="{{items}}"></block-item>
			</view>
		</scroll-view>
	</view>
</template>
<script>
  import { createComponent } from '@mpxjs/core'
  
  createComponent({
    relation : {},
    mixins : [],
    properties : {
      rData : {
        type : Array,
        default : () => []
      },
    },
    data : {
      scrollLeft : 0
    },
    computed : {
    },
    ready () {
    },
    methods : {
      handleClick ( evt ) {
        this.triggerEvent('click', { ...evt }, {})
      }
    }
  })
</script>
<style lang="less">
	@import "../../asstes/css/theme/meeting-item";
</style>
<script type="application/json">
	{
		"usingComponents": {
			"block-item": "./block/index"
		}
	}
</script>

ps: scroll-view 小程序原生组件 横向滚动 block-item 引入另一个组件 传递循环中 再次要循环的对象数组 数据结构 如下

在这里插入图片描述
在这里插入图片描述
  • block 子组件中
代码语言:javascript
复制
<template>
	<view class="meeting-item-scroll-item" wx:if="{{items}}">
		<view class="item__top">{{items.date}}时</view>
		<view class="item__bottom">
			<view class="item__bottom__col"
						wx:class="{{ {'bge500op' : items['leftAct']} }}"
						id="{{items.left}}">
			</view>
			<view class="item__bottom__col"
						wx:class="{{ {'bge500op' : items['rightAct']} }}"
						id="{{items.right}}"></view>
		</view>
	</view>
</template>
<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    //上下组件节点关联
    relation : {},
    mixins : [],
    //组件值传递
    properties : {
      items : Object
    },
    data : {},
    computed : {},
    ready () {},
    methods : {}
  })
</script>

ps 每个组件样式都是独立的 当然也可以写一个less文件 两个组件引用一个

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年12月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档