小程序框架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 父组件中

<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 子组件中

<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>