专栏首页日常记录小程序框架mpx中 多层嵌套循环 绑定class

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

先看一下想要实现的效果图 如下 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>

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • wx小程序尝试 组件扩展 mpx中

    yangdongnan
  • 使用滴滴mpx 开发一个小程序组件

    yangdongnan
  • iframe 绕过 微信公众号文章防盗检测

    yangdongnan
  • python爬虫-爬取盗墓笔记

    七夜安全博客
  • java(课程设计之记事本界面部分代码公布)

    代码:涉及记事本的一些界面......!! 1 /* 2 *java课程设计之记事本(coder @Gxjun) 3 * 编写一个记事本程序 ...

    Gxjun
  • Scrapy:多个item时指定pipeline

    有时,为了数据的干净清爽,我们可以定义多个item,不同的item存储不同的数据,避免数据污染。但是在pipeline对item进行操作的时候就要加上判断。

    弄啥嘞
  • Springboot2使用shardingsphere分表攻略

    假设我们有一个table_data表,现在要将其分成5个分表table_data0、table_data1、table_data2、table_data3、ta...

    算法之名
  • 用微信小程序开发的Canvas绘制可配置的转盘抽奖

    今天在分享个微信小程序实战 Canvas绘制可配置的转盘抽奖功能案例。今天我们就分享这样的小教程。希望对大家有所帮助。

    王强
  • 【PAT甲级】Cut Integer

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    喜欢ctrl的cxk
  • Android屏幕适配框架(一)

    aruba

扫码关注云+社区

领取腾讯云代金券