uniapp - 商品详情展示-table风格1

最新推荐文章于 2025-10-17 00:21:00 发布

原创

最新推荐文章于 2025-10-17 00:21:00 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jenkins #vue #javascript

本文介绍了一个使用Vue.js实现的订单详情页面，展示了商品信息如编号、名称、规格等，并通过代码展示了如何动态排序和切换显示内容。数据列表采用了flex布局，且支持两种不同的样式。

1.效果图

2.代码如下

<template>
	<view class="DetailContainer">
		<view class="headerTitle" >
			<view class="headerItem" v-for="(item,index) in tabHeaderList" 
			:key="index">
				{
  
  {item.title}}
			</view>
		</view>
		<view  v-for="(item,index1) in dataList" :key="index1" 
		:class=" (item.pxxh %2 ==0)  ? itemContent1:itemContent">
			<view class="datItem">
				{
  
  {item.pxxh+1}}
			</view>
			<view class="datItem" >
				{
  
  {item.aname}}
			</view>
			
			<view class="datItem">
				{
  
  {item.amodel}}
			</view>
			
			<view class="datItem">
				{
  
  {item.qty}}
			</view>
			
			<view class="datItem">
				{
  
  {item.price}}
			</view>
			<view class="datItem">
				{
  
  {item